![在這裏插入圖片描述]()
<!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>
function sanitize(strings, ...args) {
const dirty = strings.reduce((prev, curr, i) => `${prev}${curr}${args[i] || ''}`, '')
return DOMPurify.sanitize(dirty)
}
com.innerHTML = sanitize `....`;
</pre>
</div>
<script type="text/javascript">
let post = document.querySelector('button');
let DOMPurifyPost = document.querySelector('#dompurify');
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>
