问题背景:
疫情期间,居家办公人员大幅度增长。为应对居家办公需求,需要设计开发一个前端网站给居家员工使用,界面信息比较敏感为防止客户拍照使用了加水印的功能。为防止工作人员大量复制敏感信息,界面需禁止任何形式的拷贝。
刚开始我禁用了前端的复制功能。通过设置οncοpy="return false"实现,
为了禁用更彻底,我同时禁用了鼠标右键οncοntextmenu="return false"
但是问题来了,测试突然发现除了正常形式的Ctrl+C,还存在一种其他形式的复制,以上设置对这种复制方式无效
大面积选中页面内容后,按下鼠标左键将内容拖动到文本框,仍可以将选中内容通过拖放的形式复制到文本框
在这里,我设置了onselectstart="return false",设置后界面大部分都无法选中了。但是坑爹的问题来了,这个设置在谷歌中对输入框无效(input,textArea等)。
没办法,我只好设置以上属性后,单独针对页面的所有input,textArea设置onselect方法,在这个方法内设置选中区域起始位置
假设节点对象为node
node.οnselect=funciton(){this.selectionStart=0;this.selectionEnd=0;}
以上代码可以实现内容无法选中的效果,但是这段代码只对可编辑的文本生效,只读和disabled的文本仍然可以选中,目前没有找到方法使只读的输入框也可以禁用选中
后来查看节点方法,发现还有个ondrag方法,从字面意思就有拖拽含义。设置了下
οndragstart="return false" οndrοp="return false"
做完这两个设置,拖放复制被成功禁用,直接在最外层设置就好了,对整个 界面所有组件都生效,也不用单独再对输入框做设置了
Ctrl+C和拖放复制被禁用后,测试突然发现,Ctrl+P(打印)也可以实现复制。由于这个页面是嵌入在一个平台下面的,无法禁用平台的打印功能,这儿增加了一段js设置可以把打印的内容隐藏。
<style>
@media print{
body{display:none}
}
</style>