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

- Link: https://www.ixiqin.com/2022/03/19/stylish-clever-crack-based-on-using-css-copy-restrictions/
- Published: 2022-03-19T06:00:00+08:00
- Author: 白宦成

文章目录

 [Toggle](https://www.ixiqin.com/2022/03/19/stylish-clever-crack-based-on-using-css-copy-restrictions/#)

 * [为什么 CSS 能禁止复制?](https://www.ixiqin.com/2022/03/19/stylish-clever-crack-based-on-using-css-copy-restrictions/#%e4%b8%ba%e4%bb%80%e4%b9%88_css_%e8%83%bd%e7%a6%81%e6%ad%a2%e5%a4%8d%e5%88%b6)
 * [使用 Stylish 来破解 CSS 的限制](https://www.ixiqin.com/2022/03/19/stylish-clever-crack-based-on-using-css-copy-restrictions/#%e4%bd%bf%e7%94%a8_stylish_%e6%9d%a5%e7%a0%b4%e8%a7%a3_css_%e7%9a%84%e9%99%90%e5%88%b6)
    - [1. 安装 Stylish](https://www.ixiqin.com/2022/03/19/stylish-clever-crack-based-on-using-css-copy-restrictions/#1_%e5%ae%89%e8%a3%85_stylish)
    - [2. 找到不能复制的文字对应的样式类](https://www.ixiqin.com/2022/03/19/stylish-clever-crack-based-on-using-css-copy-restrictions/#2_%e6%89%be%e5%88%b0%e4%b8%8d%e8%83%bd%e5%a4%8d%e5%88%b6%e7%9a%84%e6%96%87%e5%ad%97%e5%af%b9%e5%ba%94%e7%9a%84%e6%a0%b7%e5%bc%8f%e7%b1%bb)
    - [3. 在 Stylish 中新建一个样式文件，并在其中添加对应样式类的代码](https://www.ixiqin.com/2022/03/19/stylish-clever-crack-based-on-using-css-copy-restrictions/#3_%e5%9c%a8_stylish_%e4%b8%ad%e6%96%b0%e5%bb%ba%e4%b8%80%e4%b8%aa%e6%a0%b7%e5%bc%8f%e6%96%87%e4%bb%b6%ef%bc%8c%e5%b9%b6%e5%9c%a8%e5%85%b6%e4%b8%ad%e6%b7%bb%e5%8a%a0%e5%af%b9%e5%ba%94%e6%a0%b7%e5%bc%8f%e7%b1%bb%e7%9a%84%e4%bb%a3%e7%a0%81)
    - [4.设置生效网站](https://www.ixiqin.com/2022/03/19/stylish-clever-crack-based-on-using-css-copy-restrictions/#4%e8%ae%be%e7%bd%ae%e7%94%9f%e6%95%88%e7%bd%91%e7%ab%99)
 * [总结](https://www.ixiqin.com/2022/03/19/stylish-clever-crack-based-on-using-css-copy-restrictions/#%e6%80%bb%e7%bb%93)

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

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

## 为什么 CSS 能禁止复制?

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

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

这个属性的值有以下五种，其中 `none` 是用于防止复制的，设定为 None 后，即使你的内容
是文本内容，也无法被选中，就无法直接使用 Ctrl + C 来完成复制了。而 `text` 则是可以
选择文本，其他的几个属性，你可以在 MDN 的[语法说明](https://developer.mozilla.org/zh-CN/docs/Web/CSS/user-select#%E8%AF%AD%E6%B3%95)
中找到。

    ```shcb-line-numbers
    user-select: none;
    user-select: auto;
    user-select: text;
    user-select: contain;
    user-select: all;
    Code language: HTTP (http)
    ```

## 使用 Stylish 来破解 CSS 的限制

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

### 1. 安装 Stylish

前往[ Google Chrome Extension Store](https://chrome.google.com/webstore/detail/fjnbnpbmkenffdnngjfgmeleoegfcffe)
安装 Stylish

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

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

![](https://files.ixiqin.com/2022/03/23082711/d2b5ca33bd970f64a6301fa75ae2eb22-8.
png)

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

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

![](https://files.ixiqin.com/2022/03/23082711/d2b5ca33bd970f64a6301fa75ae2eb22-9.
png)

### 4.设置生效网站

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

![](https://files.ixiqin.com/2022/03/23082711/d2b5ca33bd970f64a6301fa75ae2eb22-10.
png)

## 总结

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