详解前端安全之JavaScript防http劫持与XSS(2)

当然,如果这个参数一改,防嵌套的代码就失效了。所以我们还需要建立一个上报系统,当发现页面被嵌套时,发送一个拦截上报,即便重定向失败,也可以知道页面嵌入 iframe 中的 URL,根据分析这些 URL ,不断增强我们的防护手段,这个后文会提及。

内联事件及内联脚本拦截

在 XSS 中,其实可以注入脚本的方式非常的多,尤其是 HTML5 出来之后,一不留神,许多的新标签都可以用于注入可执行脚本。

列出一些比较常见的注入方式:

1.<a href="javascript:alert(1)" _fcksavedurl="javascript:alert(1)" ></a>

2.<iframe src="javascript:alert(1)" />

3.<img src='https://www.jb51.net/article/x' onerror="alert(1)" />

4.<video src='https://www.jb51.net/article/x' onerror="alert(1)" ></video>

5.<div ><div>

除去一些未列出来的非常少见生僻的注入方式,大部分都是javascript:...及内联事件on*。

我们假设注入已经发生,那么有没有办法拦截这些内联事件与内联脚本的执行呢?

对于上面列出的 (1) (5) ,这种需要用户点击或者执行某种事件之后才执行的脚本,我们是有办法进行防御的。

浏览器事件模型

这里说能够拦截,涉及到了事件模型相关的原理。

我们都知道,标准浏览器事件模型存在三个阶段:

捕获阶段

目标阶段

冒泡阶段

对于一个这样<a href="javascript:alert(222)" _fcksavedurl="javascript:alert(222)" ></a>的 a 标签而言,真正触发元素alert(222)是处于点击事件的目标阶段。

<a href="javascript:alert(222)" >Click Me</a> <script> document.addEventListener('click', function(e) { alert(111); }, true); </script>

点击上面的click me,先弹出 111 ,后弹出 222。

那么,我们只需要在点击事件模型的捕获阶段对标签内javascript:...的内容建立关键字黑名单,进行过滤审查,就可以做到我们想要的拦截效果。

对于 on* 类内联事件也是同理,只是对于这类事件太多,我们没办法手动枚举,可以利用代码自动枚举,完成对内联事件及内联脚本的拦截。

以拦截 a 标签内的href="javascript:...为例,我们可以这样写:

// 建立关键词黑名单 var keywordBlackList = [ 'xss', 'BAIDU_SSP__wrapper', 'BAIDU_DSPUI_FLOWBAR' ]; document.addEventListener('click', function(e) { var code = ""; // 扫描 <a href="javascript:" > 的脚本 if (elem.tagName == 'A' && elem.protocol == 'javascript:') { var code = elem.href.substr(11); if (blackListMatch(keywordBlackList, code)) { // 注销代码 elem.href = 'javascript:void(0)'; console.log('拦截可疑事件:' + code); } } }, true); /** * [黑名单匹配] * @param {[Array]} blackList [黑名单] * @param {[String]} value [需要验证的字符串] * @return {[Boolean]} [false -- 验证不通过,true -- 验证通过] */ function blackListMatch(blackList, value) { var length = blackList.length, i = 0; for (; i < length; i++) { // 建立黑名单正则 var reg = new RegExp(whiteList[i], 'i'); // 存在黑名单中,拦截 if (reg.test(value)) { return true; } } return false; }

点击图中这几个按钮,可以看到如下:

详解前端安全之JavaScript防http劫持与XSS

这里我们用到了黑名单匹配,下文还会细说。

静态脚本拦截

XSS 跨站脚本的精髓不在于“跨站”,在于“脚本”。

通常而言,攻击者或者运营商会向页面中注入一个<script>脚本,具体操作都在脚本中实现,这种劫持方式只需要注入一次,有改动的话不需要每次都重新注入。

我们假定现在页面上被注入了一个<script src="https://attack.com/xss.js">脚本,我们的目标就是拦截这个脚本的执行。

听起来很困难啊,什么意思呢。就是在脚本执行前发现这个可疑脚本,并且销毁它使之不能执行内部代码。

所以我们需要用到一些高级 API ,能够在页面加载时对生成的节点进行检测。

MutationObserver

MutationObserver 是 HTML5 新增的 API,功能很强大,给开发者们提供了一种能在某个范围内的 DOM 树发生变化时作出适当反应的能力。

说的很玄乎,大概的意思就是能够监测到页面 DOM 树的变换,并作出反应。

MutationObserver()该构造函数用来实例化一个新的Mutation观察者对象。

MutationObserver( function callback );

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zygzgf.html