前言
在部分网站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-selectCSS属性
user-select CSS 属性用于控制用户是否可以选择文本。这不会对作为浏览器用户界面（即 chrome）的一部分的内容加载产生任何影响，除非是在文本框中。
原来这么一个CSS属性就是无法选中的元凶。为了兼容性，可以这样写：
代码语言：css复制.unselectable {
-webkit-user-select: none; /* Safari */
user-select: none;
}打开一个某知名知识付费网站看一下。
审查元素果然是这么实现！
其二：监听copy方法
完成第一步之后，能够防住杜绝大部分人随意复制。
第二道防线就是复制时加上警告，方法就是监听copy事件。
当用户通过浏览器的用户界面发起复制动作时，将触发 copy 事件。该事件的默认行为是将当前选中的内容（如有）复制到系统剪贴板。
具体实现如下：
代码语言：javascript复制addEventListener("copy", (event) => {});
oncopy = (event) => {};那么继续在审查元素可以看到可以在网站上看到如下：
事件监听自己想的一个实现方法：
代码语言：javascript复制// 获取页面中所有的元素
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腾讯技术创作特训营第二期有奖征文，瓜分万元奖池和键盘手表
