js方法禁止查看源文件、防止复制、禁止F12、禁止右键、禁止选中、禁止另存、禁止缓存

本文链接：https://blog.youkuaiyun.com/chaoPerson/article/details/133026681

本文介绍了如何通过JavaScript代码在前端开发中屏蔽F12审查元素、鼠标右键功能以及复制、粘贴、剪切等操作，同时检测开发者工具的使用并拒绝另存和禁止页面缓存，提升代码安全性和用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在前端开发中，F12审查元素的情况下，大家都可以随机更改一部分页面的代码，注入恶意JS等等，这种情况避免也不难，虽然还能看到一部分H5源码，但是无法修改。

1.屏蔽F12审查元素


<script>
    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;
        }
    }
</script>

2.禁用鼠标右键

<script>
    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;
        }
    }
</script>

有同学反映：火狐浏览器中按钮给了disabled，禁止右键就失效了？这个怎么修复呢？

给按钮增加样式 pointer-events: none;属性即可修复

button[disabled] {
  pointer-events: none;
}

3.屏蔽粘贴

<script>
    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;
        }
    }
</script>

4.屏蔽复制

<script>
    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;
        }
    }
</script>

5.屏蔽剪切


<script>
    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;
        }
    }
</script>

6.屏蔽选中


<script>
    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;
        }
    }
</script>

7.检测开发者工具

开发者工具可以帮助开发者快速调试代码，但也可以用于查看源代码。可以在页面上监听控制台输出事件，当有控制台事件输出时即说明开发者工具被打开，进而禁止访问页面。

下面是一个监听控制台事件输出的示例：

function detectDevTools() {
    let threshold = 160;
    let lastTime = new Date().getTime();
    setInterval(function() {
        let currentTime = new Date().getTime();
        if (currentTime - lastTime > threshold) {
            window.location.href = "https://code-nav.top";
        }
        lastTime = currentTime;
    }, threshold);
}

detectDevTools();

当监测到控制台输出事件时，会自动跳转到指定页面。

8.拒绝另存

<!--在<body></body>之间加入代码 -->

<noscript><iframe src="/*>";</iframe></noscript>

9.禁止缓存

在页面中使用如下HTML标记:

 
<HEAD>
    <META http-equiv=Pragma content=no-cache>
    <META http-equiv=Cache-Control content=no-cache>
    <META http-equiv=Expires content=0>
</HEAD>

欢迎在评论区交流。

如果文章对你有所帮助，❤️关注+点赞❤️鼓励一下！博主会持续更新。。。。

我的博客原文：前端js禁止鼠标右键及F12禁止查看源代码