前言
最近查资料的时候,经常遇到CSDN上的文章,必须登录才能复制代码。对这个功能的好坏与否,我们不做评论,只关注一下它本身的技术。
当我写下上面的标题的时候,我一度以为CSDN是用了什么高大上的技术实现“不登录,就无法复制代码”这个功能的。毕竟,CSDN的主要用户都是程序猿啊~但最后的结果让我始料未及……
因为作者开发Coderbbb的时候,最大的一个困扰就是如何避免自己写的文章被各种采集站疯狂采集。采集也就算了,排版排的一塌糊涂,让读者十分糟心。所以作者自己特别关注反爬虫、防恶意复制等等相关的技术。(coderbbb的老用户可能知道,本站之所以有了付费文章这个功能,80%的原因是为了防爬虫,毕竟一篇文章几毛钱,可能还不够作者写文章的电费呢…………)
分析代码
先看下图,是CSDN上一个典型的必须登录才能复制代码的网页:
当我用F12打开调试工具,看代码的时候,内心直接就崩溃了……因为没有什么高大上的技术,就是用css加了一个user-select:none
,反选掉这个CSS,就可以正常复制了……
感觉这个技术就是在故意制造麻烦,要么你登录,要么你还得自己打开调试工具去改CSS~~~好吧,只能说产品设计很成功,技术实现很失败。
Coderbbb是如何实现类似功能的
看过本站付费文章的同学应该知道,coderbbb付费文章中的代码片段全部都是图片。和CSDN这种在前端做反爬虫、反复制不同,coderbbb是在服务端实现的代码文字等信息转图片的。这样的话,基本就不存在破解的可能了。