js实现禁止查看源代码,禁止右击、禁止F12、禁止开发者工具
文章 522 0 0 0
发布时间:2021年04月05日

概述

使用javascript屏蔽阻止用户通过鼠标右键点击,键盘f12,以及通过浏览器自带的开发者工具选项进行源代码的查看,给抄袭代码的小白增加难度,但是对于真正的大佬“不屑”通过以上方法查看源代码。

1.可以通过原生方法屏蔽右键点击和键盘F12
2.因为打开f12会让整个窗口发生变化经过窗口的变化来退出页面来阻止访问者查看
原生实现思路如上,但是我们现在使用别人封装好的插件

原生

//禁止鼠标右击
document.oncontextmenu = function() {
    event.returnValue = false;
};
//禁用开发者工具F12
document.onkeydown = document.onkeyup = document.onkeypress = function(event) {
    let e = event || window.event || arguments.callee.caller.arguments[0];
    if (e && e.keyCode == 123) {
        e.returnValue = false;
        return false;
    }
};
let userAgent = navigator.userAgent;
if (userAgent.indexOf("Firefox") > -1) {
    let checkStatus;
    let devtools = /./;
    devtools.toString = function() {
        checkStatus = "on";
    };
    setInterval(function() {
        checkStatus = "off";
        console.log(devtools);
        console.log(checkStatus);
        console.clear();
        if (checkStatus === "on") {
            let target = "";
            try {
                window.open("about:blank", (target = "_self"));
            } catch (err) {
                let a = document.createElement("button");
                a.onclick = function() {
                    window.open("about:blank", (target = "_self"));
                };
                a.click();
            }
        }
    }, 200);
} else {
    //禁用控制台
    let ConsoleManager = {
        onOpen: function() {
            alert("Console is opened");
        },
        onClose: function() {
            alert("Console is closed");
        },
        init: function() {
            let self = this;
            let x = document.createElement("div");
            let isOpening = false,
                isOpened = false;
            Object.defineProperty(x, "id", {
                get: function() {
                    if (!isOpening) {
                        self.onOpen();
                        isOpening = true;
                    }
                    isOpened = true;
                    return true;
                }
            });
            setInterval(function() {
                isOpened = false;
                console.info(x);
                console.clear();
                if (!isOpened && isOpening) {
                    self.onClose();
                    isOpening = false;
                }
            }, 200);
        }
    };
    ConsoleManager.onOpen = function() {
        //打开控制台,跳转
        let target = "";
        try {
            window.open("about:blank", (target = "_self"));
        } catch (err) {
            let a = document.createElement("button");
            a.onclick = function() {
                window.open("about:blank", (target = "_self"));
            };
            a.click();
        }
    };
    ConsoleManager.onClose = function() {
        alert("Console is closed!!!!!");
    };
    ConsoleManager.init();
}

来源:【blog.csdn.net/hanierming/article/details/109625183】

插件【Disable-devtool】

npm使用

//安装
npm i disable-devtool
//使用
import disableDevtool from'disable-devtool';
disableDevtool();

cdn使用

<!--Use a specific version-->
<script disable-devtool-auto src='https://cdn.jsdelivr.net/npm/disable-devtool@x.x.x/disable-devtool.min.js'></script>
<!--Use latest version-->
<script disable-devtool-auto src='https://cdn.jsdelivr.net/npm/disable-devtool@latest/disable-devtool.min.js'></script>

功能

disable-devtool可以禁用所有可以进入开发人员工具的方法,以防止通过开发人员工具进行“代码处理”

该库具有以下功能:

支持可配置是否禁用右键菜单
1.禁用F12和Ctrl + Shift + I快捷键
2.支持识别以从浏览器菜单栏中打开开发人员工具并关闭当前页面
3.开发人员可以绕过禁用(对URL参数使用tk和md5加密)
4.支持几乎所有浏览器(IE,360,qq浏览器,FireFox,Chrome,Edge等)
5.高度可配置
6.最少使用,体积小(仅7kb)
7.支持npm参考和脚本标签参考(属性配置)
8.识别真实的移动终端和浏览器开发人员工具设置的伪造的移动终端插件,节省了移动终端的性能

配置使用

import disableDevtool from'disable-devtool';
disableDevtool(options);
//options参数
declare interface optionStatic {
    md5?: string; // Bypass the disabled md5 value, see 3.2 for details, the bypass disable is not enabled by default
    url?: string; // Jump to the page when closing the page fails, the default value is localhost
    tkName?: string; // Bypass the url parameter name when disabled, the default is ddtk
    ondevtoolopen?(): void; // Callback for opening the developer panel, the url parameter is invalid when enabled
    interval?: number; // Timer interval is 200ms by default
    disableMenu?: boolean; // Whether to disable the right-click menu The default is true
    stopIntervalTime?: number; // Waiting time to cancel monitoring on mobile
}

md5和tk旁路禁用

库中key和md5的组合使开发人员可以绕过在线禁用功能。
过程如下:
首先指定密钥a(该值不应记录在代码中),使用md5加密获得值b,然后将b作为md5参数传递。开发人员在访问url时仅需带url参数ddtk = a。旁路功能已禁用。
disableDevtool对象公开了md5方法,开发人员在加密时可以使用该方法:

disableDevtool.md5('xxx');

脚本使用属性配置

<script
    disable-devtool-auto 
    src='https://cdn.jsdelivr.net/npm/disable-devtool/disable-devtool.min.js'
    md5='xxx'
    url='xxx'
    tk-name='xxx'
    interval='xxx'
    disable-menu='xxx'>
</script>

注意:
1.配置属性时必须带disable-devtool-auto属性
2.属性配置是可选的,字段与3.1中的相同,不同之处在于将驼峰形式更改为水平线分割。
3.脚本建议将标签放置在身体底部

脚本不使用属性配置

<script src='https://cdn.jsdelivr.net/npm/disable-devtool/disable-devtool.min.js'></script>
<script>
    DisableDevtool({
        // The parameters are the same as in 3.1
    })
</script>

来源:【theajack.gitee.io/disable-devtool】
以上就是禁止查看源代码的插件以及原理使用过程,防小白杠杠的。

评论专区