內容安全策略與可變內聯樣式（CSP與CSS）

Question

很簡單，我可以添加指令unsafe-inline並使用它完成操作，但是我正在摸索如何以其他方式控制變量數據（如按像素定位元素）。

簡而言之，我消除了所有內聯的東西，只有一件事，即用於平移和縮放圖像的轉換：

document.getElementById("img")
 .setAttribute("style","transform:translate("+x+"px,"+y+"px) scale("+z+")");

這是必要的功能，但是除了為每個可能的像素位置和每個可能的縮放值創建瘋狂數量的CSS定義之外，我無法想象要做什么才能替代。 那顯然是火車殘骸。

我當前的解決方案是放寬此特定頁面上的CSP並允許使用內聯樣式，因為它位於2FA登錄訪問的后面，因此黑客自然無法訪問。 顯示的所有數據也都由登錄用戶添加，因此限制了XSS有效負載的可能性。

Answer 1

總結如下：

解析時檢查CSP，並阻止解析樣式屬性。 任何直接的操作都要進行。

使用setAttribute調用HTML解析器，並觸發CSP。

因此，代替：

.setAttribute("style","transform:translate("+x+"px,"+y+"px) scale("+z+")");

您將需要：

.style.transform = "translate("+x+"px,"+y+"px) scale("+z+")";

一種方法可行而另一種方法不可行聽起來很奇怪，我認為這里的理解是HTML屬性和DOM屬性之間存在細微的差異。 https://joji.me/zh-CN/blog/html-attribute-vs-dom-property/