JavaScript realizes web content protection
0. Business scenario
If you need to protect the content displayed on the website, for example:
1. Anti-copying of text content;
2. Preventing downloading of pictures;
3. Anti-downloading of videos;
here we use js to protect the content of the webpage, and I will adopt 3 solutions below. Protect the content of our web pages from the shallower to the deeper.
1. It is forbidden to select web page text content
Set css style to prohibit users from selecting text content. Therefore, it is solved that users cannot directly copy and paste our website content.
<style type="text/css">
/*禁止在网页中选中文字*/
body{
-moz-user-select: none; /*火狐*/
-webkit-user-select: none; /*webkit浏览器*/
-ms-user-select: none; /*IE10*/
-khtml-user-select: none; /*早期浏览器*/
user-select: none;
}
</style>
2. Disable the right button (to prevent viewing the source code of the web page)
Prohibiting the right mouse button in a web page prevents users from viewing the source code of the web page and reviewing elements.
<script type='text/javascript'>
//禁用右键（防止右键查看源代码）
window.oncontextmenu=function(){
return false;}
</script>
3. Prevent starting developer debugging tools
3.1 Prohibit any keyboard stroke event
Prevent users from launching developer debugging tools through shortcut key F12
Prevent users from launching shortcut tools through ctrl+shift+i
<script type='text/javascript'>
//禁止任何键盘敲击事件（防止F12和shift+ctrl+i调起开发者工具）
window.onkeydown = window.onkeyup = window.onkeypress = function () {
window.event.returnValue = false;
return false;
}
</script>
3.2 Prevent the browser-settings-start the developer tools
The user can open the developer debugging tool in the toolbar of the browser. Take Google Chrome as an example: click "Settings"-"More Tools"-Developer Tools.
<script type='text/javascript'>
//如果用户在工具栏调起开发者工具，那么判断浏览器的可视高度和可视宽度是否有改变，如有改变则关闭本页面
var h = window.innerHeight,w=window.innerWidth;
window.onresize = function () {
if (h!= window.innerHeight||w!=window.innerWidth){
window.close();
}
}
</script>
If the developer tools are set to separate from the current browser, that is, to display independently, add the following code:
<script type='text/javascript'>
/*如果设置开发者工具独立窗口显示，则不会改变原来网页的高度和宽度，
* 当你通过浏览器设置—打开开发者工具，则直接关闭当前窗口，让你无法查看网页元素。（不支持IE9以下浏览器）*/
if(window.addEventListener){
window.addEventListener("DOMCharacterDataModified", function(){
window.close(); }, true);
window.addEventListener("DOMAttributeNameChanged", function(){
window.close(); }, true);
window.addEventListener("DOMCharacterDataModified", function(){
window.close(); }, true);
window.addEventListener("DOMElementNameChanged", function(){
window.close(); }, true);
window.addEventListener("DOMNodeInserted", function(){
window.close(); }, true);
window.addEventListener("DOMNodeInsertedIntoDocument", function(){
window.close(); }, true);
window.addEventListener("DOMNodeRemoved", function(){
window.close(); }, true);
window.addEventListener("DOMNodeRemovedFromDocument", function(){
window.close(); }, true);
window.addEventListener("DOMSubtreeModified", function(){
window.close(); }, true);
}
</script>
4. The complete code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*禁止在网页中选中文字*/
body{
-moz-user-select: none; /*火狐*/
-webkit-user-select: none; /*webkit浏览器*/
-ms-user-select: none; /*IE10*/
-khtml-user-select: none; /*早期浏览器*/
user-select: none;
}
</style>
<script type='text/javascript'>
//1.禁用右键（防止右键查看源代码）
window.oncontextmenu=function(){
return false;}
//2.禁止任何键盘敲击事件（防止F12和shift+ctrl+i调起开发者工具）
window.onkeydown = window.onkeyup = window.onkeypress = function () {
window.event.returnValue = false;
return false;
}
//3.当用户在工具栏调起开发者工具，判断浏览器的可视高度和可视宽度是否有改变，如有改变则关闭本页面
var h = window.innerHeight,w=window.innerWidth;
window.onresize = function () {
if (h!= window.innerHeight||w!=window.innerWidth){
window.close(); //关闭浏览器
}
}
/*4.当开发者工具独立窗口显示，则不会改变原来网页的高度和宽度，
* 因此，当通过浏览器设置—打开开发者工具，则直接关闭当前窗口，让你无法查看网页元素。（不支持IE9以下浏览器）*/
if(window.addEventListener){
window.addEventListener("DOMCharacterDataModified", function(){
window.close(); }, true);
window.addEventListener("DOMAttributeNameChanged", function(){
window.close(); }, true);
window.addEventListener("DOMCharacterDataModified", function(){
window.close(); }, true);
window.addEventListener("DOMElementNameChanged", function(){
window.close(); }, true);
window.addEventListener("DOMNodeInserted", function(){
window.close(); }, true);
window.addEventListener("DOMNodeInsertedIntoDocument", function(){
window.close(); }, true);
window.addEventListener("DOMNodeRemoved", function(){
window.close(); }, true);
window.addEventListener("DOMNodeRemovedFromDocument", function(){
window.close(); }, true);
window.addEventListener("DOMSubtreeModified", function(){
window.close(); }, true);
}
</script>
</head>
<body>
这是一段文本内容,这是一段文本内容,这是一段文本内容,
<br />
这是一段文本内容,这是一段文本内容,这是一段文本内容,
<br />
<video autoplay="autoplay"
controls="controls"
src="video/1实验一：Python安装与开发环境搭建.mp4"
width="500px">
</video>
</body>
</html>
5. Realize the effect
