本篇要解決的問題
最近看了胡立大大的〈Beyond XSS：探索網頁前端資安宇宙〉（推薦前端工程師必看），才發現之前寫程式時很少注意到會不會容易被人攻擊這塊。
記得很久很久以前，久到 Firebase 還沒被 Google 併購以前，那時寫了一個送出表單後，會在頁面上變成賀卡的功能，就有人寫上了 <script>alert(false)</script> 在測試，然後好心的回覆說這個表單功能是會被攻擊的，也是那次以後才知道原來一不注意，input 可以被寫入程式碼。
本篇推薦使用的 DOMPurify，就是一個可以防範這種問題的套件，也是在胡立大大的文章裡知道的，本篇只會提供使用範例，詳細解說請點擊上面的連結。
本篇提供的 Demo：
https://letswritetw.github.io/letswrite-dompurify/
安裝
DOMPurify 的官方說明文件：cure53/DOMPurify。
CDN
<script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/3.0.6/purify.min.js"></script>
ES6
// 先執行命令進行安裝
$ npm install dompurify
// JS 檔案中 import
import * as DOMPurify from 'dompurify';
使用
使用的時機點有蠻多的，比方從網址上抓出參數後、從 API 取回資料、表單要送出前，都可以使用，防止收到攻擊性的語法。
DOMPurify 使用的方式也很簡單，就一行：
const clean = DOMPurify.sanitize(要處理的值);
比方我們有一個 input：
<input type="text" id="userName">
要送給後端時，就先用 DOMPurify 處理過一次：
const input = document.getElementById('userName');
const userName = DOMPurify.sanitize(input.value);
最後再把 userName 送出去，安全上會多一層保障。
Demo 及原始碼
本篇的 Demo 及原始碼都放在 GitHub 上了。
Demo 主要是輸入值以後，會看到 DOMPurify 執行後的結果。
