如何防止网页上的内容不被复制
坑军之王
155
前语：
我们在查资料的时候老是遇见此内容不能复制，需要充值会员/注册账号才能执行该操作的时候，肯定心里都能气炸了。在这里将对此内容的原理进行说明
实现原理
通过js修改document上的相关属性值来实现。首先分析下通过浏览器复制内容的关键点：
第一步就是要选中需要复制的内容，所以首先要禁止通过鼠标选中网页内容。
第二步就是开启复制内容，可以通过ctrl+c或者鼠标右键菜单，以及拖拽到新窗口获取。就需要禁止复制和网页右键菜单及页面的拖拽。
第三步需要屏蔽 属性，此属性可以实现网页的随意修改编辑。
核心代码
第一步检测上面所有的属性值是否都是false。
第二步如果发现任何值为true的时候，就把对应的属性值修改为false，这里下面给到的代码是只要发现有true的值，会把所有属性都修改一遍，执行效率会低点，但是影响不大，懒了大家可以自己优化下。
第三步就是要防止用户在控制台修改属性值来实现修改，因为需要一个定时器每100毫秒检测下属性状态，有问题就重置下属性值。
<!DOCTYPE html><html><head><title>禁止复制教程</title><noscript>Your browser does not support JavaScript!</noscript></head><body><p>禁止复制演示</p></body><script>function nocopy(){if(document.oncopy || document.oncontextmenu || document.onselectstart || document.ondragstart || document.body.contentEditable){document.body.contentEditable=false;document.oncopy = document.oncontextmenu = document.onselectstart = document.ondragstart =function(){return false;}; } }setInterval(() => { nocopy(); }, 100);</script></html>
第四步需要对代码混淆加密下，然后找个js脚本，把上方的加密的js添加上去，就可以加大破解的难度。到此可以恭喜你可以屏蔽大多数人了。
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?"":e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)d[e(c)]=k[c]||e(c);k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1;};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p;}('5 7(){a(0.3||0.4||0.2||0.6||0.8.1){0.8.1=9;0.3=0.4=0.2=0.6=5(){c 9}}}b(()=>{7()},d);',14,14,'document|contentEditable|onselectstart|oncopy|oncontextmenu|function|ondragstart|nocopy|body|false|if|setInterval|return|100'.split('|'),0,{}))
存在的缺陷
这个屏蔽网页内容的复制是基于js脚本实践的，但是如果用户通过浏览器禁止javascript的运行的时候，此方法就实效了。
所以，解决方法是在网页上加上js状态的检测，在网页上加一个简单的后台请求js，如果浏览器禁用js那么后端获取不到验证通讯，就停止内容的输出相应即可解决。
这样就更加的完善了，但是还是没有达到完美，如果用户通过F12或者打开调试窗口，那么就又沦陷了，不过别怕下期更新如何填补这个缺陷。