乞丐并不会妒忌百万富翁，但是他肯定会妒忌收入更高的乞丐。

——罗素
网页在线反调试：如何让白嫖者无所遁形插图

0x00 事件描述

群内吹水时，一位群友请教我如何防止自己的网页被扒。我也无可奈何地告诉他，只要显示在了网页上，那就没有什么东西是可以隐藏的，顶多就是加密。（当然，也有可以隐藏网站源码的东西，不过那玩意很贵而且限制很大）

在他的苦苦央求下，我开始了网页反调试的探索（剧情需要，勿喷）

网页在线反调试：如何让白嫖者无所遁形插图1

0x01 添加代码

正常打开浏览器调试工具的思路：

  • F12 -> 开发者工具
  • 右键 -> 开发者工具
  • 浏览器设置 -> 工具 -> 开发者工具

解决办法

  1. 禁用F12
  2. 禁用鼠标右键
  3. 检测开发者工具
/*禁用鼠标右键*/
<script type="text/javascript">
			document.oncontextmenu = function(){
				alert("当前页面不能使用右键！");
				return false;
			}
</script>
预览禁用鼠标右键
<script type="text/javascript">
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;
    }

}
</script>
预览禁用F12按键
<script type="text/javascript">
setInterval(function() {
check()
}, 4000);
var check = function() {
function doCheck(a) {
if (("" + a/a)["length"] !== 1 || a % 20 === 0) {
(function() {
}
["constructor"]("debugger")())
} else {
(function() {}
["constructor"]("debugger")())
}
doCheck(++a)
}
try {
doCheck(0)
} catch (err) {}
};
check();
</script>
预览禁用调试器

以上三种仅是普通的反网页调试的办法，你甚至可以添加蓝屏代码或者退出代码等等，不过这些都会影响到我们网站的阅读性和亲和性

我建议呢，禁用一个调试器足矣，并且添加一个判断是否是管理员登录，避免站长在调试网站时无法正常打开调试面板

PHP代码

function anti-debug() {
if(ludou_is_administrator()==0)
{
    echo '<script src="你的反调试代码地址"></script>';
}
}
add_action( 'wp_footer', 'anti-debug', 100 );

我将js代码稍做了点修改，并且混淆加密了js代码，以下是本站反调试的情况

网页在线反调试：如何让白嫖者无所遁形插图2

网页在线反调试：如何让白嫖者无所遁形插图3