【copy零距离】网页复制限制的实现以及如何破解？

深碍√TFBOYSˉ_ 2023-09-27 13:36 85阅读 0赞

**目录**

1. 场景

2. 网页复制限制的实现

效果演示：

代码示范：

核心代码讲解：

3. 破解

--------------------

### 1. 场景 ###

> 你是否遇到过下面的情况：我就单纯的想复制，结果又是让我登录又是开会员，作为一个复制粘贴工程师（并不），叔叔可忍，婶婶不可忍？
> 
> 下面会解析不让复制如何实现的，以及如何破解

![c2d2843daa89411881cf0952e7873fff.png][]

![337d8370003b4f1f8b83e073634ad5f3.png][]

--------------------

### 2. 网页复制限制的实现 ###

> 这是我实现的限制复制功能，可以看到，复制我之前的博客会弹窗粘贴板也是我设置的内容。具体实现代码及讲解请往下看

#### 效果演示： ####

![bc8ebf5f779442dda32cddcc92b68d2a.gif][]

--------------------

#### 代码示范： ####

document.addEventListener('copy',e=>{
        e.preventDefault() // 阻止默认行为，阻止用户复制
         // e.clipboardData.setData设置粘贴板内容，自己任意定制
        e.clipboardData.setData('text/plain', '想复制，先打钱！1个小目标！');
        alert("不要复制啊~")  // alert设置弹窗内容，自己任意定制
    })

--------------------

#### 核心代码讲解： ####

e.clipboardData.setData // 设置粘贴板内容-你可以任意写你想要的内容
    e.clipboardData.setData('text/plain', '想复制，先打钱！');
    
    document.addEventListener('copy',e=>{})  // 监听用户复制行为
    
    e.preventDefault() // 阻止默认行为，阻止用户复制
    
    e.target // 用户复制的是什么地方的内容，可以根据不同地方来做不同提示

--------------------

### 3. 破解 ###

> 同样还是我那篇文章，还是同样的位置，我破解之后再次复制，就可以正常的复制粘贴了

![d64d452cf61546ab827a73712accb4dd.gif][]

--------------------

#### 破解步骤是： ####

点击元素、事件监听器、copy、移除 大功告成！

#### 完整代码演示： ####

> 可以直接打开，进行调试~~

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
          body {
            margin: 0;
            position: relative;
            height: 100vh;
          }
    
          .menu-wrapper {
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            width: 300px;
            background-color: #ccc;
          }
    
          .resize-bar {
            position: absolute;
            top: 0;
            right: 0px;
            width: 10px;
            height: 100%;
            cursor: col-resize;
            background-color: orange;
          }
    
          .content {
            margin-left: 300px;
            height: 100%;
            background-color: #999;
          }
        </style>
      </head>
    
      <body>
        <div class="menu-wrapper">
          <div class="resize-bar"></div>
        </div>
        <div class="content">
          　　正畅游在dsaddsadsad洋之中，只听见院门哐的一声，被猛的8785676踹开，两个和齐磊年纪相仿的少年，大摇大摆地走4进来。
          　　“儿子！爸爸来看你了！”
          　　齐磊僵了一下，但没敢抬头，却在心里想象着两个人的样子。
          　　一个，带着金dadas7547456线框眼镜，瘦的像电线杆儿。
          　　另一个，腰aaa里别着个明晃晃的精英三44665765765代，像个土鳖。
          　　等那两少年来到33齐大萨达磊窗户前，隔着半开的窗户往里看的时候，齐磊说话了。
          　　“东西放下，然aaaaa后....滚！” 　　两人一愣，被吓到了。
          　　倒不是齐磊言语不客气，而是..333rrt.操！这货居然在用功？
          　　唐奕惊悚地33333看了身边的吴宁一眼，吴宁也惊悚地看了一眼他。
          　　唐奕：“在在…在看书3” 　　吴宁：“被哪个小妞儿刺激到了吧？”
          　　唐奕：“3那是3333不是晚了点啊？” 　　吴宁：“晚吗？” 　　唐奕：“晚！”
          　　齐磊爆发了，“再说33一遍，东西放下，人马上滚！” 　　“得勒！”
          　　唐奕、吴宁333乖巧333应声，把一袋包子恭恭敬敬地递进窗户，然后耷拉着脑袋往出走。
        </div>
    
        <script>
          document.addEventListener("copy", (e) => {
            e.preventDefault();
            e.clipboardData.setData("text/plain", "想复制，先打钱！1个小目标！");
            alert("不要复制啊~");
          });
        </script>
      </body>
    </html>

[c2d2843daa89411881cf0952e7873fff.png]: https://img-blog.csdnimg.cn/c2d2843daa89411881cf0952e7873fff.png
[337d8370003b4f1f8b83e073634ad5f3.png]: https://img-blog.csdnimg.cn/337d8370003b4f1f8b83e073634ad5f3.png
[bc8ebf5f779442dda32cddcc92b68d2a.gif]: https://img-blog.csdnimg.cn/bc8ebf5f779442dda32cddcc92b68d2a.gif
[d64d452cf61546ab827a73712accb4dd.gif]: https://img-blog.csdnimg.cn/d64d452cf61546ab827a73712accb4dd.gif