如何為 HTML 屬性設置內容安全策略

Question

我正在使用 node.js，我想為某些事情設置 CSP，例如 JavaScript 和 CSS。 我可以使用隨機數和哈希，但我將如何允許 HTML 屬性，例如：

<div style="color:blue;" onclick="myFunction()"></div>

由於這兩個都是 CSS 或 JavaScript，我的 CSP 阻止了它們。 我能做些什么？ 我不想實現unsafe-inline 。

Answer 1

'unsafe-hashes'令牌在 CSP 規范中用於 HTML 屬性。 但在 Safari 中仍然不支持。

因此，您有很多程序員的選擇，這取決於您准備重寫代碼的深度：

1. 在將其發送到瀏覽器之前，請在服務器上截取完成的 HTML 代碼，以提取style='...'和onclick='...'構造，並將它們替換為安全構造（styles 和addEventListeners()的類addEventListeners()用於腳本）。
   可能是 NodeJS 有一些有用的插件。

2. 使用 styles 您可以替換style="color:blue;" 到data-style="color:blue;" 並通過這樣的腳本處理所有這些。
   只需相應地調整它並使用像el.style.backgroundColor =...這樣的安全結構，但不是 unsafe Element.setAttribute(style) 。

3. 對於內聯事件處理程序，您可以使用此技術（適用於 jQuery，將其重寫為使用 addEventListeners）。

4. 使用最佳實踐完全重寫代碼 - 單獨的標記和數據。
   全部移動style="color:blue;" 進入類（class='blueColor'`）。 您可以分配類名稱，如“color-blue”、“display-hidden”等，以便於理解。
   在單獨的腳本中用addEventListener()替換所有內聯事件處理程序。