前言

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);
}