这是因为我们在重写Element.prototype.setAttribute时最后有old_setAttribute.apply(this, arguments);这一句，使用到了 apply 方法，所以我们再重写apply，输出this，当调用被重写后的 setAttribute 就可以从中反向拿到原生的被保存起来的old_setAttribute了。
这样我们上面所做的嵌套 iframe 重写 setAttribute 就毫无意义了。
使用上面的Object.defineProperty可以锁死 apply 和 类似用法的 call 。使之无法被重写，那么也就无法从闭包中将我们的原生接口偷出来。这个时候才算真正意义上的成功重写了我们想重写的属性。
建立拦截上报防御的手段也有一些了，接下来我们要建立一个上报系统，替换上文中的 console.log() 日志。
上报系统有什么用呢？因为我们用到了白名单，关键字黑名单，这些数据都需要不断的丰富，靠的就是上报系统，将每次拦截的信息传到服务器，不仅可以让我们程序员第一时间得知攻击的发生，更可以让我们不断收集这类相关信息以便更好的应对。
这里的示例我用nodejs搭一个十分简易的服务器接受 http 上报请求。
先定义一个上报函数：
/** * 自定义上报 -- 替换页面中的 console.log() * @param {[String]} name [拦截类型] * @param {[String]} value [拦截值] */ function hijackReport(name, value) { var img = document.createElement('img'), hijackName = name, hijackValue = value.toString(), curDate = new Date().getTime(); // 上报 img.src = 'http://www.reportServer.com/report/?msg=' + hijackName + '&value=' + hijackValue + '&time=' + curDate; }
假定我们的服务器地址是这里，我们运用img.src发送一个 http 请求到服务器，每次会带上我们自定义的拦截类型，拦截内容以及上报时间。
用 Express 搭 nodejs 服务器并写一个简单的接收路由：
var express = require('express'); var app = express(); app.get('/report/', function(req, res) { var queryMsg = req.query.msg, queryValue = req.query.value, queryTime = new Date(parseInt(req.query.time)); if (queryMsg) { console.log('拦截类型：' + queryMsg); } if (queryValue) { console.log('拦截值：' + queryValue); } if (queryTime) { console.log('拦截时间：' + req.query.time); } }); app.listen(3002, function() { console.log('HttpHijack Server listening on port 3002!'); });
运行服务器，当有上报发生，我们将会接收到如下数据：
好接下来就是数据入库，分析，添加黑名单，使用nodejs当然拦截发生时发送邮件通知程序员等等，这些就不再做展开。
HTTPS 与 CSP最后再简单谈谈 HTTPS 与 CSP。其实防御劫持最好的方法还是从后端入手，前端能做的实在太少。而且由于源码的暴露，攻击者很容易绕过我们的防御手段。
CSPCSP 即是 Content Security Policy，翻译为内容安全策略。这个规范与内容安全有关，主要是用来定义页面可以加载哪些资源，减少 XSS 的发生。
MDN –CSP
HTTPS能够实施 HTTP 劫持的根本原因，是 HTTP 协议没有办法对通信对方的身份进行校验以及对数据完整性进行校验。如果能解决这个问题，则劫持将无法轻易发生。
HTTPS，是 HTTP over SSL 的意思。SSL 协议是 Netscape 在 1995 年首次提出的用于解决传输层安全问题的网络协议，其核心是基于公钥密码学理论实现了对服务器身份认证、数据的私密性保护以及对数据完整性的校验等功能。
因为与本文主要内容关联性不大，关于更多 CSP 和 HTTPS 的内容可以自行谷歌。
以上就是详解前端安全之JavaScript防http劫持与XSS的详细内容，更多关于前端安全之JavaScript防http劫持与XSS的资料请关注脚本之家其它相关文章！
您可能感兴趣的文章: