前端：頁面安全問題，從前端角度使用js禁止用戶修改頁面代碼

所周知，審查元素（F12或者右鍵檢查）的情況下，大家都可以隨機更改一部分頁面的代碼，註入惡意JS等等，這種情況避免也不難，雖然還能看到一部分H5源碼，但是無法修改；所以我們可以通過一下三種方式解決問題：

1、屏蔽F12 審查元素；
2、屏蔽右鍵菜單來初步解決這些問題（也就是解決發現問題的人[偷笑]）；
3、在頁面引用公共腳本使其自動進行JS調試（debug）。

一、屏蔽F12 審查元素

//一、屏蔽F12 審查元素
document.onkeydown = function () {
    if (window.event && window.event.keyCode == 123) {
        alert("F12被禁用");
        event.keyCode = 0;
        event.returnValue = false;
    }
    if (window.event && window.event.keyCode == 13) {
        window.event.keyCode = 505;
    }
    if (window.event && window.event.keyCode == 8) {
        alert(str + "\n請使用Del鍵進行字元的刪除操作！");
        window.event.returnValue = false;
    }
}

二、屏蔽右鍵菜單

document.oncontextmenu = function (event) {
    if (window.event) {
        event = window.event;
    } try {
        var the = event.srcElement;
        if (!((the.tagName == "INPUT" && the.type.toLowerCase() == "text") || the.tagName == "TEXTAREA")) {
            return false;
        }
        return true;
    } catch (e) {
        return false;
    }
}

三、F12自動進行JS調試

((function () {
    var callbacks = [],
        timeLimit = 50,
        open = false;
    var str = /x/
    str.toString = function () {
        window.clearInterval = function () {
            return '不能使用清除定時器了'
        }
        alert('控制台打開')
    }
    setInterval(loop, 1);
    return {
        addListener: function (fn) {
            callbacks.push(fn);
        },
        cancleListenr: function (fn) {
            callbacks = callbacks.filter(function (v) {
                return v !== fn;
            });
        },
    };
    function loop() {
        var startTime = new Date();
        debugger;
        if (new Date() - startTime > timeLimit) {
            if (!open) {
                callbacks.forEach(function (fn) {
                    fn.call(null);
                });
            }
            open = true;
            window.stop();
            console.log(str)
            alert('不要扒我了');
            window.location.reload();
        } else {
            open = false;
        }
    }
})()).addListener(function () {
    window.location.reload();
});

其他屏蔽項

//一、屏蔽粘貼
    document.onpaste = function (event) {
        if (window.event) {
            event = window.event;
        } try {
            var the = event.srcElement;
            if (!((the.tagName == "INPUT" && the.type.toLowerCase() == "text") || the.tagName == "TEXTAREA")) {
                return false;
            }
            return true;
        } catch (e) {
            return false;
        }
    }

    //二、屏蔽複製
    document.oncopy = function (event) {
        if (window.event) {
            event = window.event;
        } try {
            var the = event.srcElement;
            if (!((the.tagName == "INPUT" && the.type.toLowerCase() == "text") || the.tagName == "TEXTAREA")) {
                return false;
            }
            return true;
        } catch (e) {
            return false;
        }
    }

    //三、屏蔽剪切
    document.oncut = function (event) {
        if (window.event) {
            event = window.event;
        } try {
            var the = event.srcElement;
            if (!((the.tagName == "INPUT" && the.type.toLowerCase() == "text") || the.tagName == "TEXTAREA")) {
                return false;
            }
            return true;
        } catch (e) {
            return false;
        }
    }
    
    //四、屏蔽選中
    document.onselectstart = function (event) {
        if (window.event) {
            event = window.event;
        } try {
            var the = event.srcElement;
            if (!((the.tagName == "INPUT" && the.type.toLowerCase() == "text") || the.tagName == "TEXTAREA")) {
                return false;
            }
            return true;
        } catch (e) {
            return false;
        }
    }

本文來自博客園，作者：TomLucas，轉載請註明原文鏈接：https://www.cnblogs.com/lucasDC/p/17233431.html