美文网首页程序员前端笔记让前端飞
网页如何禁止鼠标右键和F12,键盘另存为、粘贴、复制事件

网页如何禁止鼠标右键和F12,键盘另存为、粘贴、复制事件

作者: 菜菜___ | 来源:发表于2018-10-10 17:35 被阅读59次

    最近做的商用后台项目涉及到前端加密技术,为了保证前端页面展示的数据不被窃取,所以在js上做了一些处理,这些处理并不能完全杜绝有心之人窃取数据,只是加大他们操作的难度而已。

    1.禁止浏览器右键事件。使用浏览器右键可以将网页保存下来,或者审查网页源代码,这是我们想避免的(当然,仍然可以通过浏览器右上角的工具栏打开开发者工具,这里可以判断下鼠标的光标位置,如果光标移动到导航栏及页面body之外的地方,我们可以选择把页面展示的元素清空,这样在控制台看见的源代码也没有展示出来的数据了)。


    js实现:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>禁止鼠标右键事件</title>
    </head>
    <body>
    <p>这里是一些内容,展示禁止鼠标右键事件
    </p>
    </body>
    <script>
        document.oncontextmenu = function(){
            return false;
        }
    </script>
    </html>
    

    jquery实现:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>禁止鼠标右键事件</title>
    </head>
    <body>
    <p>这里是一些内容,展示禁止鼠标右键事件
    </p>
    </body>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script>
        $(function(){
            $(document).contextmenu(function() {
                return false
            })
        });
    </script>
    </html>
    
    

    2.禁止F12事件,键盘的选择粘贴复制事件

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>禁止键盘粘贴复制</title>
    </head>
    <body>
    <p>这里是一些内容
    </p>
    </body>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script>
        function forbidKeyboard() {
            $(document).keydown(function(e) {
                /*9:Tab键, 17:Control键, 18:Alt键, 123:F12键, 83:S键*/
                var keyboardCode = [9, 17, 18, 123];
                for (i in keyboardCode) {
                    if (keyboardCode[i] == e.keyCode) {
                        return false;
                    }
                }
                if ((e.keyCode == 83) && (e.ctrlKey || e.metaKey)) {
                    return false;
                }
            });
            /*禁止文本选择功能*/
            $(document).bind("selectstart",function(){return false;});
        }
        $(function(){
            forbidKeyboard();
        });
    </script>
    </html>
    

    原文作者技术博客:https://www.jianshu.com/u/ac4daaeecdfe
    95后前端妹子一枚,爱阅读,爱交友,将工作中遇到的问题记录在这里,希望给每一个看到的你能带来一点帮助。
    欢迎留言交流。

    相关文章

      网友评论

        本文标题:网页如何禁止鼠标右键和F12,键盘另存为、粘贴、复制事件

        本文链接:https://www.haomeiwen.com/subject/lqtmaftx.html