探索前端内容保护

前言

在部分网站CV别人代码或是一段文字时，经常遇到无法选中，或许选中之后，复制时弹出提示让登录/关注。常常让我们感到无奈，那么这是怎么做到的呢？

其一：无法选中

选中，在英文单词中，对应为selected。为了能搜索到更多有用信息，我们将检索词改为原形，也就是select。

对于前端内容，MDN是最好的选择。所以，直接来到这里进行检索。

以下来自wiki百科 MDN Web Docs（以前称为 Mozilla 开发人员网络和 Mozilla 开发人员中心）是面向 Web 开发人员的文档存储库和学习资源。它由 Mozilla 于 2005 年创建，作为有关开放 Web 标准、Mozilla 自己的项目和开发人员指南的文档的统一场所。 MDN Web Docs 内容由 Mozilla、Google 员工和志愿者（开发人员和技术作家社区）维护。它还包含 Microsoft、Google 和 Samsung 贡献的内容，这些公司在 2017 年宣布将关闭自己的文档项目并将所有文档移至 MDN Web Docs。主题包括 HTML5、JavaScript、CSS、Web API、Django、Node.js、WebExtensions、MathML 等。

可以检索到以下内容

MDN 检索select

• <select>标签 这是HTML的基础标签属性，pass

• select 事件 第一眼，很像，但其实这是留给copy按钮的。 比如你想提供一个可复制 input / textarea 内容，拿到控件后，调用他的select()方法来选中输入框的内容。

• user-select CSS属性

user-select CSS 属性用于控制用户是否可以选择文本。这不会对作为浏览器用户界面（即 chrome）的一部分的内容加载产生任何影响，除非是在文本框中。

原来这么一个CSS属性就是无法选中的元凶。为了兼容性，可以这样写：

.unselectable {
  -webkit-user-select: none; /* Safari */
  user-select: none;
}

打开一个某知名知识付费网站看一下。

审查元素

果然是这么实现！

其二：监听copy方法

完成第一步之后，能够防住杜绝大部分人随意复制。

第二道防线就是复制时加上警告，方法就是监听copy事件。

当用户通过浏览器的用户界面发起复制动作时，将触发 copy 事件。该事件的默认行为是将当前选中的内容（如有）复制到系统剪贴板。

具体实现如下：

addEventListener("copy", (event) => {});

oncopy = (event) => {};

那么继续在审查元素可以看到可以在网站上看到如下：

事件监听

自己想的一个实现方法：

// 获取页面中所有的元素
var allElements = document.getElementsByTagName('*');

// 遍历所有元素
for (var i = 0; i < allElements.length; i++) {
    // 添加 "user-select" 属性
    allElements[i].setAttribute('user-select', 'none');

    // 添加 "copy" 事件监听器
    if (allElements[i].oncopy) {
        allElements[i].addEventListener('copy', { (event) =>
            event.preventDefault(); // 阻止默认事件
            // doSomthing
         });
    }
}

这里不止可以禁止复制，还可以加上一些复制水印。

其三：还有高手？

• 禁用审查元素（F12）
• 用Canvas渲染。

总结

其实只要你能看见，就都没法进行彻底的保护，比如针对以上所有手段，一个OCR全搞定。

防君子不防小人。

我正在参与2023腾讯技术创作特训营第二期有奖征文，瓜分万元奖池和键盘手表