前言

1 ) . 一名程序员或者用户，都知道在浏览器审查元素时，是可以修改数据的，如果修改数据，在提交就会造成不可预想的后果，特别是在数据安全的领域

2 ) . 年初时候，在某网站通过审查元素，花了0.1买了一个月视频会员，于是乎度娘了一些解决方案。

数据加密

方案一： 在返回数据时，将关联的数据MD5加密，作为一个密钥key值返回，在服务端生成一个key=md5($id.$states),同时将key值也返回。所以将数据传递过去的时候，会把值传过去的。在后端再比较key的值。

if(md5($id.$states)===$key){
    do something
}else{
  die('错误');
}

方案二：通过ajax提交，前后端都判断一次，高手是可以绕开前端的js的，所以服务端也要进行校验

$('button.btn-video-loadmore').on('click',function(){
    var page=$(this).attr('data-page');
    var type=$(this).attr('data-type');
    var key=$(this).attr('data-key');
    if(<span style="color:#FF0000;">hex_md5(page+type)==key</span>){
        var data={
            'page':page,
            'type':type
        };
        $.post('__CONTROLLER__');
    }else{
        alert('加载失败！');
    }
});

禁止浏览器F12

注意：此方法只适用于展示数据，交互无法使用，因为用户每次修改数据都会导致重新加载页面

1 ) .CSS样式，禁止选中中文

html,body{  
    -moz-user-select: none; 
    -webkit-user-select: none;  
    -ms-user-select: none; 
    -khtml-user-select: none;  
    user-select: none;  
}  
</style>

2 ) .JS禁止开启浏览器开发者模式，判断页面高度以及数据是否发生变化

var h = window.innerHeight, w = window.innerWidth;
//禁用右键
document.oncontextmenu = function () { return false; };
//在本网页的任何键盘敲击事件都是无效操作 （防止F12和shift+ctrl+i调起开发者工具）  
window.onkeydown = window.onkeyup = window.onkeypress = function () {
    window.event.returnValue = false;
    return false;
}

//禁用开发者工具F12
document.onkeydown = function () {
    if (window.event && window.event.keyCode == 123) {
        event.keyCode = 0;
        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);
}
文章目录