/** * 自定义上报 -- 替换页面中的 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。其实防御劫持最好的方法还是从后端入手，前端能做的实在太少。而且由于源码的暴露，攻击者很容易绕过我们的防御手段。

CSP 即是 Content Security Policy，翻译为内容安全策略。这个规范与内容安全有关，主要是用来定义页面可以加载哪些资源，减少 XSS 的发生。

MDN – CSP

能够实施 HTTP 劫持的根本原因，是 HTTP 协议没有办法对通信对方的身份进行校验以及对数据完整性进行校验。如果能解决这个问题，则劫持将无法轻易发生。

HTTPS，是 HTTP over SSL 的意思。SSL 协议是 Netscape 在 1995 年首次提出的用于解决传输层安全问题的网络协议，其核心是基于公钥密码学理论实现了对服务器身份认证、数据的私密性保护以及对数据完整性的校验等功能。

因为与本文主要内容关联性不大，关于更多 CSP 和 HTTPS 的内容可以自行谷歌。

本文到此结束，我也是涉猎前端安全这个方面不久，文章必然有所纰漏及错误，文章的方法也是众多防御方法中的一小部分，许多内容参考下面文章，都是精品文章，非常值得一读：

使用 Javascript 写的一个防劫持组件，已上传到 Github – httphijack.js，欢迎感兴趣看看顺手点个 star ，本文示例代码，防范方法在组件源码中皆可找到。

另外组件处于测试修改阶段，未在生产环境使用，而且使用了很多 HTML5 才支持的 API，兼容性是个问题，仅供学习交流。

到此本文结束，如果还有什么疑问或者建议，可以多多交流，原创文章，文笔有限，才疏学浅，文中若有不正之处，万望告知。