前端实用代码之多方式禁止修改页面代码

原创 代笔写书  2018-10-15 16:56:02  阅读 626 次 评论 0 条
优惠

众所周知,审查元素的情况下,大家都可以随机更改一部分页面的代码,注入恶意JS等等,想要避免这种情况也不难,虽然可能还能看到一部分H5源码,但是无法修改。下面洁灰博客园就给大家分享一下前端实用代码之如何利用多种方式禁止访问用户修改页面代码吧!

前端实用代码之多方式禁止修改页面代码 源码分享

一、屏蔽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;

}

}

三、屏蔽粘贴

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;

}

}

这种很适合小说网站,毕竟版权珍贵,被别人随意copy走内容就不好了

六、屏蔽选中

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;

}

}


web 页面如何阻止用户F12篡改页面元素和数据?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";

<html xmlns="http://www.w3.org/1999/xhtml";

<head;

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /;

<title;</title;

<style type="text/css";

/*禁止选中文字*/

body{

-moz-user-select: none; /*火狐*/

-webkit-user-select: none; /*webkit浏览器*/

-ms-user-select: none; /*IE10*/

-khtml-user-select: none; /*早期浏览器*/

user-select: none;

}

</style;

</head;

<body;

<p;Test</p;

<script type='text/javascript';

//这段js要放在页面最下方

var h = window.innerHeight,w=window.innerWidth;

//禁用右键 (防止右键查看源代码)

window.oncontextmenu=function(){return false;}

//在本网页的任何键盘敲击事件都是无效操作 (防止F12和shift+ctrl+i调起开发者工具)

window.onkeydown = window.onkeyup = window.onkeypress = function () {

window.event.returnValue = false;

return false;

}

//如果用户在工具栏调起开发者工具,那么判断浏览器的可视高度和可视宽度是否有改变,如有改变则关闭本页面

window.onresize = function () {

if (h != window.innerHeight||w!=window.innerWidth){

window.close();

window.location = "about:blank";

}

}

/*好吧,你的开发者工具是单独的窗口显示,不会改变原来网页的高度和宽度,

但是你只要修改页面元素我就重新加载一次数据,让你无法修改页面元素(不支持IE9以下浏览器)*/

if(window.addEventListener){

window.addEventListener("DOMCharacterDataModified", function(){window.location.reload();}, true);

window.addEventListener("DOMAttributeNameChanged", function(){window.location.reload();}, true);

window.addEventListener("DOMCharacterDataModified", function(){window.location.reload();}, true);

window.addEventListener("DOMElementNameChanged", function(){window.location.reload();}, true);

window.addEventListener("DOMNodeInserted", function(){window.location.reload();}, true);

window.addEventListener("DOMNodeInsertedIntoDocument", function(){window.location.reload();}, true);

window.addEventListener("DOMNodeRemoved", function(){window.location.reload();}, true);

window.addEventListener("DOMNodeRemovedFromDocument", function(){window.location.reload();}, true);

window.addEventListener("DOMSubtreeModified", function(){window.location.reload();}, true);

}

//压缩后的代码

//var h=window.innerHeight,w=window.innerWidth;window.oncontextmenu=function(){return!1},window.onkeydown=window.onkeyup=window.onkeypress=function(){return window.event.returnValue=!1,!1},window.onresize=function(){(h!=window.innerHeight||w!=window.innerWidth)&&(window.close(),window.location="about:blank")},window.addEventListener&&(window.addEventListener("DOMCharacterDataModified",function(){window.location.reload()},!0),window.addEventListener("DOMAttributeNameChanged",function(){window.location.reload()},!0),window.addEventListener("DOMCharacterDataModified",function(){window.location.reload()},!0),window.addEventListener("DOMElementNameChanged",function(){window.location.reload()},!0),window.addEventListener("DOMNodeInserted",function(){window.location.reload()},!0),window.addEventListener("DOMNodeInsertedIntoDocument",function(){window.location.reload()},!0),window.addEventListener("DOMNodeRemoved",function(){window.location.reload()},!0),window.addEventListener("DOMNodeRemovedFromDocument",function(){window.location.reload()},!0),window.addEventListener("DOMSubtreeModified",function(){window.location.reload()},!0))

</script;

</body;

</html;

此方法不完美的地方在于不支持IE9以下浏览器,还有就是只适用于展示数据,如果和用户有交互的页面使用不了,因为用户每次修改数据都会导致重新加载页面。


本文地址:https://www.tctck.com/post/98.html
版权声明:本文为原创文章,版权归 代笔写书 所有,欢迎分享本文,转载请保留出处!
广告位出售
优惠

发表评论


表情

还没有留言,还不快点抢沙发?