IntegrityViolationReportBody

例項屬性

blockedURL 只讀

一個字串，表示被強制執行的完整性策略所阻止的資源的 URL（或僅為 reportOnly 策略報告的資源）。

documentURL 只讀

一個字串，表示嘗試載入資源的文件的 URL。

destination 只讀

一個字串，指示被阻止資源的 Request.destination。當前只能是 "script"。

reportOnly 只讀

一個布林值：如果策略已執行，則為 false；如果僅報告了違規，則為 true。

描述

當文件嘗試載入不符合使用 Integrity-Policy 或 Integrity-Policy-Report-Only HTTP 標頭設定的策略的 Subresource Integrity 保證的資源時，會報告完整性策略違規。

具體來說，當文件嘗試載入一個 <script> 資源（或策略中列出的其他 請求目標）且該資源沒有有效的完整性元資料，或者以 no-cors 模式發出請求時，會發送報告。

在違規文件中，可以使用 ReportingObserver 回撥（在 ReportingObserver() 建構函式中定義）來獲取違規報告，透過過濾 type 為 "integrity-violation" 的報告物件來實現。

違規報告也可以作為 JSON 物件透過 POST 請求傳送到 endpoints，這些端點在 Integrity-Policy 和 Integrity-Policy-Report-Only 標頭中指定。JSON 報告物件是對 ReportingObserver 返回的報告的序列化，因此也具有 type 為 "integrity-violation"，以及一個 body 屬性，該屬性是此物件的序列化。請注意，策略中設定的端點值必須與使用 Reporting-Endpoints 標頭設定的識別符號進行對映。

示例

使用 API 進行報告

此示例演示瞭如何使用 ReportingObserver 獲取完整性策略違規報告。

首先，我們使用 Integrity-Policy 設定頁面的完整性策略。下面的策略報告並阻止載入任何未指定 integrity 屬性的 <script> 元素或 HTMLScriptElement 物件，或者在 no-cors 模式下請求指令碼資源時。請注意，在本示例中，我們只關心透過 API 報告違規，因此我們省略了報告端點。

Integrity-Policy: blocked-destinations=(script)

接下來，我們假設我們的頁面包含以下元素來載入指令碼。因為我們想觸發一個違規，所以省略了用於檢查指令碼是否符合我們預期版本的 integrity 屬性。我們也可以省略 cross-origin 屬性，這樣請求就會以 no-cors 模式傳送。

<script
  src="https://example.com/example-framework.js"
  crossorigin="anonymous"></script>

<script
  src="https://example.com/example-framework.js"
  crossorigin="anonymous"></script>

為了在頁面內觀察違規，我們構建一個新的 ReportingObserver 物件來監聽 "integrity-violation" 型別的報告，傳遞一個會接收並記錄報告的回撥函式。這段程式碼需要在導致違規的指令碼之前，在同一頁面中載入。

const observer = new ReportingObserver(
  (reports, observer) => {
    reports.forEach((violation) => {
      console.log(violation);
      console.log(JSON.stringify(violation));
    });
  },
  {
    types: ["integrity-violation"],
    buffered: true,
  },
);

observer.observe();

上面，我們記錄了每個違規報告物件以及物件的 JSON 字串版本，這可能看起來與下面的物件相似。

{
  "type": "integrity-violation",
  "url": "https://example.com",
  "body": {
    "documentURL": "https://example.com",
    "blockedURL": "https://example.com/example-framework.js",
    "destination": "script",
    "reportOnly": false
  }
}

將報告發送到報告端點

將網頁配置為將完整性策略違規報告發送到 報告伺服器端點 與前面的示例非常相似。

主要區別在於，我們需要使用 Reporting-Endpoints 響應標頭指定一個或多個要將報告發送到的報告端點，然後在設定策略時在 endpoints 欄位中引用它們。

您可以在下方看到，我們首先定義了兩個端點 — integrity-endpoint 和 backup-integrity-endpoint — 然後在我們的策略中引用它們。

Reporting-Endpoints: integrity-endpoint=https://example.com/integrity, backup-integrity-endpoint=https://report-provider.example/integrity
Integrity-Policy: blocked-destinations=(script), endpoints=(integrity-endpoint, backup-integrity-endpoint)

我們可以透過從頁面載入一個不符合子資源完整性指南的外部指令碼來觸發違規。為了與前面的示例有所不同，這裡我們以 no-cors 模式傳送請求。

<script
  src="https://example.com/example-framework.js"></script>

然後，違規報告將作為 JSON 檔案傳送到指定的端點。從下面的示例中可以看到，type 是 "integrity-violation"，body 屬性是此 IntegrityViolationReportBody 物件的序列化。

在這種情況下，報告將與我們上一個示例中的 JSON 報告相同。

{
  "type": "integrity-violation",
  "url": "https://example.com",
  "body": {
    "documentURL": "https://example.com",
    "blockedURL": "https://example.com/example-framework.js",
    "destination": "script",
    "reportOnly": false
  }
}

規範

瀏覽器相容性

另見

• ReportingObserver
• Integrity-Policy
• Integrity-Policy-Report-Only
• Reporting-Endpoints
• Integrity Policy 在 Subresource Integrity 中
• Reporting API