前端：页面安全问题，从前端角度使用js禁止用户修改页面代码

毓鸣

所周知，审查元素（F12或者右键检查）的情况下，大家都可以随机更改一部分页面的代码，注入恶意JS等等，这种情况避免也不难，虽然还能看到一部分H5源码，但是无法修改；所以我们可以通过一下三种方式解决问题：

1、屏蔽F12 审查元素；
2、屏蔽右键菜单来初步解决这些问题（也就是解决发现问题的人[偷笑]）；
3、在页面引用公共脚本使其自动进行JS调试（debug）。

一、屏蔽F12 审查元素

1. //一、屏蔽F12 审查元素
2. document.onkeydown = function () {
3.     if (window.event && window.event.keyCode == 123) {
4.         alert("F12被禁用");
5.         event.keyCode = 0;
6.         event.returnValue = false;
7.     }
8.     if (window.event && window.event.keyCode == 13) {
9.         window.event.keyCode = 505;
10.     }
11.     if (window.event && window.event.keyCode == 8) {
12.         alert(str + "\n请使用Del键进行字符的删除操作！");
13.         window.event.returnValue = false;
14.     }
15. }

复制代码

二、屏蔽右键菜单

1. document.oncontextmenu = function (event) {
2.     if (window.event) {
3.         event = window.event;
4.     } try {
5.         var the = event.srcElement;
6.         if (!((the.tagName == "INPUT" && the.type.toLowerCase() == "text") || the.tagName == "TEXTAREA")) {
7.             return false;
8.         }
9.         return true;
10.     } catch (e) {
11.         return false;
12.     }
13. }

复制代码

三、F12自动进行JS调试

1. ((function () {
2.     var callbacks = [],
3.         timeLimit = 50,
4.         open = false;
5.     var str = /x/
6.     str.toString = function () {
7.         window.clearInterval = function () {
8.             return '不能使用清除定时器了'
9.         }
10.         alert('控制台打开')
11.     }
12.     setInterval(loop, 1);
13.     return {
14.         addListener: function (fn) {
15.             callbacks.push(fn);
16.         },
17.         cancleListenr: function (fn) {
18.             callbacks = callbacks.filter(function (v) {
19.                 return v !== fn;
20.             });
21.         },
22.     };
23.     function loop() {
24.         var startTime = new Date();
25.         debugger;
26.         if (new Date() - startTime > timeLimit) {
27.             if (!open) {
28.                 callbacks.forEach(function (fn) {
29.                     fn.call(null);
30.                 });
31.             }
32.             open = true;
33.             window.stop();
34.             console.log(str)
35.             alert('不要扒我了');
36.             window.location.reload();
37.         } else {
38.             open = false;
39.         }
40.     }
41. })()).addListener(function () {
42.     window.location.reload();
43. });

复制代码

其他屏蔽项

1. //一、屏蔽粘贴
2.     document.onpaste = function (event) {
3.         if (window.event) {
4.             event = window.event;
5.         } try {
6.             var the = event.srcElement;
7.             if (!((the.tagName == "INPUT" && the.type.toLowerCase() == "text") || the.tagName == "TEXTAREA")) {
8.                 return false;
9.             }
10.             return true;
11.         } catch (e) {
12.             return false;
13.         }
14.     }
16.     //二、屏蔽复制
17.     document.oncopy = function (event) {
18.         if (window.event) {
19.             event = window.event;
20.         } try {
21.             var the = event.srcElement;
22.             if (!((the.tagName == "INPUT" && the.type.toLowerCase() == "text") || the.tagName == "TEXTAREA")) {
23.                 return false;
24.             }
25.             return true;
26.         } catch (e) {
27.             return false;
28.         }
29.     }
31.     //三、屏蔽剪切
32.     document.oncut = function (event) {
33.         if (window.event) {
34.             event = window.event;
35.         } try {
36.             var the = event.srcElement;
37.             if (!((the.tagName == "INPUT" && the.type.toLowerCase() == "text") || the.tagName == "TEXTAREA")) {
38.                 return false;
39.             }
40.             return true;
41.         } catch (e) {
42.             return false;
43.         }
44.     }
45.    
46.     //四、屏蔽选中
47.     document.onselectstart = function (event) {
48.         if (window.event) {
49.             event = window.event;
50.         } try {
51.             var the = event.srcElement;
52.             if (!((the.tagName == "INPUT" && the.type.toLowerCase() == "text") || the.tagName == "TEXTAREA")) {
53.                 return false;
54.             }
55.             return true;
56.         } catch (e) {
57.             return false;
58.         }
59.     }

复制代码

来源:https://www.cnblogs.com/lucasDC/p/17233431.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！