防止恶意XSS攻击

在这里插入图片描述
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>XSS</title>
		<style type="text/css">
			button {
				display: block;
				border-radius: 5%;
				outline: none;
				border: none;
				transform: scale(2) translate(30px, 10px);
				background: linear-gradient(90deg, #ccc, #00f);
				color: #ffffff;
				margin-bottom: 50px;
			}

			span {
				display: inline-block;
				border-radius: 5px;
				width: 80px;
				background: linear-gradient(90deg, #ccc, aqua);
			}

			.warning {
				width: 51vw;
				height: 68vh;
				border: 1px solid #ccc;
				top: 0;
				right: 0;
				position: fixed;
				background: linear-gradient(90deg, #ccc, #ffffff);
			}
		</style>
		<script src="https://cdn.bootcss.com/dompurify/2.0.8/purify.js"></script>
	</head>
	<body>
		<input type="text" placeholder="Name" style="display: block;">
		<textarea rows="8" cols="50">
		</textarea>
		<button title="普通发布">Post Comment</button>
		<button title="使用DOMPurify过滤发布" id="dompurify">DOMPurify Post</button>
		<!-- <img src="../../Vue/shoopmall/public/favicon.ico" onload=alert('XSS')> -->
		<div class="warning">
			<h3>Warning <h4>模板字符串生成评论内容，如果不过滤容易受到攻击</h4>
			</h3>
			比如：在textarea中粘贴一段XSS攻击（这里用一张图片加图片onload后弹出窗口模拟）<br>
			在模板字符串中粘贴的内容就插入到了html页面中，在图片上设置的onload事件就会触发，这里是弹出窗口，如果是xss就会盗取用户的cookies等操作
			<hr>过滤可以用DOMPurify插件，防止XSS攻击<br>
			CDN:<\script src="https://cdn.bootcss.com/dompurify/2.0.8/purify.js">
				</script><br>
				<pre>
//定义sanitize过滤XSS攻击
function sanitize(strings, ...args) {
	const dirty = strings.reduce((prev, curr, i) => `${prev}${curr}${args[i] || ''}`, '')
	return DOMPurify.sanitize(dirty)
}
//使用sanitize
com.innerHTML = sanitize `....`;
				</pre>
		</div>
		<script type="text/javascript">
			let post = document.querySelector('button');
			let DOMPurifyPost = document.querySelector('#dompurify');

			//定义sanitize过滤XSS攻击
			function sanitize(strings, ...args) {
				const dirty = strings.reduce((prev, curr, i) => `${prev}${curr}${args[i] || ''}`, '')
				return DOMPurify.sanitize(dirty)
			}
			
			post.addEventListener('click', () => {
				let name = document.querySelector('input').value;
				let comment = document.querySelector('textarea').value;
				let com = document.createElement('div');
				com.innerHTML = `<span>${name}</span><hr>
				<div>${comment}</div>`;
				document.body.appendChild(com);
			})
			
			DOMPurifyPost.addEventListener('click', () => {
				let name = document.querySelector('input').value;
				let comment = document.querySelector('textarea').value;
				let com = document.createElement('div');
				com.innerHTML = sanitize `<span>${name}</span><hr>
				<div>${comment}</div>`;
				document.body.appendChild(com);
			})
		</script>
	</body>
</html>
Hello Hongbin
发布了117 篇原创文章 · 获赞 146 · 访问量 2万+
私信关注
猜你喜欢
