打赏银两×

博主辛苦了，我要打赏银两给博主，犒劳犒劳站长。

支付宝支付

微信支付

QQ钱包

js 使用白名单方式过滤 dom-based xss 的方法

学习笔记 github 用户 2017-06-21 21:57:54 156 0

【摘要】前两天学习了 dom-based xss 的实例，今天想看看如何过滤 dom-based xss 的方法，于是乎我就在 github 上面搜索相关的代码，若不其然，找到了一个非常不错的开源代码，代码使用 js 白名单过滤方式来过滤 dom-based xss。所以本文记录一下他给的源代码以及使用方法。

首先是一个 index.html 文件：

```
<!DOCTYPE html>
```
```
<html>
```
```
  <head>
```
```
    <meta charset="utf-8">
```

    <title>JSDXss 前端XSS过滤组件</title>

    <script type="text/javascript" src="jsdxss.js"></script>

```
  </head>
```
```
  <body>
```

    <label for="allows">白名单：</label><br>

    <textarea id="allows" style="width:90%;height:10em">

```
    {
```

    "a" : [ "title", "ping", "href", "class" ],

```
    "b" : [ "class" ],
```
```
    "s" : [ "class" ],
```
```
    "img" : [ "src", "class" ],
```
```
    "div" : [ "class" ]
```
```
    }
```
```
    </textarea><br>
```
```
    <label for="html">HTML:</label><br>
```

    <textarea id="html" style="width:95%;height:10em;">

    <div><b><a href="javascript:alert(1)">Hello, Sanitize</a></b></div><img src=# onerror=alert(1)>

```
    </textarea><br>
```

    <input type="button" id="filter" value="sanitize">

```
    <br>
```

    <div id="target" style="margin:0.5em;padding:0.5em;boder:solid 1px silver; background-color:#fffff0" ></div>

```
    <script type="text/javascript">
```
```
      filter.onclick = function(){
```

        var j = JSON.parse(allows.value.replace(/^\s\s*/, '').replace(/\s\s*$/, ''));

```
        var h = html.value;
```

        new Jsdxss(j).filter(h, "target");

```
      };
```
```
    </script>
```
```
  </body>
```
```
</html>
```

然后是 js 过滤函数， jsdxss.js 文件：

```
function Jsdxss(allows){
```
```
	this.allows = allows || {
```

	  "a" : [ "title", "ping", "href", "class", "target", "style" ],

```
	  "b" : [ "class", "style" ],
```
```
	  "img" : [ "src", "class", "style" ],
```
```
	  "div" : [ "class", "style"],
```
```
	  "p" : ["class", "style"]
```
```
	}
```
```
	var buildNodes = function( node ){
```
```
		var i, newNode, attributes, child;
```
```
		switch( node.nodeType ){
```
```
		case 1: // ELEMENT_NODE
```

			attributes = allows[ node.tagName.toLowerCase() ];

			if( attributes === undefined ) return undefined;

			newNode = document.createElement( node.tagName );

			for( i = 0; i < node.attributes.length; i++ ){

				if( attributes.indexOf( node.attributes[ i ].name ) != -1 ){

```
					switch(node.attributes[ i ].name){
```

						case "href": node.attributes[ i ] = _deal_href(node.attributes[ i ]);break;

						case "style": node.attributes[ i ] = _deal_style(node.attributes[ i ]);break;

```
					}
```

					newNode.setAttribute( node.attributes[ i ].name, node.attributes[ i ].value );

```
				}
```
```
			}
```

			for( i = 0; i < node.childNodes.length; i++ ){

				child = buildNodes( node.childNodes[ i ] );

```
				if( child !== undefined ){
```
```
					newNode.appendChild( child );
```
```
				}
```
```
			}
```
```
			return newNode;
```
```
		case 3: // TEXT_NODE
```

			return document.createTextNode( node.textContent );

```
		default:
```
```
			return undefined;
```
```
		}
```
```
	}
```
```
	var _deal_href = function(attr){
```
```
		var href = attr.value;
```

		if (href.indexOf("http://") === 0 || href.indexOf("http://") === 0) {

```
			attr.value = href;
```
```
		}else{
```
```
			attr.value = "http://" + href;
```
```
		}
```
```
		return attr;
```
```
	}
```
```
	var _deal_style = function(attr){
```
```
		var style = attr.value;
```
```
		var re = /expression/gim
```

		style = style.replace(/\\/g, ' ').replace(/&#/g, ' ').replace(/\/\*/g, ' ').replace(/\*\//g, ' ');

```
		attr.value = style.replace(re, ' ');
```
```
		return attr;
```
```
	}
```
```
	this.filter = function(html, target){
```
```
		try{
```
```
			var parser = new DOMParser();
```

			var newDoc = parser.parseFromString( html, "text/html" );

```
		}catch(e){
```

			var doc = new ActiveXObject ("MSXML2.DOMDocument");

```
			var newDoc = doc.loadXML(html);
```
```
		}
```
```
	    
```
```
	    var newBody = newDoc.body;
```

	    var target = document.getElementById( target );

```
	    var i, childeNode;
```
```
	  
```
```
		target.innerHTML = "";
```

		for( i = 0; i < newBody.childNodes.length; i++ ){

			childNode = buildNodes( newBody.childNodes[ i ] );

```
			if( childNode !== undefined ){
```
```
				target.appendChild( childNode );
```
```
			}
```
```
		}
```
```
	}
```
```
}
```

代码很简洁，但是实现的功能特别的强大，将这两部分代码复制到文件后，打开执行，即进入如下：

点击 sanitize 按钮，会将 HTML 这个里面的输入的内容在，下面显示出来，如图所示：

从图中可以看出，并没有弹出窗口，即 alert(1) 被过滤掉了。

接着，我们在 HTML 输入框中输入：

```
<strong> this is a strog tag</strong>
```

并且点击 sanitize 按钮，截图如下：

但是下方并没有输出这个内容，原因是白名单里面没有 strong 标签，因此被过滤掉了。接着我们在白名单里面添加如下信息：

```
"strong":[]
```

然后点击按钮，执行截图如下：

说明这个 dom-based xss 过滤函数是采用白名单式方法来过滤的，具有一定的功能，值得借鉴。

版权归马富天PHP博客所有

本文标题：《js 使用白名单方式过滤 dom-based xss 的方法》

本文链接地址：http://www.mafutian.net/272.html

转载请务必注明出处，小生将不胜感激，谢谢! 喜欢本文或觉得本文对您有帮助，请分享给您的朋友 ^_^

顶0

踩0

上一篇《 PHP 判断用户访问页面是通过手机移动端访问还是 PC 端》下一篇《 SQL server 数据库修改服务器地址,将本机地址改成 IP 地址》

分享到：

暂无评论

评论审核未开启

回复后邮件通知我

随机阅读换一批

TOP10

浏览最多
评论最多

但愿每次回忆，对生活都不感到负疚。

打赏银两×

js 使用白名单方式过滤 dom-based xss 的方法

随机阅读换一批

文章分类

TOP10