使用 Stylish 巧妙破解基于 CSS 的复制限制

本文内容仅用于学习和技术研究。请不要用此作恶。

白宦成

在一些网站上，出于版权或增长的诉求，一些网站会在站点内部加入防止复制内容的限制。作为一个内容创作者，我是支持（因为版权原因而不得不选择）这样的行为的。但另一方面，我自己也需要进行一定的笔记，对于长段的内容，显然，直接复制原作者的内容更适合我。因此，我也不得不研究一下，如何破解这种样式的限制。

为什么 CSS 能禁止复制?

CSS 当中提供了一个属性 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/user-select">user-select</a> 可以用于设定文字是否可以被选中，对于非技术人员来说，无法被选中，自然无法使用 Ctrl + C 来复制内容。在这种情况下，对于非技术人员，就可以实现很好的防复制了。

不过，CSS 防复制不算多见，我见的最多的还是以 Javascript 的方式来禁用复制和 Devtools 的。

这个属性的值有以下五种，其中 none 是用于防止复制的，设定为 None 后，即使你的内容是文本内容，也无法被选中，就无法直接使用 Ctrl + C 来完成复制了。而 text 则是可以选择文本，其他的几个属性，你可以在 MDN 的语法说明中找到。

user-select: none;
user-select: auto;
user-select: text;
user-select: contain;
user-select: all;

使用 Stylish 来破解 CSS 的限制

类似油猴脚本可以在目标网页上加载 Javascript 文件，Stylish 可以在目标网页上加载 CSS ，并按照 CSS 的计算权重，让我们的代码可以得到执行。基于这个能力，我们可以覆盖原本网页上样式，来实现将 user-select 的值修改为我们需要的值。

1. 安装 Stylish

前往 Google Chrome Extension Store 安装 Stylish

2. 找到不能复制的文字对应的样式类

在浏览器中打开开发者工具，定位到你需要复制的文本元素，在右侧的调试工具中切换到「计算样式」，就可以在其中找到 user-select属性，并可以看到对应的样式类选择器，复制选择器。

3. 在 Stylish 中新建一个样式文件，并在其中添加对应样式类的代码

因为我们只需要修改复制，所以只需要将对应的属性的值做一个简单的修改即可。

4.设置生效网站

为了减少这段代码影响到的页面，你可以在下方的应用对象这里设定具体生效的网站，从而降低对于其他站点的影响。

本次针对 CSS 禁止复制的研究帮助我节省了大量的研究的时间，有效的提升了我进行研究的效率，真的不错！