面试官：怎么禁止用户复制？

前言

今天在刷知乎，看到一篇非常棒的文章，想复制其中一段给妹子，结果提示"禁止转载内容不支持复制"，开玩笑，这点小伎俩能拦得住我？于是起身打开笔记本电脑尝试起来，不看不知道，一看有门道。顺手写篇文章记录下。

面试官：怎么禁止用户复制我们网页中的内容

青铜段位：阻止默认事件法

包括但不限于阻止copy事件，mouse事件（阻止选区产生），阻止key事件（阻止键盘操作）等等。

javascript 复制代码

document.addEventListener('copy', e => {
    e.preventDefault()
})

例子：blog.csdn.net/secketl/art... 未登录的csdn

面试官挑眉："用户按F12禁用JavaScript，阁下又当如何应对？"

黄金段位：CSS 幻术

本质上就是用css让用户无法区选到对应的内容，从而不能产生复制。

css 复制代码

.anti-copy {
    user-select: none;
    -webkit-user-select: none; 
    position: relative;
}
.anti-copy::after {
    content: "已启动防复制结界";
    position: absolute;
    right: -120px;
}

面试官微笑："我在控制台删掉::after伪元素，阁下幻术不攻自破，并且无法区选用内容的户体验实在太差了"

钻石段位：字符映射

这就是我今天遇到的知乎的方案。通过字体文件对字体做映射，实现展示出来的内容和实际dom的内容不一致。

真实的DOM内容就是一串乱序的中文，所以即便你通过了复制的方式拿到的内容也是无意义的内容。

似乎知乎会对特定文章生成一个字体映射的包，通过这种方式可以有效的阻止用户复制粘贴该内容。

例子：知乎禁止转载文章。

面试官思索许久："我只要拿到映射的字体包，把乱序的内容复制出来，再进行映射处理，阁下如何应对"

王者段位：自定义渲染

内容选区等都进行自定义渲染，接管所有操作。

该例子通过svg绘制内容，区选的实际上是svg绘制出来的，并且接管了选区等绘制。

例子：WPS 在线文档

面试官面露难色 ："那我只能截图AI识图了"
我：我***的，这工作我不要了。

后续

HR ：恭喜你通过了我们的面试，你期望薪资多少？
我：招聘上写15-20k，我要个18k不过分吧？
HR ：这样吧，公司这边只能给到15k，我希望你能和公司一起成长，并不是看重眼前的工资。
我：我先考虑考虑。（要不是行情不好，这饼我是一点都不想吃）