<div輸入過濾，也被稱為DIV XSS過濾，是一種用于防止跨站腳本攻擊（XSS）的前端安全措施。XSS攻擊通常通過在網站的輸入字段中插入惡意的腳本代碼來實現。這些腳本代碼可以竊取用戶的敏感信息，修改網頁內容，甚至通過釣魚攻擊來獲取用戶的登錄憑證。為了保護網站和用戶的安全，開發人員必須對用戶輸入進行過濾，確保任何輸入都不會被解析為腳本代碼。
在以下代碼案例中，我們將使用JavaScript和HTML來演示div輸入過濾的實現方法。
案例1： 假設我們有一個簡單的表單，用戶可以在其中輸入一段文字，并將其顯示在頁面上的div元素中。為了防止XSS攻擊，我們需要對用戶輸入進行過濾，確保沒有惡意腳本被執行。

html
<p>請輸入內容：</p>
<input type="text" id="inputText">
<button onclick="filterInput()">提交</button>
<div id="outputDiv"></div>
<br>
<script>
function filterInput() {
var input = document.getElementById("inputText").value;
var filteredInput = filterXSS(input);
document.getElementById("outputDiv").innerText = filteredInput;
}
</script>

在上面的代碼中，當用戶點擊提交按鈕時，filterInput()函數被調用。該函數獲取用戶輸入的文本，然后調用filterXSS()函數來過濾輸入內容。最后，過濾后的內容將顯示在id為outputDiv的div元素中。
案例2： 有時候，我們可能希望過濾后的內容保留部分HTML標簽，如段落（p）標簽和換行符。可以使用如下代碼來實現：

html
<p>請輸入內容：</p>
<input type="text" id="inputText">
<button onclick="filterInput()">提交</button>
<div id="outputDiv"></div>
<br>
<script>
function filterInput() {
var input = document.getElementById("inputText").value;
var filteredInput = filterXSS(input, {
whiteList: {
p: []
}
});
document.getElementById("outputDiv").innerHTML = filteredInput;
}
</script>

在這個案例中，通過傳遞一個whiteList參數給filterXSS()函數，我們告訴過濾器只保留p標簽。
案例3： 其他文章中的一個真實案例是使用DOMPurify庫進行div輸入過濾。DOMPurify是一個用于HTML和XML的DOM解析和過濾庫，它可以安全地移除惡意代碼。

html
<script src="https://cdn.jsdelivr.net/npm/dompurify@2.3.2/dist/purify.min.js"></script>
<br>
<p>請輸入內容：</p>
<input type="text" id="inputText">
<button onclick="filterInput()">提交</button>
<div id="outputDiv"></div>
<br>
<script>
function filterInput() {
var input = document.getElementById("inputText").value;
var filteredInput = DOMPurify.sanitize(input);
document.getElementById("outputDiv").innerHTML = filteredInput;
}
</script>

在這個案例中，我們使用了CDN引入DOMPurify庫，并在filterInput()函數中調用DOMPurify.sanitize()函數來過濾用戶輸入。過濾后的內容將顯示在id為outputDiv的div元素中。
通過以上案例，我們可以看到，div輸入過濾是一種非常重要的前端安全措施，可以很大程度上減少XSS攻擊的風險。開發人員應該始終對用戶輸入進行過濾，確保網站和用戶的安全。