在我们开发系统的时候,可能会接到这样的需求:不要让用户复制页面上的文字或者图片,不要让用户调试我们的页面,更甚至也不要让用户进行打印操作等等。
听起来是不是让人很头大,这咋实现啊?这有必要吗?这能禁住么?
如果你没做过这些,或者没接到过这样的需求,那你也应该看到过某个网站做了一些这样的措施。
既然要做,我们就得想方案,先来看看禁止复制都有哪些方法。
禁止复制
假设我们有这样一段代码:
<div style="padding-left: 56px;">
<textarea rows="5" cols="33"></textarea>
</div>
<pre>
海客谈瀛洲,烟涛微茫信难求,
越人语天姥,云霞明灭或可睹。
天姥连天向天横,势拔五岳掩赤城。
天台四万八千丈,对此欲倒东南倾。
我欲因之梦吴越,一夜飞度镜湖月。
湖月照我影,送我至剡溪。
</pre>
接下来就通过这个例子来论述我们的方案:
- 通过user-select:none
这是一个css属性,标识了元素及其子元素的文本不可被选中,因此设定之后,文本将不能够被选中,因此也就不能复制:
<pre style="user-select: none;">
海客谈瀛洲,烟涛微茫信难求,
越人语天姥,云霞明灭或可睹。
天姥连天向天横,势拔五岳掩赤城。
天台四万八千丈,对此欲倒东南倾。
我欲因之梦吴越,一夜飞度镜湖月。
湖月照我影,送我至剡溪。
</pre>
我们在这段文本上,加上这个样式。
可以看到,文字压根就不能选择,从鼠标形状也能看出来。
- 通过拦截copy操作
由于用在进行复制操作的时候,会触发copy事件,我们可以通过监听它来做一些处理,使得复制的行为发生改变:
<div>
<div style="padding-left: 56px;">
<textarea rows="5" cols="33"></textarea>
</div>
<pre id="content">
海客谈瀛洲,烟涛微茫信难求,
越人语天姥,云霞明灭或可睹。
天姥连天向天横,势拔五岳掩赤城。
天台四万八千丈,对此欲倒东南倾。
我欲因之梦吴越,一夜飞度镜湖月。
湖月照我影,送我至剡溪。
</pre>
</div>
<script>
let c = document.getElementById('content')
c.removeEventListener("copy", copyFilter)
c.addEventListener("copy", copyFilter)
function copyFilter(e) {
let cp = e.clipboardData || window.clipboardData
if(!cp) {
return
}
let text = window.getSelection().toString()
if(text) {
e.preventDefault()
cp.setData("text/plain", "你复制了一段魔法")
}
}
</script>
先获取到我们要禁止复制的元素,然后给它添加一个copy的事件监听,在添加监听之前,要先移除一下,这样是为了避免局部刷新的时候重复添加,然后我们通过copyFilter函数来对这次操作进行处理。
先获取剪贴板对象,如果当前事件对象里不存在,那就从window里面取,然后我们通过getSelection再拿到选取的内容,因为我们对剪贴板对象进行修改,所以要阻止默认行为,然后把剪贴板的内容重新赋值,可以是示例中那样的一段文字,也可以设置为空,甚至是任意其他内容,然后我们就可以看到产生的效果了:
虽然能复制文本,但是由于我们拦截了复制操作,更改了它的行为,因此再粘贴的时候就变成了我们更改的样子,也做到了禁止复制的功能。
这种方式对于使用快捷键或者右键的方式都是有效的。
- 通过拦截cut操作
这种情况主要是在可编辑区域,比如文本框、文本域、设置为contenteditable的元素等,用户可以对文字进行剪切操作,虽然上面禁止了复制,但是剪切是另一个操作,不拦截的话还是相当于能复制出来。
copy和cut只是触发的事件不同而已,但是它们都是执行相同的逻辑处理:
<div>
<div style="padding-left: 56px;">
<textarea rows="5" cols="33"></textarea>
</div>
<pre id="content" contenteditable>
海客谈瀛洲,烟涛微茫信难求,
越人语天姥,云霞明灭或可睹。
天姥连天向天横,势拔五岳掩赤城。
天台四万八千丈,对此欲倒东南倾。
我欲因之梦吴越,一夜飞度镜湖月。
湖月照我影,送我至剡溪。
</pre>
</div>
<script>
let c = document.getElementById('content')
c.removeEventListener("cut", copyFilter)
c.addEventListener("cut", copyFilter)
function copyFilter(e) {
let cp = e.clipboardData || window.clipboardData
if(!cp) {
return
}
let text = window.getSelection().toString()
if(text) {
e.preventDefault()
cp.setData("text/plain", "你复制了一段魔法")
}
}
</script>
这里我为了方便,给元素添加了contenteditable属性,让它变成可编辑的,copyFilter函数没有变化,我们只是添加了一个剪切事件的监听,然后它们的处理函数都是copyFilter。看下效果:
可以看到,首先我们对文字进行剪切,没有出现预期的效果,这时因为我们在代码里面对剪切进行了拦截,并阻止了它的默认行为,然后我们在粘贴的时候,文字也改变成我们设置的了。
- 通过媒体查询控制打印
虽然我们可以通过上面的几种方法禁止在页面上复制,但是用户也可能开启打印预览模式,在这种情况下,也是可以进行复制的,我们要想对打印页面进行一些控制,那么就要用到媒体查询,先看下打印的样子:
虽然我们做了限制,但是在打印页面没有生效,现在我们针对这个场景更改一下代码:
@media print {
html {
display: none;
}
}
通过添加上面这个样式规则,我们能够使页面在打印的时候,内容隐藏起来,这样就无法进行复制了:
能够看到,点击打印的时候,预览页面一片空白,,这样就禁止了在打印页面进行复制的操作。当然了,你其实也可以设置其他的样式属性来做些控制,但要记住写在打印的媒体查询里面,只有这样才会在打印页面生效。
- 通过伪元素覆盖内容
还有一种方式就是,通过设定一个伪元素,让它全面覆盖文本内容,这样鼠标就不能选到实际的文本,改造一下代码:
.content {
position: relative;
}
.content::before {
content: '';
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
}
<pre id="content" class="content">
海客谈瀛洲,烟涛微茫信难求,
越人语天姥,云霞明灭或可睹。
天姥连天向天横,势拔五岳掩赤城。
天台四万八千丈,对此欲倒东南倾。
我欲因之梦吴越,一夜飞度镜湖月。
湖月照我影,送我至剡溪。
</pre>
现在就不能在元素上面选中文字了,不过用户也可能还有一些操作,比如在内容区域外面ctrl+a全选,或者在外面拖动鼠标来全选,如果是这种情形,那么我们可以通过监听键盘和鼠标事件来禁止全选等操作。
- 通过监听鼠标和键盘事件
由于用户有很多种操作的方式,键盘全选、鼠标全选、键盘右键、鼠标右键等等,我们如果穷举的话,情况太多了,因此我们只监听鼠标按下和抬起事件,以及键盘的按下事件:
document.removeEventListener("mousedown", haveSelect)
document.addEventListener("mousedown", haveSelect)
document.removeEventListener("mouseup", haveSelect)
document.addEventListener("mouseup", haveSelect)
document.removeEventListener("keydown", haveSelect)
document.addEventListener("keydown", haveSelect)
function haveSelect() {
window.getSelection().removeAllRanges()
}
主要就是在removeAllRanges方法上面,能够在触发上面事件的时候,将所选区域清空,也就是不管你选没选,咋选的,反正就是你只要进行了操作,那我就那可能选择的区域给你清空,这样你就啥也干不了了。
好,这样就可以啦,无论怎么选,即使出现了选区,但是只要你再按了鼠标或者键盘,那么选区就会直接消失,就能达到不能复制的效果,因为你发现啥都做不了。
这里额外说明一下,对于事件的监听,一定要用addEventListener来实现,因为它会将多个绑定的事件都添加上去,当触发的时候就会按照绑定的顺序进行执行,如果是用赋值的方式,那么后面的会覆盖前面的,而且赋值的方式很容易被篡改,可以很轻松的让你的绑定函数不能执行从而失效,而使用addEventListener就不会被人为覆盖,只能通过绑定的函数句柄来手动移除,也就是说要移除的时候,必须使用跟绑定时使用同一个函数才行。
通过CSS的方式禁止复制,可以很容易的被用户解除,只能是设置的稍微复杂一点,增加难度。而通过JS的方式禁止复制,也可以通过禁用页面JavaScript代码来解除,因此我们可以将内容通过js来渲染,这样如果页面禁用了js,那么内容也不会渲染。
禁止调试
对于禁止调试,主要是指用户打开控制台,控制台也就是开发者工具,我为了方便称之为控制台,想要对页面进行调试时,我们做一些处理,阻止这种行为,最大可能的拦截通过控制台对系统的调试。
主要的方法有几种,由于打开控制台是浏览器提供的调试功能,因此我们没法拦截打开操作,即使通过事件监听不允许快捷键这样做,但是也可以通过其他方式进行打开,因此我们的主要关注点就在于打开控制台之后,我们能做哪些事情来限制用户行为。
- 禁用快捷键
打开控制台的快捷键主要有F12和ctrl+shift+i,我们先把这俩给禁用了:
document.removeEventListener("keydown", disableDevShortcut)
document.addEventListener("keydown", disableDevShortcut)
function disableDevShortcut(e) {
console.log(e)
if(e.keyCode === 123) {
e.preventDefault()
}else if(e.keyCode === 73 && e.ctrlKey && e.shiftKey) {
e.preventDefault()
}
}
这样在使用这两个快捷键的时候,页面没有任何反应,控制台也不会唤起,因为我们阻止了它们的默认行为。
- 禁用右键的检查功能
除了通过快捷键,还可以使用右键的方式,并点击检查也会调出控制台。
这种情景,我们可以通过禁止在页面上使用右键的方式,来阻止打开控制台:
document.removeEventListener("contextmenu", cancelContextmenu)
document.addEventListener("contextmenu", cancelContextmenu)
function cancelContextmenu(e) {
e.preventDefault()
}
现在就不能通过右键打开控制台了,但是相应的整个右键功能也都不能使用了。
- 设置无限断点
如果用户最终打开了控制台,比如通过在浏览器的更多功能中来打开的话,那么我就需要采取其他的措施,其中之一就是给代码设置无限断点,因为断点只在控制台打开的时候才会发生作用,从而不必担心非调试模式下的程序正常运行。
无限断点的主要思路就是利用定时器等手段,频繁的触发断点效果,使得不能轻松的调试程序,先看下代码:
;(() => {
function breakDebugger() {
if(new checkDebugger().check) {
breakDebugger()
}
}
function checkDebugger() {
const now = new Date();
eval('(function () {debugger;false;})()')
const dur = Date.now() - now
if(dur < 5) {
return {check: false}
}else {
return {check: true}
}
}
setInterval(() => {
eval('(function () {debugger;true;})()')
breakDebugger()
}, 500)
})()
我们利用一个立即执行的自执行函数,来使我们的代码被封装在一个固定块内,不与其他部分有任何影响。
这里主要做了两步:
第一步设置一个重复执行的定时器,其中包括了一个断点和一个函数调用。
第二步通过函数来递归调用断点,主要使用了实例化对象的方式和时间差的判断。
这样做的主要作用就是在设置无限断点的同时,也能够让每次的断点都是被重新生成的,看下效果,一目了然:
发现没有,我们通过这种方式,只要打开了控制台,那么就会进入到无限断点的循环中,使得不能做任何其他事情,而且每个断点的生成都会开辟一个新的虚拟运行环境,这种情况下,只有关闭控制台,才能结束断点。
即使使用右键选择Never parse here,也毫无作用,虽然可以通过Deactive breakpoints按钮来彻底禁用断点,就是下面这个按钮:
但是,如果这样做的话,那么用户也就同时失去了调试其他代码的能力。
况且,我们接下来还会介绍其他的控制手段,可以配合着使用。
- 监测控制台开启
我们如果能有一种手段,可以知道用户开启了控制台,换句话说只要控制台被打开,就通知我们或者被我们监测到,那么我们就可以执行一些控制手段,这种效果肯定是很理想的,遗憾的是还没有这种api暴露给我们去让我们能够这样做。
不过我们可以通过其他的方式,利用既有的一些能力来实现这一点,这里我还是使用循环定时器,来不断的去嗅探用户是否开启了控制台,直接看代码:
;(() => {
setInterval(function() {
let foo = document.createElement('a')
let a1 = +new Date()
console.table(foo)
let a2 = +new Date()
if(a2 - a1 > 1) {
location.href = 'about:blank'
}
console.clear()
}, 500)
})()
同样,通过一个自执行函数,我们开启了一个循环定时器,然后在回调方法里面,我们就去实现上面的目标,也是分为了两步:
第一步创建一个a元素,然后通过表格的形式将它打印出来,并记录下消耗的时间。
第二步判断耗时的长短来控制是否跳转到空白页,然后清空控制台。
这种方式主要是利用了console.table的特性,它会将元素以表格的形式输出到控制台,大概就像下面的样子:
由于太多了,我就没有全部截下来,如果没有打开控制台的话,使用console.table输出我们创建的a标签是很快的,有多快呢,就是js执行一条语句的速度,所以打印a1和a2的时间间隔非常短,几乎为0,因为他们快到差不多是同时执行的,给大家打印看一下:
我们先不打开控制台,等输出完毕再打开,很清楚的发现,我们没打开控制台的时候,输出的a就是它标签,而且时间间隔是0毫秒。
现在我们打开控制台的时候刷新一下页面,看看控制台的输出:
这次就变成了以table的形式输出a元素,而且它的耗时明显增多,不再是0毫秒,而是耗费了10毫秒,虽然打开控制台的时候多次刷新页面,每次输出的毫秒数是不同的,但是跟关闭控制台的时候输出的耗时差距非常明显,因此我们就可以在这个上面做文章。
我在上面的代码中假定了,只要是大于1毫秒的耗时,那就表示用户打开了控制台,然后我们就把页面给跳转到空白页,当然了你也可以做一些任何你想做的操作,比如弹出一个提示,或者把body内容置空等等等等。
回到我们上面的代码,看一下它实际发生的作用和带给我们的效果:
哈哈,古德古德,平时浏览一切正常,只要刚一打开控制台,瞬间页面就被跳转走了,什么都干不了。这样我们就通过这种方式,达到了限制打开控制台的目的,也就是在当前页没法调试,一打开就跳转。
这种办法由于是绕路实现的,那么你可能会有疑问,它稳定吗?会不会误判,我可以对它绝对放心吗?
理论上来说,通过输出的执行时间是不太能精确掌握的,但是我们可以再做一些其他的措施来逼近真相:
;(() => {
setInterval(function() {
let foo = document.createElement('a')
let a1 = +new Date()
console.table(foo)
let a2 = +new Date()
if(a2 - a1 > 1) {
let time = 0
for(let i = 0; i < 10; i++) {
let a1 = +new Date()
console.table(foo)
let a2 = +new Date()
time += a2 - a1
}
if(time > 20) {
location.href = 'about:blank'
}
}
console.clear()
}, 500)
})()
我又改造了一下判断的逻辑,当发现输出耗时为2毫秒甚至更多的时候,我立马再进行一次真伪判断,也就是说,万一由于其他的影响,导致我第7行的代码误判了,那么我再同步执行一个循环,连续输出10次,把他们的耗时总和计算出来,然后判断是否大于20毫秒,如果还是耗时过高的话,那么就可以非常肯定的知道用户是打开了控制台,这个时候就可以放心的做一些处理了。
最后
其实限制用户行为的方法有很多很多,上面列出了一些主要的,多种方法还是要结合着使用。你也可以自由发挥,多使用一些其他的手段,也会增加用户复制或者调试的难度,比如防止用户重写console的方法,或者清除所有定时器等。
甚至也可以将你的内容绘制到canvas上面来防止复制,多加一些js的处理工作,防止禁用js的时候,我们的代码不生效,只有在js可用的时候再去渲染内容等。也可以在综合考虑的情况下加上代码混淆、代码加密等措施。
话说回来,大家都是同路人,何必相互为难,哈哈哈,不过提这个需求的人也着实会为难我们,既然提了那就尽力去做,能做到什么程度,只能说是尽量做到极致。
希望上面的内容能够帮助到你,也希望能够对你有所启发。