谷歌浏览器禁用拷贝

问题背景:

疫情期间,居家办公人员大幅度增长。为应对居家办公需求,需要设计开发一个前端网站给居家员工使用,界面信息比较敏感为防止客户拍照使用了加水印的功能。为防止工作人员大量复制敏感信息,界面需禁止任何形式的拷贝。

刚开始我禁用了前端的复制功能。通过设置ο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>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值