JS，CSS，jQuery禁止网页文字复制选择剪贴(代码除外)，禁止打印网页，屏蔽鼠标右键，禁止拖动图片，禁止打开控制台，禁止另存网页源码

2022年3月25日 9点热度 0人点赞 0条评论

对于我们自己的知识产权，我们需要非常注重其保护。比如我，记录了一两天的博文，给别人用一两分钟就复制下来，还大摇大摆坐收流量，让人感到非常的不爽。此刻我也基本能理解百度文库这样做的良苦用心。

所以没有办法了，我也只能去找找怎样能防止复制粘贴，禁止打印这类奇怪的操作了

1.禁止用户打印网页或者预览打印页面

如何使用 CSS 禁止用户打印出完整的网页内容

之前百度文库就是被用户扒出能够通过打印页面来复制文字。所以用一些简单的方法，起码能够防住小白。

要真正禁止打印页面是办不到的，但是如果能设置让用户打印到的是空白或者一行字，也算是实现禁止打印的目的了

<style> 
@media print{ 
body{display:none} 
} 
</style>

2.禁止用户选择网页中的文字

（1）如何使用 JavaScript 禁用完整网页的文本选择

使用 onmousedown 和 onselectstart 事件属性和 body 标签来禁用整个网页的文本选择。这些事件会覆盖浏览器的默认行为。

 <body onmousedown="return false" onselectstart="return false">

（2）如何使用 JavaScript 禁用部分网页的文本选择

将 onmousedown 和 onselectstart 事件属性与要禁用文本选择的 HTML 标记一起使用。在下面的示例中，第二个 div 标签的文本选择被禁用。

<!DOCTYPE html>
<html lang="en" dir="ltr">
 <head>
 <meta charset="utf-8">
 <title>这是网页的标题</title>
 </head>
 <body>
 <div>
 已为此文本启用文本选择。
 </div>
 <div onmousedown="return false" onselectstart="return false">
 此文本禁用文本选择。
 </div>
 </body>
</html>

（3）如何使用 CSS 禁用整个网页的文本选择

使用带有 body 标签的 user-select CSS 属性来禁用整个网页的文本选择。对于某些浏览器，您需要在用户选择之前添加扩展程序。

body {
  -moz-user-select:none; /* Firefox私有属性 */
  -webkit-user-select:none; /* WebKit内核私有属性 */
  -ms-user-select:none; /* IE私有属性(IE10及以后) */
  -khtml-user-select:none; /* KHTML内核私有属性 */
  -o-user-select:none; /* Opera私有属性 */
  user-select:none; /* CSS3属性 */
}

（4）如何使用 CSS 禁用部分网页的文本选择

使用带有 HTML 标记的用户选择 CSS 属性来禁用文本选择。您可以使用类或 ID 来定位这些 HTML 元素。在下面的示例中，第二个 div 标签的文本选择被禁用。在这里， class 用于定位第二个 div。

<!DOCTYPE html>
<html lang="en" dir="ltr">
 <head>
 <meta charset="utf-8">
 <title>这是网页的标题</title>
 <style>
 .disable-text-selection {
 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
 }
 </style>
 </head>
 <body>
 <div>
 已为此文本启用文本选择。
 </div>
 <div class="disable-text-selection">
 此文本禁用文本选择。
 </div>
 </body>
</html>

（5）如何使用 jQuery 禁用整个网页的文本选择

$(document).bind("selectstart",function(){return false;});

3.禁止用户复制粘贴，剪切网站所有内容

（1）如何使用 JavaScript 禁用剪切、复制和粘贴

您可以使用目标 HTML 元素的 oncut、oncopy 和 onpaste 事件属性禁用剪切、复制和粘贴。如果要禁用整个网页的剪切、复制和粘贴，则需要将这些事件属性与 body 标记一起使用。您还可以使用 ondrag 和 ondrop 事件属性禁用拖放。在下面的示例中，对输入标签禁用剪切、复制、粘贴、拖放和放置。

<!DOCTYPE html>
<html lang="en" dir="ltr">
 <head>
 <meta charset="utf-8">
 <title>这是网页的标题</title>
 </head>
 <body>
 <div>
 对以下输入元素禁用剪切、复制和粘贴。
 </div>
 <input
 type="text"
 onselectstart="return false"
 oncut="return false"
 oncopy="return false"
 onpaste="return false"
 ondrag="return false"
 ondrop="return false"
 />
 </body>
</html>

（2)如何使用 jQuery 禁用剪切、复制和粘贴

您可以使用 jQuery bind() 函数在网页上禁用剪切、复制和粘贴。在 bind() 函数中，您必须指定当用户尝试在网页上剪切、复制或粘贴任何内容时触发的剪切、复制和粘贴事件。在使用之前，请确保在 head 部分中嵌入 script 标签以加载 jQuery。

<!DOCTYPE html>
<html lang="en" dir="ltr">
 <head>
 <meta charset="utf-8">
 <title>这是网页的标题</title>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
 </head>
 <body>
 <div>
 对整个网页禁用剪切、复制和粘贴。
 </div>
 <input type="text" />
 <script type="text/javascript">
 $(document).ready(function() {
 $('body').bind('cut copy paste', function(event) {
 event.preventDefault();
 });
 });
 </script>
 </body>
</html>

4.禁止用户在网页中使用右键单击

（1）如何使用 JavaScript 在网页上禁用右键单击

您可以通过使用 oncontextmenu 事件并在事件处理程序中包含“return false”来禁用网页上的右键单击。

<!DOCTYPE html>
<html lang="en" dir="ltr">
 <head>
 <meta charset="utf-8">
 <title>这是网页的标题</title>
 </head>
 <body>
 <div>
 对整个网页禁用右键单击。
 </div>
 <script type="text/javascript">
 document.oncontextmenu = new Function("return false");
 </script>
 </body>
</html>

（2）如何使用 jQuery 在网页上禁用右键单击

您可以使用上下文菜单事件禁用对网页的右键单击。

<!DOCTYPE html>
<html lang="en" dir="ltr">
 <head>
 <meta charset="utf-8">
 <title>这是网页的标题</title>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
 </head>
 <body>
 <div>
 对整个网页禁用右键单击。
 </div>
 <script type="text/javascript">
 $(document).bind("contextmenu",function(e){
 return false;
 });
 </script>
 </body>
</html>

（3）直接在body中添加以下代码即可在网页上禁用右键单击

<body oncontextmenu = "return false" ></body>

5.禁止用户在网页中拖动图片

（1）如何使用 CSS 禁止用户在网页中拖动图片

<style>
        img {
              -webkit-user-drag: none;
            }
</style>

（2）如何使用 JavaScript 禁止用户在网页中拖动图片

document.ondragstart = function() {
        return false;
};

（3）如何使用 jQuery 禁止用户在网页中拖动图片

$('img').on('mousedown',function (e) {
    e.preventDefault()
})

6.禁止用户打开浏览器控制台（开发人员工具）

完全禁止打开控制台是不可能的，我们最多只能屏蔽F12或者Ctrl+shift+l来阻止一些闲人打开控制台。但是一般打算去开控制台的人都有能力无视这些雕虫小技

注意：屏蔽右键，F12，Ctrl+shift+l，Shift+F10并使用(5)(7)方法有效禁止用户打开浏览器控制台

（1）如何使用 JavaScript 屏蔽F12键

document.onkeydown = document.onkeyup = document.onkeypress = function(event) {
    var e = event || window.event || arguments.callee.caller.arguments[0];

    if (e && e.keyCode == 123) {
            e.returnValue = false;
            return (false);
    }
}

（2）如何使用 JavaScript 屏蔽Ctrl+shift+l键

document.onkeydown = document.onkeyup = document.onkeypress = function(event) {
    var e = event || window.event || arguments.callee.caller.arguments[0];

    if (window.event.ctrlKey && window.event.shiftKey && window.event.keyCode == 73) {
            e.returnValue = false;
            return (false);
    }
}

（3）如何使用 JavaScript 屏蔽Shift+F10键

document.onkeydown = document.onkeyup = document.onkeypress = function(event) {
    var e = event || window.event || arguments.callee.caller.arguments[0];

    if (window.event.shiftKey && window.event.keyCode == 121) {
            e.returnValue = false;
            return (false);
    }
}

（4）如何使用 JavaScript 禁用预先调试

就算是同时禁用掉F12和右键，用户还是可以提前打开调试窗口，然后在地址中输入网址，这样就算不用右键和F12也是打开调试窗口的。

另外用户也可以通过浏览器菜单打开开发者工具来开启调试窗口，还有诸如 shift+ctrl+i 的快捷键打开控制台。

对于这种预先打开调试窗口的方法，我们可以通过比较屏幕 window.outerWidth 和页面可见内容区域 window.innerWidth 的差距判断是否打开控制台。

var threshold = 160; // 打开控制台的宽或高阈值
// 每秒检查一次
setInternet(function() {
	if (window.outerWidth - window.innerWidth > threshold || 
	window.outerHeight - window.innerHeight > threshold) {
		// 如果打开控制台，则刷新页面
		window.location.reload();
	}
}, 1e3);

（5）通过使用 JavaScript 无限debugger

缺点：页面很卡

<script>
      setInterval(function() {
        check();
      }, 2000);
      var check = function() {
        function doCheck(a) {
          if (('' + a / a)['length'] !== 1 || a % 20 === 0) {
            (function() {}['constructor']('debugger')());
          } else {
            (function() {}['constructor']('debugger')());
          }
          doCheck(++a);
        }
        try {
          doCheck(0);
        } catch (err) {}
      };
      check();
 </script>

（6）通过使用 JavaScript 计算debugger的时间差

缺点：关闭debugger就无法检测了

<script>
    function consoleOpenCallback() {
        alert("CONSOLE OPEN");
    }
 
    !function () {
        const handler = setInterval(() => {
            const before = new Date();
            debugger;
            const after = new Date();
            const cost = after.getTime() - before.getTime();
            if (cost > 100) {
                consoleOpenCallback();
                clearInterval(handler)
            }
        }, 1000)
    }();
</script>

（7）百度中找到的终极大杀器，效果未知，谨慎尝试

缺点：火狐及QQ浏览器不生效

上述方法禁止右键和F12打开控制台，但是知道打开控制台的人基本上都是懂技术的，这点限制还难不倒他们，他们可以通过Ctrl+Shift+I或者浏览器设置进入开发者模式，实乃帝国主义亡我之心不死，对付这种狡诈恶徒，需要祭上最终手段。我们检测用户是否打开控制台，如果打开，我们对网页进行一些操作，例如：强制跳转页面。

var ConsoleManager={
            onOpen:function(){
                alert("Console is opened")
            },
            onClose:function(){
                alert("Console is closed")
            },
            init:function(){
                var self = this;
                var x = document.createElement('div');
                var isOpening = false,isOpened=false;
                Object.defineProperty(x, 'id', {
                    get:function(){
                        if(!isOpening){
                            self.onOpen();
                            isOpening=true;
                        }
                        isOpened=true;
                    }
                });
                setInterval(function(){
                    isOpened=false;
                    console.info(x);
                    console.clear();
                    if(!isOpened && isOpening){
                        self.onClose();
                        isOpening=false;
                    }
                },200)
            }
        }

        ConsoleManager.onOpen = function(){
            //打开控制台，跳转到百度
            try{
                window.open('https://www.baidu.com/',target='_self');
            }catch(err){
                var a = document.createElement("button");
                    a.onclick=function(){
                    window.open('https://www.baidu.com',target='_self');
                }
                a.click();
            }
        }
        ConsoleManager.onClose = function(){
            alert("Console is closed!!!!!")
        }
        ConsoleManager.init();

7.禁止用户保存网页源代码（禁止用户另存网页）

（1）通过使用 <noscript> 禁止用户保存网页

<noscript> 
<iframe src="*.htm"></iframe> 
</noscript>

（2）如何使用 JavaScript 屏蔽Ctrl+U键查看源代码

<script>
	//按键触发
document.onkeydown = function(){
  //禁止ctrl+u
  if (event.ctrlKey && window.event.keyCode==85){
  return false;
  }
  }
</script>

（3）如何使用 JavaScript 屏蔽Ctrl+S键网页另存为

<script>
	//按键触发
document.onkeydown = function(){
	//禁止ctrl+s
  if (event.ctrlKey && window.event.keyCode==83){
  return false;
  }
  }
</script>

8.禁止用户通过F5频繁刷新页面

如何使用 JavaScript 屏蔽F5键刷新页面

<script>
	//按键触发
document.onkeydown = function(){
	//禁止 F5 
  if (window.event && window.event.keyCode == 116) {
  event.keyCode = 0;
  event.returnValue = false;
  }
  }
</script>

9.使用 JavaScript 屏蔽F1,F2,F3,F4,F5,F6,F7,F8,F9,F10,F11,F12

document.onkeydown = function (event) {
  if ((event.keyCode == 112) || //屏蔽 F1
    (event.keyCode == 113) || //屏蔽 F2
    (event.keyCode == 114) || //屏蔽 F3
    (event.keyCode == 115) || //屏蔽 F4
    // (event.keyCode == 116) || //屏蔽 F5
    (event.keyCode == 117) || //屏蔽 F6
    (event.keyCode == 118) || //屏蔽 F7
    (event.keyCode == 119) || //屏蔽 F8
    (event.keyCode == 120) || //屏蔽 F9
    (event.keyCode == 121) || //屏蔽 F10
    (event.keyCode == 122) || //屏蔽 F11
    (event.keyCode == 123)) //屏蔽 F12
  {
    return false;
  }
}

以上方法基本能挡住大部分小白的行动了。但是有的小白善于利用百度，他可能会发现只需禁用Javascript就能搞定大部分的屏蔽。因此我们要使用多种方法加固网站，尽可能使用CSS，或者强制用户使用Javascript。

但是，我们也不能这么缺德。作为代码学习网站，代码是网站重要组成部分。众所周知大量程序员使用Ctrl+C或Ctrl+V进行工作。如果我们使用了上面的屏蔽代码，在屏蔽网站文章内容的同时，我们也把代码禁止复制了。这样做是极其不友好的。有没有什么办法能够屏蔽网站文章内容的同时又不屏蔽代码呢？

以下内容由本人发现，并且仅适用于Wordpress！

我们先去插件商城安装两个插件：WPCopyRights网站防复制插件 和 Copy Anything to Clipboard

安装完成后，请直接启用

先说一下原理：大家平时逛一些论坛例如CSDN，都会发现代码框会附上非常贴心的一键复制按钮

我们可以给我们网站的代码框也加上这样一个按钮。这样用户虽然无法手动选择文字复制代码，但是只要他点一下代码框的“一键复制”，就能直接把代码复制下来了

回到正题，安装并启用插件后，我们首先设置WPCopyRights网站防复制插件

其他的选项各位可以按需开启，但是“禁止选择”这个选项必须要关闭！不能开！

配置完第一个插件，我们再去设置Copy Anything to Clipboard

在后台界面左边的设置-Copy Anything to Clipboard，点进去就完了

看到那个Add New吗，点进去，添加


Selector  不用改

Style	
可以选择按钮或者一张svg

Button Text	就是按钮显示的的那行字，比如“点击复制”


Button Copy Text	点击复制按钮后显示什么。比如“已复制！转载请附上原链接！”

然后create即可

我们找到我们的文章，进去后发现文章里的文字都不能被选择了，点击代码框右上角的复制按钮，能够将代码复制下来

其他环境也可以按照我的思路搞一下~