这个网站的源码看不了？

debgger

前段时间看到一个网站挺有意思(想白嫖上面的图片)，想看看其源码, 结果一打开页面就如下面这个样子，而且那些精美的图片也消失了, 无论你点击多少次跳过都是徒劳

devtool中source显示的是这样的

(function anonymous(
) {
debugger
})

我还是看了下它的源码, 搜到了下面的代码

if(this._debugger) {
  const e = new Function('debugger');
  setInterval(e, 1)
}

这段代码就是阻断了你看源码的关键所在, 只要检测到控制台打开就会执行, 而且随着时间的增长，浏览器的内存不断增加直到卡死, 那我们需要怎么去解决

跳过debugger

是不是这样子就解决了呢？没有这么简单, 你得看对方网站是怎么检测是否开启浏览器控制台, 接下来探讨一下如何检测浏览器当前标签页是否开启控制台。

devtools-detect

js原生是没有相关的检测方法, npm上有一个比较火的检测库devtools-detect, 大体看了下源码, 它是通过一个setInterval时时比较window.outerWidth和window.innerWidth , window.outerHeight和window.innerHeight的差值, 不开devtool的情况下, outerWidth比innerWidth大16px, 但是开了任意方向的devtool, 这个差值会大大增大

显而易见, 只要在浏览器内开devtool是会减小innerWidth的, 但是devtool除了左下右三种停靠方向, 还有一种脱离浏览器的浮动展示 好了, 这种情况下devtools-detect这种比较差值的方法失去了作用。

如何检测devtool是否开启

现阶段比较实用的方法我总结了一下如下

let isDebug = false
setInterval(() => {
   const period = 100;
   const before = new Date().getTime();
   debugger;
   const after = new Date().getTime();
   if ((after - before) > period) {
      isDebug = true
      // 这里可以写关于检测出devtool之后删除元素或者重定向页面的逻辑
   }
}, 500);

但是光检测没有用, 你得在检测出打开devtool你得把不想让别人看到的代码或者媒体删除或者重定向页面,再回归到主题聊一聊, 之所以现在有些网站会这么做, 并不是怕别人盗取它的代码, 主要是防止网站上有知识产权的图片, 音视频被人盗用传播, 产生法律纠纷。

结论

其实上面描述的感觉有来有回, 给人一种错觉真的能防止别人盗取你网站资源, 其实不然, 你要是在devtool中去防止这种行为其实已经晚了, chrome插件、fiddler、Charles这些工具, 随便拎出一个都可以轻松在浏览器加载页面之前获取到全部的静态资源, 还需要打开devtool做什么呢?所以图片该打水印打水印, 能加签名加签名, 音视频能用blob加密就加密, 不能让白嫖者获取得太轻松......