jquery - 如何轉義 html 以防止 XSS？

Question

我正在使用 Laravel，當用戶發送短信時，它可能包含一些惡意代碼。 當我使用{{}}它會顯示用戶發送的確切文本。 如果他已經發送

<script>alert("malicious")</script>

它將顯示完全相同並且很好，但是當我使用 jquery ajax 時，我將獲取的數據放入一些 html 標簽內的一些變量中，最后將它們全部附加到主標簽中，如下所示：

   data = '';
    //loop starts here // some otger codes deleted for cleanness
    data += "<h2>"+response.name+"</h2>";
    data += "<p>"+response.description+"</p>";
    $('#mydata').html(data);

現在的問題是，如果我使用html() ，用戶惡意代碼將被執行，如果我不使用，結果將不會顯示為 html。

我想我應該用$.parseHTML ，不是嗎？

謝謝

Answer 1

您應該使用 jQuery text()對數據進行編碼。

$('#mydata').text(data);

編輯：要創建 #mydata 的內容，您可以使用

$('#mydata')
  .html("")
  .append($("<h2></h2>").text(response.name))
  .append($("<p></p>").text(response.description))

Answer 2

您也可以這樣做來刪除標簽...

$('#mydata').text(data).replace(/(<([^>]+)>)/ig,"");

閱讀這篇文章Todo List Sanitizing Input jQuery 的更多信息

Answer 3

您無法將用戶數據呈現為 HTML 並同時將其轉義為安全的方式。 你可能會認為一些神級的正則表達式可以幫助你只刪除屬性而不是標簽。 不幸的是，有很多方法可以將 JS 注入標記中，那么您永遠無法確定。

所以你只有幾個選擇：

1. 完全忽視風險

2. 轉義所有內容（使用 jQuery 的 text() 或使用 htmlspecialchars() 在后端轉義

3. 使用通過簡單規則以受控方式轉換為 HTML 的非 HTML 標記

Answer 4

我用了：

npm js-htmlencode

而且有效。

Answer 5

我們在我工作的項目中有類似的場景。 我們過去常常從服務器端獲取 html 內容，這些內容應該使用 Jquery 附加到 DOM 中。 在將其添加到 Add 之前，我們想驗證從 Server 收到的 HTML 內容，以保護 XSS 安全問題。 以下是對 HTML 內容進行編碼的通用方法，

function htmlEncode(source) {
  return $("<div>").text(source).html();
}