网站的基本保护措施

近日总觉得有些东西,并不想完全开放在网络上。就想着弄一些基本的手段来保护下自己的资源。对于大佬还是请高抬贵手,我并没有做很多的优化或者加密。

禁止网页右键

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
if (document.layers) {
document.captureEvents(Event.MOUSEDOWN);
}
document.onmousedown = click;
document.oncontextmenu = new Function("return false;");
function click(e) {
e = e || event;
if (e.button == 2) {
var tag = e.srcElement || e.target;
if (tag.type == "text" || tag.type == "textarea") {
document.oncontextmenu = new Function("return true;");
} else {
document.oncontextmenu = new Function("return false;");
}
}
}
$(document).bind("contextmenu", function () {
return false;
});

禁止f12

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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;
}
}

打开开发者工具,跳转页面

1
<script>eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('!2(e){2 n(e){2 n(){9 u}2 o(){4.b&&4.b.p&&4.b.p.G?t("8"):(a="O",j.L(d),j.N(),t(a))}2 t(e){u!==e&&(u=e,"2"==6 c.5&&c.5(e))}2 r(){l||(l=!0,4.D("q",o),H(f))}"2"==6 e&&(e={5:e});3 i=(e=e||{}).X||w,c={};c.5=e.5;3 a,d=x y;d.z("A",2(){a="8"});3 u="B";c.C=n;3 f=k(o,i);4.E("q",o);3 l;9 c.F=r,c}3 o=o||{};o.m=n,"2"==6 7?(7.I||7.J)&&7(2(){9 o}):"K"!=6 g&&g.s?g.s=o:4.v=o}(),v.m(2(e){3 a=0;3 n=k(2(){h("8"==e){P(2(){h(a==0){a=1;Q.R.S=\'T://U.V/\'}},W)}},M)});',60,60,'||function|var|window|onchange|typeof|define|on|return||Firebug|||||module|if||console|setInterval||create|||chrome|resize||exports|||jdetects|500|new|Image|__defineGetter__|id|unknown|getStatus|removeEventListener|addEventListener|free|isInitialized|clearInterval|amd|cmd|undefined|log|100|clear|off|setTimeout|top|location|href|http|baizp|com|200|delay'.split('|'),0,{}))</script>

效果如图:

但是后续发现谷歌浏览器一加载页面就会跳转,edge自测可以。

方式二:

原理:当控制台在输出的某个对象时,是会去get对象属性的,因此会调用到属性的getter。

1
2
3
4
5
6
7
8
9
let x = document.createElement('div');
Object.defineProperty(x, 'id', {
get:function(){
// 在这里放入你的代码
window.location.href='https://coderblue.cn'
alert('Console is opened');
}
});
console.log(x);

图片的保护

  1. 使用 pointer-events:none

    给 img 标签加样式:img{pointer-events:none},去掉了点击图片事件,但是我手机端测试并没有禁止提示图片保存。

    网测适用于微信客户端的手机页面的图片被打开的情况

  2. 阻止手机安卓端的长按保存图片事件:

    1
    window.ontouchstart = function(e) { e.preventDefault(); };

    但是还存在个问题,因为我使用的是懒加载。待图片显示加载后第一次长按还是可以保存,后面就不可了。

手机端的触屏事件

1
2
3
4
5
6
touchstart事件:当手指触摸屏幕的时候触发, 及时 有一个手指放在屏幕上也会触发;
touchmove事件:当手指在屏幕上滑动的时候触发,是一个持续的过程,在触发事件的过程中 可以调用preventDefult()方法阻止滚动;
touchend事件: 当手指从屏幕上移开的时候触发;
touchcancel事件:当系统停止跟踪触摸的时候触发, 比如 来电话 或者短信 或者其他的提醒的时候 会打断touchmove事件;
单击时的触发顺序:touchstart -> touchmove -> touchend;
滑动时的触发顺序:touchstart -> touchmove -> touchmove -> ....... ->touchmove ->touchend;
1
2
3
4
5
6
7
8
$(document).on("touchstart",function(){
alert(1)
}).on("touchmove",function(event){
// 阻止浏览器默认行为
event.preventDefault();
}).on("touchcancel touchend",function(event){
alert(2)
});

为什么要阻止浏览器默认行为:

考虑性能问题,安卓4.0的浏览器只允许触发一次用户自定的touchmove的事件处理函数,如果多次触发就会触发浏览器的默认行为,直接触发touchcancel事件。所以在touchmove的处里函数中阻止默认行为就能解决这个问题。

打赏
  • 版权声明: 本博客所有文章除特别声明外,均采用 Apache License 2.0 许可协议。转载请注明出处!
  1. © 2020 Liu Yang    湘ICP备20003709号

请我喝杯咖啡吧~

支付宝
微信