CSPViolationReport: referrer property

Baseline 2026

Newly available

Since March 2026, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Thuộc tính referrer của từ điển CSPViolationReport là một chuỗi đại diện cho URL của trang tham chiếu của tài nguyên có Chính sách bảo mật nội dung (CSP) bị vi phạm.

Referrer là trang đã dẫn đến việc tải trang có vi phạm CSP. Ví dụ, nếu chúng ta theo một liên kết đến một trang có vi phạm CSP, referrer là trang chúng ta điều hướng từ đó.

Giá trị

Một chuỗi đại diện cho URL của referrer của trang có vi phạm CSP, hoặc null.

Lưu ý rằng nếu referrer là URL HTTP(S) thì tên người dùng, mật khẩu hoặc fragment sẽ bị xóa. Nếu scheme của URL không phải http: hoặc https: thì chỉ scheme được trả về.

Ví dụ này kích hoạt vi phạm CSP bằng một script nội tuyến và báo cáo vi phạm bằng ReportingObserver. Chúng ta điều hướng đến trang từ trang khác và ghi lại referrer, documentURL và blockedURL.

HTML

Đầu tiên chúng ta định nghĩa trang referrer /bounce/index.html. Trang này chỉ chứa một liên kết đến trang khác ../report_sample/index.html.

html

<!doctype html>
<html lang="vi">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  <body>
    <ul>
      <li><a href="../report_sample/">report sample</a></li>
    </ul>
  </body>
</html>

Tệp HTML ../report_sample/index.html được định nghĩa bên dưới. Tệp này sử dụng phần tử <meta> để đặt script-src-elem của Content-Security-Policy thành self, cho phép tải script từ cùng miền, nhưng không cho phép thực thi script nội tuyến. Tài liệu cũng bao gồm một script nội tuyến, sẽ kích hoạt vi phạm CSP.

html

<!doctype html>
<!-- /report_sample/index.html -->
<html lang="vi">
  <head>
    <meta
      http-equiv="Content-Security-Policy"
      content="script-src-elem 'self' 'report-sample'" />
    <script src="main.js"></script>
  </head>
  <body>
    <script>
      const int = 4;
    </script>
  </body>
</html>

JavaScript (main.js)

Mẫu báo cáo trên cũng tải script bên ngoài main.js, được hiển thị bên dưới. Vì được tải từ cùng miền với HTML, nó không bị chặn bởi CSP.

Script tạo một ReportingObserver mới để quan sát các báo cáo vi phạm nội dung thuộc loại "csp-violation". Mỗi lần hàm callback được gọi, chúng ta lấy nội dung của mục đầu tiên trong mảng báo cáo và sử dụng nó để ghi ra documentURL, referrer và blockedURL của vi phạm vào console.

// main.js
const observer = new ReportingObserver(
  (reports, observer) => {
    console.log(`documentURL: ${reports[0].body.referrer}`);
    console.log(`referrer: ${reports[0].body.referrer}`);
    console.log(`blockedURL: ${reports[0].body.blockedURL}`);
  },
  {
    types: ["csp-violation"],
    buffered: true,
  },
);

observer.observe();

Lưu ý rằng mặc dù có thể có nhiều báo cáo trong mảng trả về, để ngắn gọn chúng ta chỉ ghi các giá trị của phần tử đầu tiên.

Kết quả

Đầu ra console của mã trên sẽ trông giống như bên dưới (trang web phụ thuộc vào cách phục vụ các trang):

documentURL: http://127.0.0.1:9999/report_sample/
referrer: http://127.0.0.1:9999/bounce/
blockedURL: inline

Lưu ý rằng referrer là trang chúng ta điều hướng từ đó, documentURL là trang có vi phạm CSP, và blockedURL trong trường hợp này không phải là URL mà là dấu hiệu cho thấy vi phạm do script nội tuyến không an toàn.