CSPViolationReportBody: blockedURL 屬性
CSPViolationReportBody 介面的只讀屬性 blockedURL 是一個字串值，表示因違反 內容安全策略 (CSP) 而被阻止的資源。
值
一個包含值或 URL 的字串，該值或 URL 代表違反策略的資源。
如果該值不是資源的 URL，則它必須是以下字串之一：
inline-
內聯資源。例如，當 CSP 中未指定
'unsafe-inline'時使用的內聯指令碼。 eval-
eval()。例如，使用了eval()但 CSP 中未指定'unsafe-eval'。 wasm-eval-
Wasm 評估。例如，使用了
eval()但 CSP 中未指定'wasm-unsafe-eval'。 trusted-types-policy-
違反
trusted-typesCSP 指令的資源。例如，使用window.trustedTypes.createPolicy()建立了一個TrustedTypePolicy，但其名稱未在 CSP 的trusted-types指令中列出。 trusted-types-sink-
違反
require-trusted-types-forCSP 指令的資源。例如，該指令設定為script，但文件未使用TrustedTypePolicy來在將資料傳遞給Element.innerHTML等接收器之前進行清理。
示例
以下示例展示了會產生上述 blockedURL 值的 HTML。
示例假設您有一個名為 main.js 的 JavaScript 檔案，該檔案已從同一域匯入到您的指令碼中。該指令碼（如下所示）會建立一個新的 ReportingObserver 來觀察型別為 "csp-violation" 的內容違規報告。每次呼叫回撥函式時，我們都會在 reports 陣列的第一個條目中記錄 blockedURL。
const observer = new ReportingObserver(
(reports, observer) => {
console.log(`blockedURL: ${reports[0].body.blockedURL}`);
},
{
types: ["csp-violation"],
buffered: true,
},
);
observer.observe();
請注意，儘管返回的陣列中可能有多份報告，但為簡潔起見，我們僅記錄第一份報告的 blocked URL。
外部資源的 blockedURL
下面的 HTML 設定了一個策略 Content-Security-Policy: default-src 'self'，該策略僅允許載入來自同一站點的資源，然後嘗試從外部站點 https://apis.google.com 載入指令碼。
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Security-Policy" content="default-src 'self'" />
<script src="main.js"></script>
</head>
<body>
<!-- This should generate a CSP violation -->
<script src="https://apis.google.com/js/platform.js"></script>
</body>
</html>
記錄 blockedURL 的結果將是
blockedURL: https://apis.google.com/js/platform.js
不安全內聯資源的 blockedURL
下面的 HTML 展示了會導致 blockedURL 為 inline 的條件。它設定了一個策略 Content-Security-Policy: default-src 'self'，該策略不允許執行內聯指令碼，由於頁面包含內聯指令碼而導致違規。
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Security-Policy" content="default-src 'self'" />
<script src="main.js"></script>
</head>
<body>
<script>
const int = 4;
</script>
</body>
</html>
記錄 blockedURL 的結果將是
blockedURL: inline
受信任型別策略資源的 blockedURL
下面的 HTML 展示了會導致 blockedURL 為 trusted-types-policy 的條件。首先，它定義了一個允許執行 'unsafe-inline' 指令碼的策略，以便我們可以建立一個將觸發違規的 TrustedTypePolicy。該策略還使用 trusted-types 指令指定允許建立名為 myPolicy 的 TrustedTypePolicy。
<!doctype html>
<html lang="en">
<head>
<meta
http-equiv="Content-Security-Policy"
content="default-src 'self' 'report-sample' 'unsafe-inline'; trusted-types myPolicy" />
<script src="main.js"></script>
</head>
<body></body>
<script>
const policy = trustedTypes.createPolicy("somePolicy", {
// Some (insufficient) sanitization code
createHTML: (string) => string.replace(/</g, "<"),
});
</script>
</html>
在指令碼中，會建立一個名為 somePolicy 的策略。
注意：上面定義的特定策略並非一個好的策略。使用受信任型別 (trusted types) 的目的是強制執行某個策略，而不是強制執行特定策略，並確保清理程式碼集中且易於審查。
由於此策略未在 trusted-types 指令中列出，因此這是一個 CSP 違規，我們會看到日誌輸出
blockedURL: trusted-types-policy
如果我們更改允許策略的名稱為 somePolicy，則頁面將不再違反策略。
受信任型別接收器的 blockedURL
下面的 HTML 展示了會導致 blockedURL 為 trusted-types-sink 的條件。首先，它定義了一個允許執行 'unsafe-inline' 指令碼的策略，並且與前一個示例一樣，它使用 trusted-types 指令指定允許建立名為 myPolicy 的 TrustedTypePolicy。
此外，它還指定了 require-trusted-types-for 'script' 指令，該指令強制要求接收器只能接收使用受信任型別清理過的內容。
<!doctype html>
<html lang="en">
<head>
<meta
http-equiv="Content-Security-Policy"
content="default-src 'self' 'report-sample' 'unsafe-inline'; trusted-types 'myPolicy'; require-trusted-types-for 'script'" />
<script src="main.js"></script>
</head>
<body>
<input type="text" id="userInput" />
<button>Update Content</button>
<div id="content"></div>
</body>
<script>
function updateContent() {
const userInput = document.getElementById("userInput").value;
// Passing unsanitized content - a violation of the policy
document.getElementById("content").innerHTML = userInput;
}
document.querySelector("button").addEventListener("click", updateContent);
</script>
</html>
updateContent() 方法會將未經清理的內容傳遞給元素的 innerHTML 屬性，這將導致 CSP 違規。我們會看到日誌輸出
blockedURL: trusted-types-sink
為了避免違規，我們需要更新指令碼以定義一個受信任型別策略，並使用它來清理傳遞給元素的輸入。
const policy = trustedTypes.createPolicy("myPolicy", {
// Some (insufficient) sanitization code
createHTML: (string) => string.replace(/</g, "<"),
});
function updateContent() {
const userInput = document.getElementById("userInput").value;
const sanitizedInput = policy.createHTML(userInput);
document.getElementById("content").innerHTML = sanitizedInput;
}
規範
| 規範 |
|---|
| 內容安全策略級別 3 # dom-cspviolationreportbody-blockedurl |
瀏覽器相容性
載入中…