├── README.md
├── test.html
└── firewall.js


/README.md:
--------------------------------------------------------------------------------
 1 | # xss_jsfirewall
 2 | * 前端xss防火墙
 3 | 
 4 | * 整个代码的思想是EherDream大牛在14年写的5篇xss前端防火墙的文章，在我们都在用正则去防御xss的时候，他就提出在前端利用前端的特性去防御，思想是领先时代的
 5 | * 博客链接（http://www.cnblogs.com/index-html/p/xss-frontend-firewall-1.html）
 6 | * 代码是参考另一位写的，这位作者也是参考EherDream的思想，相当于一个优化吧，git地址（https://github.com/chokcoco/httphijack）
 7 | * 不少代码是都是把EherDream的demo直接拿过来用的，所以代码都差不多的，就是细节地方的处理不同
 8 | * 代码的解释很详细了
 9 | ## 优势与短板
10 | * 整个写下来发现前端防御的确有它的好处，也有局限性
11 | * 因为防御方法是把前端的各种函数勾住或者监听页面变化，取出值来判断，所以这里涉及到一个脚本的好坏的问题，如何把一个正常的脚本，和一个攻击的脚本区分开
12 | * 这个貌似想辨识度很高的区分开还是很困难的，但是按照xss的目的，可以有个思路,xss的目的有两种：1.获取到某些信息（窃取cookie或者password） 2.模拟某些操作(类似蠕虫或者利用xssgetshell)
13 | * 对于第一种，可以拦截请求，这里拦截了ajax,websocket,PostMessage这三种跨域发送请求的方式，验证目的地址是否是白名单
14 | * 对于第二种，感觉还没有很好的方法区分，因为用js模拟用户操作正常的脚本也会，而攻击脚本也是模拟而已，也没有什么特别能跟正常操作区分开的地方，所以这里暂时只能用关键词黑名单匹配
15 | 
16 | * 最后还有一点局限性就是虽然前端能获取到事件和脚本，但是如果攻击者利用'/"/script标签，成功的绕过了，那前端捕获到的就不准确了，比如
17 | ```markdown
18 | `<img src="xxxx">`
19 | ```
20 | * 其中xxxx为我们可控的如果攻击者利用双引号逃逸了输入" onmouseover=“javascript:alert(1);
21 | ```markdown
22 | `<img src="" onmouseover=“javascript:alert(1);”>`
23 | ```
24 | * 这样我们去取src中的值就是空，无法正确认为用户输入是"onmouseover=“javascript:alert(1);  虽然我们的脚本也可以拦截这种，因为拦截了事件
25 | * 所以这里最好是前后端配合起来用，后端只用转义符号" ' < > ( ) /等等就ok了
26 | * 然后繁杂的各种on事件啊，各种请求，各种动态脚本都交给前端来处理，这样可以前端后端各自发挥自己的优势
27 | 


--------------------------------------------------------------------------------
/test.html:
--------------------------------------------------------------------------------
 1 | <script src='firewall.js'></script>
 2 | 恶意模块拦截测试
 3 | <br> 
 4 | <a href="javascript:alert(/xss/)">Click Me</a>
 5 | <br><br><br>
 6 | 恶意事件拦截测试
 7 | <br>
 8 | <img src='https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_ca79a146.jpg' onmouseover='javascript:alert(/xss/)'></img>
 9 | <br><br><br>
10 | 静态脚本拦截测试
11 | <br>
12 | <script src='http://www.baidu.com/abc.js'>
13 | <br><br><br>
14 | 动态脚本拦截测试1
15 | <br>
16 | <button id="btn1">创建脚本</button>
17 | 	<script>
18 | 		btn1.onclick = function() {
19 | 			var el = document.createElement('script');
20 | 			el.id='abc';
21 | 			el.src = 'http://www.baidu.com/xss/out.js?dynamic';
22 | 			document.body.appendChild(el);
23 | 			document.getElementById('abc').innerHTML='alert(1)';
24 | 		};
25 | 	</script>
26 | <br><br><br>
27 | 动态脚本拦截测试2
28 | <br>
29 | <button id="btn2">创建脚本</button>
30 | 	<script>
31 | 		btn2.onclick = function() {
32 | 			var script1 = document.createElement('script');
33 | 			script1.setAttribute('src', 'https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_ca79a146.js');
34 | 			document.getElementsByTagName('body')[0].appendChild(script1);
35 | 		};
36 | 		
37 | 	</script>
38 | <br><br><br>
39 | 
40 | 动态脚本拦截测试3
41 | <br>
42 | <button id="btn3">创建脚本</button>
43 | 	<script>
44 | 		btn3.onclick = function() {
45 | 			document.write('<scri'+'pt src="http://www.jb51.net/adc.js" ></s'+'cript>');
46 | 		};
47 | 		
48 | 	</script>
49 | <br><br><br>
50 | 
51 | 动态脚本拦截测试4
52 | <br>
53 | <button id="btn4">创建脚本</button>
54 | 	<script>
55 | 	btn4.onclick = function() {
56 | 		var xhr = new XMLHttpRequest();
57 | 		xhr.open('GET', 'http://www.baidu.com/');
58 | 		xhr.send();
59 | 		};
60 | 	</script>
61 | <br><br><br>
62 | 动态脚本拦截测试5
63 | <br>
64 | <button id="btn5">创建脚本</button>
65 | 	<script>
66 | 	btn5.onclick = function() {
67 | 		var ws = new WebSocket('ws://www.baidu.com/');
68 | 		};
69 | 	</script>
70 | <br><br><br>
71 | 动态脚本拦截测试6
72 | <br>
73 | <button id="btn6">创建脚本</button>
74 | 	<script>
75 | 	btn6.onclick = function() {
76 | 		postMessage('hello', '*');
77 | 	window.addEventListener('message', function(e) 
78 | 	{
79 | 		console.log('收到:' + e.data);
80 | 	});
81 | 		};
82 | 	</script>
83 | <br><br><br>


--------------------------------------------------------------------------------
/firewall.js:
--------------------------------------------------------------------------------
  1 | //product by chengable www.chengable.com
  2 | // 记录内联事件是否被扫描过的 hash map
  3 | mCheckMap = {},
  4 | // 记录内联事件是否被扫描过的id
  5 | mCheckID = 0; 
  6 | 
  7 | // 建立白名单,可以自定义自己的正则
  8 | var whiteList = [
  9 | '^http://www.chengable.com/',
 10 | '^http://127.0.0.1/'
 11 | ];
 12 | var whiteListwebsocket = [
 13 | '^ws://www.chengable.com/',
 14 | '^wss://www.chengable.com/',
 15 | '^wss://127.0.0.1/',
 16 | '^ws://127.0.0.1/'
 17 | ];
 18 | // 建立黑名单
 19 | var blackList = [
 20 | '192.168.1.0'
 21 | ];
 22 | 
 23 | // 建立关键词黑名单，可以添加你自己的关键词,不同的标签黑名单不同，适应各种情况
 24 | var wordblackliston = [
 25 | 
 26 | 'javascript',
 27 | 'eval',
 28 | 'alert',
 29 | 'function',
 30 | 'src='
 31 | ];
 32 | var jswordblacklist = [
 33 | 
 34 | 'javascript',
 35 | 'eval',
 36 | 'alert'
 37 | ];
 38 | var wordblacklistDocumetnWrite = [
 39 | 'javascript',
 40 | 'eval',
 41 | 'script',
 42 | 'iframe',
 43 | 'alert',
 44 | 'src='
 45 | ];
 46 | var wordblacklistinnerHTML = [
 47 | 'alert',
 48 | 'javascript',
 49 | 'eval',
 50 | 'script',
 51 | 'iframe'
 52 | ];
 53 | 
 54 | //正则判断内容是否有害，可以在这里定义你自己的过滤规则
 55 | function blackregmatch(wordblacklist,code)
 56 | {
 57 | 	var reglen=wordblacklist.length;
 58 | 	for (i=0;i<reglen;i++)
 59 | 	{
 60 | 		var reg=new RegExp(wordblacklist[i], 'i');
 61 | 		if (reg.test(code))
 62 | 		{
 63 | 			return true;
 64 | 		}
 65 | 	}
 66 | 	return false;
 67 | 	
 68 | }
 69 | //启动内联函数(on...)拦截
 70 | function begin_interception()
 71 | {
 72 | 	var i=0;
 73 | 	for (var obj in document)
 74 | 	{
 75 | 		
 76 | 		
 77 | 		if (/^on.*/.test(obj))
 78 | 		{
 79 | 			eventname=obj;
 80 | 			eventid=i++;
 81 | 			hookonevent(eventname,eventid);
 82 | 		}
 83 | 	}
 84 | }
 85 | 
 86 | function hookonevent(eventname,eventid)
 87 | {
 88 | 	var isClick = (eventname == 'onclick');
 89 | 	document.addEventListener(eventname.substr(2), function(e) {
 90 |         scanElement(e.target,eventname,eventid,isClick);
 91 |     }, true);
 92 | 	
 93 | }
 94 | 
 95 | //扫描on事件
 96 | function scanElement(elem,eventname,eventid,isClick)
 97 | {
 98 | 	
 99 | 	
100 | 	var code = "",hash = 0;
101 | 	var flag=elem['isscan'];
102 | 	if(!flag)
103 | 	{
104 | 		flag=elem['isscan'] = ++mCheckID;
105 | 	}
106 | 	
107 | 	hash = (flag << 8) | eventid;
108 | 	
109 | 	if (hash in mCheckMap) 
110 | 	{
111 | 	  return;
112 | 	}
113 | 	//给即将要扫描的时间加上hash标记，下次就直接跳过了
114 | 	mCheckMap[hash] = true;
115 | 
116 | 	// 非元素节点就直接返回了
117 | 	if (elem.nodeType != Node.ELEMENT_NODE) 
118 | 	{
119 | 	  return;
120 | 	}
121 | 	//开始扫描on事件
122 | 	
123 | 	if (elem[eventname]) 
124 | 	{
125 | 		code = elem.getAttribute(eventname);
126 | 		
127 | 		if (code && blackregmatch(wordblackliston, code)) 
128 | 		{
129 | 			// 注销事件
130 | 			elem[eventname] = null;
131 | 			console.log('拦截可疑事件，tag:' + elem.tagName+'，event:'+eventname+'，code:'+code);
132 | 			//Report('拦截可疑内联事件', code);
133 | 			
134 | 		}
135 | 	}
136 | 	if (elem.tagName == 'A' && elem.protocol == 'javascript:' && eventname=='onclick') 
137 | 	{
138 | 		
139 | 		var code = elem.href;
140 | 		if (blackregmatch(wordblackliston, code)) 
141 | 		{
142 | 			// 注销代码
143 | 			elem.href = 'javascript:void(0)';
144 | 			console.log('拦截可疑模块，tag:' + elem.tagName+'，event:'+eventname+'，code:'+code);
145 | 			//Report('拦截可疑javascript:代码', code);
146 | 		}
147 | 	}
148 | 	scanElement(elem.parentNode);
149 | 
150 | }
151 | //静态脚本拦截
152 | function interceptionStaticScript() 
153 | {
154 |     // MutationObserver 的不同兼容性写法
155 |     var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
156 | 
157 |     // 该构造函数用来实例化一个新的 Mutation 观察者对象
158 |     // Mutation 观察者对象能监听在某个范围内的 DOM 树变化
159 |     var observer = new MutationObserver(function(mutations) {
160 |       mutations.forEach(function(mutation) {
161 | 		  begininterceptionstatic(mutation)
162 |        });
163 |     });
164 | 
165 |     // 传入目标节点和观察选项
166 |     // 如果 target 为 document 或者 document.documentElement
167 |     // 则当前文档中所有的节点添加与删除操作都会被观察到
168 |     observer.observe(document, {
169 |       subtree: true,
170 |       childList: true
171 |     });
172 | }
173 | //静态脚本检测拦截函数
174 | function begininterceptionstatic(mutation)
175 | {
176 | 	// 返回被添加的节点,或者为null.
177 | 	var nodes = mutation.addedNodes;
178 | 
179 | 	// 逐个遍历
180 | 	for (var i = 0; i < nodes.length; i++)
181 | 	{
182 | 		var node = nodes[i];
183 | 
184 | 		// 扫描 script 与 iframe
185 | 		if (node.tagName === 'SCRIPT' || node.tagName === 'IFRAME') 
186 | 		{
187 | 			// 拦截到可疑iframe
188 | 			if (node.tagName === 'IFRAME' && node.srcdoc)
189 | 			{
190 | 			  node.parentNode.removeChild(node);
191 | 			  console.log('拦截到危险iframe', node.srcdoc);
192 | 			  //Report('拦截到危险iframe', node.srcdoc);
193 | 
194 | 			}
195 | 			else if (node.src) 
196 | 			{
197 | 				// 只放行白名单
198 | 				if (!whileListMatch(whiteList, node.src))
199 | 				{
200 | 
201 | 					node.parentNode.removeChild(node);
202 | 					// 上报
203 | 					console.log('拦截可疑静态脚本:', node.src);
204 | 					//Report('拦截可疑静态脚本', node.src);
205 | 				}
206 | 			}
207 | 			else if (blackregmatch(jswordblacklist,node.textContent))
208 | 			{
209 | 				node.parentNode.removeChild(node);
210 | 				console.log('拦截可疑静态脚本：'+node.textContent);
211 | 				
212 | 			}
213 | 		}
214 | 	}
215 | 
216 | }
217 | //src属性的白名单
218 | function whileListMatch(whiteList,code)
219 | {
220 | 	var wlen=whiteList.length;
221 | 	for (i=0;i<wlen;i++)
222 | 	{
223 | 		var reg=new RegExp(whiteList[i]);
224 | 		if (reg.test(code))
225 | 		{
226 | 			return true;
227 | 		}
228 | 	}
229 | 	return false;
230 | }
231 | 
232 | function interceptionDynamicScript(window)
233 | {
234 | 	
235 | 	installHook(window);
236 | 	
237 | }
238 | 
239 | function interception_src_inner()
240 | {
241 | 	//拦截动态生成src属性
242 | 	var raw_setter = HTMLScriptElement.prototype.__lookupSetter__('src');
243 | 	HTMLScriptElement.prototype.__defineSetter__('src', function(url) {
244 | 	if (!whileListMatch(whiteList,url)) 
245 | 	{
246 | 		console.log('拦截可疑src动态脚本：'+url);
247 | 		return ;
248 | 	}
249 | 	raw_setter.call(this, url);
250 |     });
251 | 	
252 | 	//拦截利用innerHTML动态生成恶意代码
253 | 	var raw_setter = HTMLScriptElement.prototype.__lookupSetter__('innerHTML');
254 | 	HTMLScriptElement.prototype.__defineSetter__('innerHTML', function(url) {
255 | 	if (blackregmatch(wordblacklistinnerHTML, url))
256 | 	{
257 | 		console.log('拦截可疑innerHTML动态脚本：'+url);
258 | 		return ;
259 | 	}
260 | 	raw_setter.call(this, url);
261 |     });
262 | }
263 | 
264 | 
265 | function resetCreateElement()
266 | {
267 | 	var old_ce = Document.prototype.createElement;
268 | 
269 | 	Document.prototype.createElement = function() 
270 | 	{
271 | 		// 调用原生函数
272 | 		var element = old_ce.apply(this, arguments);
273 | 		// 为脚本元素安装属性钩子
274 | 
275 | 		element.__defineSetter__('src', function(url) 
276 | 		{
277 | 			if (!whileListMatch(whiteList,url)) 
278 | 			{
279 | 				console.log('拦截可疑CreateElement动态脚本：'+url);
280 | 				return ;
281 | 			}
282 | 		});
283 | 		
284 | 
285 | 		// 返回元素实例
286 | 		return element;
287 | 	};
288 | }
289 | 
290 | 
291 | function resetDocumentWrite(window) 
292 | {
293 | 	var old_write = window.document.write;
294 | 
295 | 	window.document.write = function(string) 
296 | 	{
297 | 		if (blackregmatch(wordblacklistDocumetnWrite, string)) 
298 | 		{
299 | 			console.log('拦截可疑DocumentWrite动态脚本:', string);
300 | 			//Report('拦截可疑document-write', string);
301 | 			return;
302 | 		}
303 | 
304 | 		// 调用原始接口
305 | 		old_write.apply(document, arguments);
306 | 	}
307 | }
308 | 
309 | 
310 | function resetSetAttribute(window) 
311 | {
312 | 	// 保存原有接口
313 | 	var old_setAttribute = window.Element.prototype.setAttribute;
314 | 
315 | 	// 重写 setAttribute 接口
316 | 	window.Element.prototype.setAttribute = function(name, value) 
317 | 	{
318 | 
319 | 	  // 拦截规则
320 | 		if (/^src$/i.test(name)) 
321 | 		{
322 | 
323 | 			if (!whileListMatch(whiteList,value)) 
324 | 			{
325 | 				console.log('拦截可疑SetAttribute动态模块，属性:'+name+'，值:'+value);
326 | 				return;
327 | 			}
328 | 		}
329 | 		else if (blackregmatch(wordblackliston, value))
330 | 		{
331 | 			console.log('拦截可疑SetAttribute动态模块，属性:'+name+'，值:'+ value);
332 | 			return;
333 | 		}
334 | 
335 | 		// 调用原始接口
336 | 		old_setAttribute.apply(this, arguments);
337 | 	};
338 | }
339 | 
340 | 
341 | function installHook(window)
342 | {
343 | 	interception_src_inner();//拦截src和innerHTML属性
344 | 	resetCreateElement();//重写createElement()拦截src属性，这里其实和上面重复了，可以去掉
345 | 	resetSetAttribute(window);// 重写当前 window 窗口的 setAttribute 属性
346 | 	resetDocumentWrite(window);// 重写当前 window 窗口的 document.Write 属性
347 | 	ajaxlook(this.XMLHttpRequest);//监听ajax请求
348 | 	websocket_look(window);//监听websocket请求
349 | 	postmsg_look(window);//监听postMessage请求
350 | 
351 | 	// MutationObserver 的不同兼容性写法
352 | 	var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
353 | 
354 | 	// 该构造函数用来实例化一个新的 Mutation 观察者对象
355 | 	// Mutation 观察者对象能监听在某个范围内的 DOM 树变化
356 | 	var observer = new MutationObserver(function(mutations) 
357 | 	{
358 | 		mutations.forEach(function(mutation) 
359 | 		{
360 | 			// 返回被添加的节点,或者为null.
361 | 			var nodes = mutation.addedNodes;
362 | 
363 | 			// 逐个遍历
364 | 			for (var i = 0; i < nodes.length; i++) 
365 | 			{
366 | 				var node = nodes[i];
367 | 
368 | 				// 给生成的 iframe 里环境也装上重写的钩子
369 | 				if (node.tagName == 'IFRAME') 
370 | 				{
371 | 					installHook(node.contentWindow);
372 | 				}
373 | 			}
374 | 		});
375 | 	});
376 | 
377 | 	observer.observe(document, {
378 | 	  subtree: true,
379 | 	  childList: true
380 | 	});
381 | }
382 | 
383 | 
384 | 
385 | function lockCallAndApply() 
386 | {
387 | 		// 锁住 call
388 | 		Object.defineProperty(Function.prototype, 'call', {
389 | 		value: Function.prototype.call,
390 | 		// 当且仅当仅当该属性的 writable 为 true 时，该属性才能被赋值运算符改变
391 | 		writable: false,
392 | 		// 当且仅当该属性的 configurable 为 true 时，该属性才能够被改变，也能够被删除
393 | 		configurable: false,
394 | 		enumerable: true
395 | 		});
396 | 		// 锁住 apply
397 | 		Object.defineProperty(Function.prototype, 'apply', {
398 | 		value: Function.prototype.apply,
399 | 		writable: false,
400 | 		configurable: false,
401 | 		enumerable: true
402 | 		});
403 | }
404 | 
405 | 
406 | function ajaxlook(objectOfXMLHttpRequest) 
407 | {  
408 |     // http://stackoverflow.com/questions/3596583/javascript-detect-an-ajax-event  
409 | 
410 |       
411 | 	var s_ajaxListener = new Object();  
412 | 	s_ajaxListener.tempOpen = objectOfXMLHttpRequest.prototype.open;  
413 | 	s_ajaxListener.tempSend = objectOfXMLHttpRequest.prototype.send;  
414 | 
415 |       
416 | 	objectOfXMLHttpRequest.prototype.open = function(a,b) 
417 | 	{
418 | 		
419 | 		if (!a) var a=' ';  
420 | 		if (!b) var b=' ';  
421 | 		var open_method=a;
422 | 		var open_url=b;
423 | 		
424 | 		if (!whileListMatch(whiteList,open_url))
425 | 		{
426 | 			console.log('拦截可疑ajax请求'+open_method+':'+open_url);
427 | 			return ;
428 | 			
429 | 		}
430 | 		s_ajaxListener.tempOpen.apply(this, arguments);  
431 |        
432 |     }  
433 |       
434 | }
435 | 
436 | 
437 | 
438 | function websocket_look(window)
439 | {
440 | 	var raw_class = window.WebSocket;
441 | 	window.WebSocket = function WebSocket(url, arg) 
442 | 	{
443 | 		if(!whileListMatch(whiteListwebsocket,url))
444 | 		{
445 | 			console.log('拦截可疑WebSocket 请求' + url);
446 | 			return ;
447 | 		}
448 | 
449 | 		
450 | 
451 | 		var ins = new raw_class(url, arg);
452 | 		ins.constructor = WebSocket;
453 | 		return ins;
454 | 	};
455 | 
456 | }
457 | 
458 | 
459 | 
460 | function postmsg_look(window)
461 | {
462 | 	var old_postMessage = window.postMessage;
463 | 	window.postMessage = function postMessage(data, url) 
464 | 	{
465 | 		if (!whileListMatch(whiteList,url))
466 | 		{
467 | 			console.log('拦截可疑postMessage请求，地址：' + url+'，数据：'+data);
468 | 			return;
469 | 		}
470 | 		
471 | 		old_postMessage.apply(this,arguments);
472 | 	};
473 | 
474 | 
475 | }
476 | 
477 | 
478 | 
479 | 
480 | begin_interception();//恶意事件拦截
481 | interceptionStaticScript();//静态脚本拦截
482 | interceptionDynamicScript(window);//动态脚本拦截,以及向非白名单站发送请求拦截
483 | //ajaxlook(this.XMLHttpRequest);//拦截向恶监听意外部发送的ajax请求，同源策略是可以发不能收，所以发送还是要监听


--------------------------------------------------------------------------------