innerHTML 的安全風險

問題

若你要實作一個使用者輸入的功能，並把輸入的內容顯示在網頁上時，應避免把使用者輸入的值直接指定給某個 element 的 innerHTML。因為若是使用者輸入包含 HTML、JavaScript，innerHTML就會解析並執行：

var userInput = '<img src="javascript:alert("XSS")">'
element.innerHTML = userInput;

因此可能 user A 的惡意輸入，會被系統顯示到 user B 的畫面上，進而執行特定成程式碼而造成 XSS 攻擊。

解法

一般會先想到 encode HTML，但是如果只是要顯示文字，將使用者輸入值指定給 textContent 會更簡單，無需 encode，該值會被當成純文字處理，並不會執行 javascript。

var userInput = '<img src="javascript:alert("XSS")">'
element.textContent = userInput;