vue 禁止拖拽选中文字、禁止复制、禁止右键菜单

创作中心

已于 2023-07-05 09:22:37 修改

阅读量2.9k

点赞数 3

文章标签： javascript 前端 vue.js

于 2023-04-29 04:39:52 首次发布

本文链接：https://blog.csdn.net/weixin_41706307/article/details/130380446

版权

vue管理后台常见防泄密设置

开发后台管理系统供内部人员使用时，一般是需要做一些页面方面的禁用设置。常见的禁止右键菜单，禁止复制，禁止拖拽选中文字以及禁止F12打开控制台等。

onselectstart

禁止选择网页中的文字
触发时间为目标对象被开始选中时（即选中动作刚开始，尚未实质性被选中）
基本上都能支持，但不被 input 和 textarea 标签支持
注意：如果想在火狐中禁用的话可以使用样式控制 div { -moz-user-select: none; }

<!-- vue.app -->
<div id="app" onselectstart="return false">
</div>

<!-- 二级菜单收起hover展示，则需要在body标签中添加 -->  
<body onselectstart="return false">
  <div id="app"></div>
  <!-- built files will be auto injected -->
</body>

oncopy

按下 CTRL + C
在你的浏览器的 Edit(编辑) 菜单中选择 “Copy（复制）”
右键鼠标按钮，在上下文菜单中选择 “Copy（复制）” 命令

   <div id="app" oncopy="return false">
   </div>

oncontextmenu

禁止右键菜单

   <div id="app" oncontextmenu="return false">
   </div>

onkeydown

通过按键事件阻止F12（ctrl+shift+i/shift+f10）事件

disableInfo() {
    document.onkeydown = function () {
        var e = window.event || arguments[0]
        //屏蔽F12
        if (e.keyCode == 123) {
            return false
            //屏蔽Ctrl+Shift+I
        } else if (e.ctrlKey && e.shiftKey && e.keyCode == 73) {
            return false
            //屏蔽Shift+F10
        } else if (e.shiftKey && e.keyCode == 121) {
            return false
        }
    }
    //屏蔽右键单击
    document.oncontextmenu = function () {
        return false
    }
}

onresize

判断页面高度（也可以同时判断页面宽度）判断打开开发者工具后跳转到空白页面

if ((window.outerHeight-window.innerHeight)>200) {
    alert("请关闭开发者工具");
    window.location="about:blank";
}
window.onresize = function () {
    if ((window.outerHeight-window.innerHeight)>200) {
        alert("请关闭开发者工具");
        window.location="about:blank";
    }
};

debugger

打开开发者工具后用debugger卡死调试工具

setInterval(function () {
    check()
}, 1000);
var check = function () {
    function doCheck(a) {
        if (("" + a / a)["length"] !== 1 || a % 20 === 0) {
            (function () { }
                ["constructor"]("debugger")())
        } else {
            (function () { }
                ["constructor"]("debugger")())
        }
        doCheck(++a)
    }
    try {
        doCheck(0)
    } catch (err) { }
};
check();