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

  • 前端:页面安全问题,从前端角度使用js禁止用户修改页面代码已关闭评论
  • 134 次浏览
  • A+
所属分类:Web前端
摘要

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

所周知,审查元素(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;         }     }