Sử dụng Reporting API để theo dõi các hành vi vi phạm bảo mật, lệnh gọi API không được dùng nữa và nhiều thông tin khác.
Một số lỗi chỉ xảy ra trong quá trình phát hành công khai. Bạn sẽ không thấy các chỉ số này cục bộ hoặc trong quá trình phát triển vì người dùng thực, mạng thực và thiết bị thực sẽ thay đổi trò chơi. Reporting API giúp phát hiện một số lỗi này, chẳng hạn như lỗi vi phạm bảo mật hoặc các lệnh gọi API đã ngừng hoạt động và sắp ngừng hoạt động trên trang web của bạn, đồng thời truyền các lỗi đó đến một điểm cuối mà bạn đã chỉ định.
Tính năng này cho phép bạn khai báo những gì bạn muốn theo dõi bằng cách sử dụng tiêu đề HTTP và được trình duyệt vận hành.
Việc thiết lập Reporting API giúp bạn yên tâm rằng khi người dùng gặp phải những loại lỗi này, bạn sẽ biết để có thể khắc phục.
Bài đăng này đề cập đến những việc mà API này có thể làm và cách sử dụng API này. Hãy cùng tìm hiểu nhé!
Tổng quan
Giả sử trang web của bạn (site.example) có Content-Security-Policy và Document-Policy. Bạn không biết những nút này có chức năng gì? Không sao cả, bạn vẫn có thể hiểu ví dụ này.
Bạn quyết định giám sát trang web của mình để biết thời điểm các chính sách này bị vi phạm, nhưng cũng vì bạn muốn theo dõi các API đã ngừng hoạt động hoặc sắp ngừng hoạt động mà cơ sở mã của bạn có thể đang sử dụng.
Để làm như vậy, bạn cần định cấu hình tiêu đề Reporting-Endpoints và liên kết các tên điểm cuối này bằng chỉ thị report-to trong các chính sách của bạn khi cần.
Reporting-Endpoints: main-endpoint="https://reports.example/main", default="https://reports.example/default"
# Content-Security-Policy violations and Document-Policy violations
# will be sent to main-endpoint
Content-Security-Policy: script-src 'self'; object-src 'none'; report-to main-endpoint;
Document-Policy: document-write=?0; report-to=main-endpoint;
# Deprecation reports don't need an explicit endpoint because
# these reports are always sent to the `default` endpoint
Đã xảy ra sự cố không lường trước được và một số người dùng của bạn đã vi phạm các chính sách này.
Ví dụ về lỗi vi phạm
index.html
<script src="script.js"></script>
<!-- CSP VIOLATION: Try to load a script that's forbidden as per the Content-Security-Policy -->
<script src="https://example.com/script.js"></script>
script.js, do index.html tải
// DOCUMENT-POLICY VIOLATION: Attempt to use document.write despite the document policy
try {
document.write('<h1>hi</h1>');
} catch (e) {
console.log(e);
}
// DEPRECATION: Call a deprecated API
const webkitStorageInfo = window.webkitStorageInfo;
Trình duyệt sẽ tạo một báo cáo vi phạm CSP, một báo cáo vi phạm Document-Policy và một báo cáo Ngừng sử dụng để ghi lại những vấn đề này.
Sau một khoảng thời gian ngắn (tối đa một phút), trình duyệt sẽ gửi báo cáo đến điểm cuối được định cấu hình cho loại lỗi vi phạm này. Các báo cáo được gửi ngoài băng tần bởi chính trình duyệt (không phải do máy chủ của bạn cũng không phải do trang web của bạn).
(Các) điểm cuối nhận được những báo cáo này.
Giờ đây, bạn có thể truy cập vào các báo cáo trên những điểm cuối này và theo dõi những vấn đề đã xảy ra. Bạn đã sẵn sàng bắt đầu khắc phục sự cố đang ảnh hưởng đến người dùng.
Báo cáo mẫu
{
"age": 2,
"body": {
"blockedURL": "https://site2.example/script.js",
"disposition": "enforce",
"documentURL": "https://site.example",
"effectiveDirective": "script-src-elem",
"originalPolicy": "script-src 'self'; object-src 'none'; report-to main-endpoint;",
"referrer": "https://site.example",
"sample": "",
"statusCode": 200
},
"type": "csp-violation",
"url": "https://site.example",
"user_agent": "Mozilla/5.0... Chrome/92.0.4504.0"
}
Trường hợp sử dụng và loại báo cáo
Bạn có thể định cấu hình Reporting API để giúp bạn theo dõi nhiều loại cảnh báo hoặc vấn đề thú vị xảy ra trên trang web của mình:
| Loại báo cáo | Ví dụ về trường hợp tạo báo cáo |
|---|---|
| Lỗi vi phạm CSP (Chỉ cấp 3) | Bạn đã đặt một Content-Security-Policy (CSP) trên một trong các trang của mình, nhưng trang đó đang cố gắng tải một tập lệnh không được phép theo CSP của bạn. |
| Lỗi vi phạm COOP | Bạn đã đặt một Cross-Origin-Opener-Policy trên một trang, nhưng một cửa sổ có nguồn gốc khác đang cố gắng tương tác trực tiếp với tài liệu. |
| Lỗi vi phạm COEP | Bạn đã đặt một Cross-Origin-Embedder-Policy trên một trang, nhưng tài liệu này có một iframe khác nguồn gốc chưa chọn được tải bởi các tài liệu khác nguồn gốc. |
| Vi phạm Chính sách về tài liệu | Trang này có một chính sách về tài liệu ngăn chặn việc sử dụng document.write, nhưng một tập lệnh cố gắng gọi document.write. |
| Lỗi vi phạm Chính sách về quyền | Trang này có một chính sách về quyền ngăn chặn việc sử dụng micrô và một tập lệnh yêu cầu đầu vào âm thanh. |
| Cảnh báo về việc ngừng cung cấp | Trang đang sử dụng một API đã lỗi thời hoặc sẽ lỗi thời; trang gọi API đó trực tiếp hoặc bằng cách sử dụng một tập lệnh cấp cao nhất của bên thứ ba. |
| Can thiệp | Trang đang cố gắng thực hiện một việc mà trình duyệt quyết định không thực hiện vì lý do bảo mật, hiệu suất hoặc trải nghiệm người dùng. Ví dụ trong Chrome: trang sử dụng document.write trên các mạng chậm hoặc gọi navigator.vibrate trong một khung hình nhiều nguồn gốc mà người dùng chưa tương tác. |
| Sự cố | Trình duyệt gặp sự cố khi trang web của bạn đang mở. |
Báo cáo
Báo cáo trông như thế nào?
Trình duyệt sẽ gửi báo cáo đến điểm cuối mà bạn đã định cấu hình. Thao tác này sẽ gửi các yêu cầu có dạng như sau:
POST
Content-Type: application/reports+json
Tải trọng của các yêu cầu này là một danh sách báo cáo.
Ví dụ về danh sách báo cáo
[
{
"age": 420,
"body": {
"columnNumber": 12,
"disposition": "enforce",
"lineNumber": 11,
"message": "Document policy violation: document-write is not allowed in this document.",
"policyId": "document-write",
"sourceFile": "https://site.example/script.js"
},
"type": "document-policy-violation",
"url": "https://site.example/",
"user_agent": "Mozilla/5.0... Chrome/92.0.4504.0"
},
{
"age": 510,
"body": {
"blockedURL": "https://site.example/img.jpg",
"destination": "image",
"disposition": "enforce",
"type": "corp"
},
"type": "coep",
"url": "https://dummy.example/",
"user_agent": "Mozilla/5.0... Chrome/92.0.4504.0"
}
]
Dưới đây là dữ liệu bạn có thể tìm thấy trong từng báo cáo này:
| Trường | Mô tả |
|---|---|
age |
Số mili giây giữa dấu thời gian của báo cáo và thời gian hiện tại. |
body |
Dữ liệu báo cáo thực tế, được chuyển đổi tuần tự thành một chuỗi JSON. Các trường có trong body của một báo cáo được xác định theo type của báo cáo đó. ⚠️ Các loại báo cáo khác nhau sẽ có nội dung khác nhau.
|
type |
Loại báo cáo, ví dụ: csp-violation hoặc coep. |
url |
Địa chỉ của tài liệu hoặc worker mà từ đó báo cáo được tạo. Dữ liệu nhạy cảm như tên người dùng, mật khẩu và đoạn mã sẽ bị xoá khỏi URL này. |
user_agent |
Tiêu đề User-Agent của yêu cầu mà từ đó báo cáo được tạo. |
Báo cáo có thông tin xác thực
Các điểm cuối báo cáo có cùng nguồn gốc với trang tạo báo cáo sẽ nhận được thông tin đăng nhập (cookie) trong các yêu cầu chứa báo cáo.
Thông tin đăng nhập có thể cung cấp thêm ngữ cảnh hữu ích về báo cáo; ví dụ: liệu tài khoản của một người dùng nhất định có liên tục kích hoạt lỗi hay không, hoặc liệu một chuỗi hành động nhất định được thực hiện trên các trang khác có kích hoạt báo cáo trên trang này hay không.
Khi nào và bằng cách nào trình duyệt gửi báo cáo?
Báo cáo được gửi ngoài băng tần từ trang web của bạn: trình duyệt kiểm soát thời điểm báo cáo được gửi đến(các) điểm cuối đã định cấu hình. Bạn cũng không thể kiểm soát thời điểm trình duyệt gửi báo cáo; trình duyệt sẽ tự động ghi lại, xếp hàng và gửi báo cáo vào thời điểm thích hợp.
Điều này có nghĩa là bạn hầu như không cần lo ngại về hiệu suất khi sử dụng Reporting API.
Báo cáo được gửi trễ (tối đa một phút) để tăng khả năng gửi báo cáo theo lô. Điều này giúp tiết kiệm băng thông để tôn trọng kết nối mạng của người dùng, đặc biệt quan trọng trên thiết bị di động. Trình duyệt cũng có thể trì hoãn việc phân phối nếu đang bận xử lý công việc có mức độ ưu tiên cao hơn hoặc nếu người dùng đang sử dụng mạng chậm hoặc tắc nghẽn vào thời điểm đó.
Vấn đề về bên thứ ba và bên thứ nhất
Những báo cáo được tạo do các lỗi vi phạm hoặc việc ngừng sử dụng xảy ra trên trang của bạn sẽ được gửi đến(các) điểm cuối mà bạn đã định cấu hình. Điều này bao gồm cả những lỗi vi phạm do tập lệnh của bên thứ ba chạy trên trang của bạn gây ra.
Các lỗi vi phạm hoặc lỗi không dùng nữa xảy ra trong iframe trên nhiều nguồn được nhúng vào trang của bạn sẽ không được báo cáo cho(các) điểm cuối của bạn (ít nhất là theo mặc định). Một iframe có thể thiết lập báo cáo của riêng mình và thậm chí báo cáo cho dịch vụ báo cáo của trang web của bạn (tức là bên thứ nhất); nhưng điều đó tuỳ thuộc vào trang web được đóng khung. Ngoài ra, xin lưu ý rằng hầu hết các báo cáo chỉ được tạo nếu một trang vi phạm chính sách và chính sách của trang cũng như chính sách của iframe là khác nhau.
Ví dụ về các tính năng không dùng nữa
Hỗ trợ trình duyệt
Bảng sau đây tóm tắt khả năng hỗ trợ của trình duyệt đối với Reporting API phiên bản 1, tức là với tiêu đề Reporting-Endpoints. Trình duyệt hỗ trợ Reporting API phiên bản 0 (tiêu đề Report-To) giống nhau, ngoại trừ một loại báo cáo: Reporting API mới không hỗ trợ tính năng Ghi nhật ký lỗi mạng. Hãy đọc hướng dẫn di chuyển để biết thông tin chi tiết.
| Loại báo cáo | Chrome | Chrome iOS | Safari | Firefox | Edge |
|---|---|---|---|---|---|
| Vi phạm CSP (Chỉ cấp 3)* | ✔ Có | ✔ Có | ✔ Có | ✘ Không | ✔ Có |
| Ghi nhật ký lỗi mạng | ✘ Không | ✘ Không | ✘ Không | ✘ Không | ✘ Không |
| Vi phạm COOP/COEP | ✔ Có | ✘ Không | ✔ Có | ✘ Không | ✔ Có |
| Tất cả các loại khác: Vi phạm chính sách về tài liệu, Ngừng sử dụng, Can thiệp, Sự cố | ✔ Có | ✘ Không | ✘ Không | ✘ Không | ✔ Có |
Bảng này chỉ tóm tắt thông tin hỗ trợ cho report-to bằng tiêu đề Reporting-Endpoints mới. Đọc các mẹo di chuyển báo cáo CSP nếu bạn đang muốn di chuyển sang Reporting-Endpoints.
Sử dụng Reporting API
Quyết định nơi gửi báo cáo
Bạn có hai lựa chọn:
- Gửi báo cáo đến một dịch vụ thu thập báo cáo hiện có.
- Gửi báo cáo đến một trình thu thập báo cáo do bạn tự tạo và vận hành.
Cách 1: Sử dụng dịch vụ thu thập báo cáo hiện có
Sau đây là một số ví dụ về dịch vụ thu thập báo cáo:
Nếu bạn biết các giải pháp khác, hãy mở một vấn đề để cho chúng tôi biết và chúng tôi sẽ cập nhật bài đăng này!
Ngoài giá cả, hãy cân nhắc những điểm sau khi chọn một trình thu thập báo cáo: 🧐
- Trình thu thập dữ liệu này có hỗ trợ tất cả các loại báo cáo không? Ví dụ: không phải giải pháp điểm cuối báo cáo nào cũng hỗ trợ báo cáo COOP/COEP.
- Bạn có thoải mái khi chia sẻ bất kỳ URL nào của ứng dụng với một trình thu thập báo cáo bên thứ ba không? Ngay cả khi trình duyệt loại bỏ thông tin nhạy cảm khỏi các URL này, thông tin nhạy cảm vẫn có thể bị rò rỉ theo cách này. Nếu điều này có vẻ quá rủi ro cho ứng dụng của bạn, hãy vận hành điểm báo cáo của riêng bạn.
Lựa chọn 2: Xây dựng và vận hành trình thu thập báo cáo của riêng bạn
Việc tạo máy chủ riêng để nhận báo cáo không hề đơn giản. Để bắt đầu, bạn có thể phân nhánh mẫu mã đơn giản của chúng tôi. Ứng dụng này được xây dựng bằng Express và có thể nhận cũng như hiển thị báo cáo.
Khi bạn tạo bộ sưu tập báo cáo của riêng mình:
- Kiểm tra các yêu cầu
POSTcóContent-Typelàapplication/reports+jsonđể nhận ra các yêu cầu báo cáo do trình duyệt gửi đến điểm cuối của bạn. - Nếu điểm cuối của bạn nằm trên một nguồn gốc khác với trang web của bạn, hãy đảm bảo rằng điểm cuối đó hỗ trợ các yêu cầu kiểm tra trước CORS.
Cách 3: Kết hợp cách 1 và cách 2
Bạn có thể muốn một nhà cung cấp cụ thể xử lý một số loại báo cáo, nhưng lại có giải pháp nội bộ cho những loại báo cáo khác.
Trong trường hợp này, hãy đặt nhiều điểm cuối như sau:
Reporting-Endpoints: endpoint-1="https://reports-collector.example", endpoint-2="https://my-custom-endpoint.example"
Định cấu hình tiêu đề Reporting-Endpoints
Đặt tiêu đề phản hồi Reporting-Endpoints. Giá trị của tham số này phải là một hoặc một loạt các cặp khoá-giá trị được phân tách bằng dấu phẩy:
Reporting-Endpoints: main-endpoint="https://reports.example/main", default="https://reports.example/default"
Nếu bạn đang di chuyển từ Reporting API cũ sang Reporting API mới, thì bạn nên đặt cả Reporting-Endpoints và Report-To. Xem thông tin chi tiết trong hướng dẫn di chuyển.
Cụ thể, nếu bạn đang sử dụng báo cáo cho các lỗi Content-Security-Policy chỉ bằng cách sử dụng chỉ thị report-uri, hãy kiểm tra các bước di chuyển để báo cáo CSP.
Reporting-Endpoints: main-endpoint="https://reports.example/main", default="https://reports.example/default"
Report-To: ...
Khoá (tên điểm cuối)
Mỗi khoá có thể là tên do bạn chọn, chẳng hạn như main-endpoint hoặc endpoint-1.
Bạn có thể quyết định đặt các điểm cuối có tên khác nhau cho các loại báo cáo khác nhau, ví dụ: my-coop-endpoint, my-csp-endpoint. Nhờ đó, bạn có thể định tuyến báo cáo đến các điểm cuối khác nhau tuỳ thuộc vào loại báo cáo.
Nếu bạn muốn nhận báo cáo về can thiệp, ngừng sử dụng, sự cố hoặc kết hợp các báo cáo này, hãy đặt một điểm cuối có tên là default.
Nếu tiêu đề Reporting-Endpoints không xác định điểm cuối default, thì báo cáo thuộc loại này sẽ không được gửi (mặc dù chúng sẽ được tạo).
Giá trị (URL)
Mỗi giá trị là một URL mà bạn chọn, nơi các báo cáo sẽ được gửi đến. URL bạn cần đặt ở đây sẽ phụ thuộc vào những gì bạn quyết định ở Bước 1.
URL điểm cuối:
- Phải bắt đầu bằng dấu gạch chéo (
/). Không hỗ trợ đường dẫn tương đối. - Có thể là trên nhiều nguồn gốc; nhưng trong trường hợp đó, thông tin đăng nhập sẽ không được gửi cùng với báo cáo.
Ví dụ
Reporting-Endpoints: my-coop-endpoint="https://reports.example/coop", my-csp-endpoint="https://reports.example/csp", default="https://reports.example/default"
Sau đó, bạn có thể sử dụng từng điểm cuối có tên trong chính sách thích hợp hoặc sử dụng một điểm cuối duy nhất trên tất cả các chính sách.
Vị trí đặt tiêu đề
Trong Reporting API mới (API được đề cập trong bài đăng này), báo cáo được giới hạn trong tài liệu. Điều này có nghĩa là đối với một nguồn gốc nhất định, các tài liệu khác nhau (chẳng hạn như site.example/page1 và site.example/page2) có thể gửi báo cáo đến các điểm cuối khác nhau.
Để nhận báo cáo về các lỗi vi phạm hoặc lỗi không dùng nữa xảy ra trên bất kỳ trang nào của trang web, hãy đặt tiêu đề làm phần mềm trung gian cho tất cả các phản hồi.
Sau đây là một ví dụ trong Express:
const REPORTING_ENDPOINT_BASE = 'https://report.example';
const REPORTING_ENDPOINT_MAIN = `${REPORTING_ENDPOINT_BASE}/main`;
const REPORTING_ENDPOINT_DEFAULT = `${REPORTING_ENDPOINT_BASE}/default`;
app.use(function (request, response, next) {
// Set up the Reporting API
response.set(
'Reporting-Endpoints',
`main-endpoint="${REPORTING_ENDPOINT_MAIN}", default="${REPORTING_ENDPOINT_DEFAULT}"`,
);
next();
});
Chỉnh sửa chính sách
Giờ đây, khi tiêu đề Reporting-Endpoints đã được định cấu hình, hãy thêm một chỉ thị report-to vào từng tiêu đề chính sách mà bạn muốn nhận báo cáo vi phạm.
Giá trị của report-to phải là một trong các điểm cuối có tên mà bạn đã định cấu hình.
Bạn có thể sử dụng nhiều điểm cuối cho nhiều chính sách hoặc sử dụng các điểm cuối khác nhau trên các chính sách.

Không cần report-to cho báo cáo ngừng sử dụng, can thiệp và sự cố. Các báo cáo này không bị ràng buộc bởi bất kỳ chính sách nào. Các báo cáo này được tạo miễn là bạn thiết lập một điểm cuối default và được gửi đến điểm cuối default này.
Ví dụ:
# Content-Security-Policy violations and Document-Policy violations
# will be sent to main-endpoint
Content-Security-Policy: script-src 'self'; object-src 'none'; report-to main-endpoint;
Document-Policy: document-write=?0;report-to=main-endpoint;
# Deprecation reports don't need an explicit endpoint because
# these reports are always sent to the default endpoint
Gỡ lỗi chế độ thiết lập báo cáo
Chủ động tạo báo cáo
Khi thiết lập Reporting API, bạn có thể cần cố ý vi phạm các chính sách của mình để kiểm tra xem báo cáo có được tạo và gửi như dự kiến hay không.
Tiết kiệm thời gian
Báo cáo có thể được gửi trễ khoảng một phút, đây là một khoảng thời gian dài khi gỡ lỗi. 😴 May mắn thay, khi gỡ lỗi trong Chrome, bạn có thể sử dụng cờ --short-reporting-delay để nhận báo cáo ngay khi chúng được tạo.
Chạy lệnh này trong thiết bị đầu cuối để bật cờ này:
YOUR_PATH/TO/EXECUTABLE/Chrome --short-reporting-delay
Sử dụng Công cụ cho nhà phát triển
Trong Chrome, hãy sử dụng Công cụ cho nhà phát triển để xem những báo cáo đã được gửi hoặc sẽ được gửi.
Tính đến tháng 10 năm 2021, tính năng này đang trong giai đoạn thử nghiệm. Để sử dụng, hãy làm theo các bước sau:
- Sử dụng Chrome phiên bản 96 trở lên (kiểm tra bằng cách nhập
chrome://versionvào trình duyệt) - Nhập hoặc dán
chrome://flags/#enable-experimental-web-platform-featuresvào thanh địa chỉ của Chrome. - Nhấp vào Đã bật.
- Khởi động lại trình duyệt.
- Mở Công cụ của Chrome cho nhà phát triển.
- Trong Công cụ cho nhà phát triển của Chrome, hãy mở phần Cài đặt. Trong phần Thử nghiệm, hãy nhấp vào Bật bảng Reporting API trong bảng điều khiển Ứng dụng.
- Tải lại Công cụ cho nhà phát triển.
- Tải lại trang. Các báo cáo do trang mà Công cụ cho nhà phát triển đang mở sẽ được liệt kê trong bảng điều khiển Ứng dụng của Công cụ của Chrome cho nhà phát triển, trong mục Reporting API.
Trạng thái báo cáo
Cột Trạng thái cho biết liệu một báo cáo đã được gửi thành công hay chưa.
| Trạng thái | Mô tả |
|---|---|
Success |
Trình duyệt đã gửi báo cáo và điểm cuối đã trả lời bằng mã thành công (200 hoặc một mã phản hồi thành công khác 2xx). |
Pending |
Trình duyệt đang cố gắng gửi báo cáo. |
Queued |
Báo cáo đã được tạo và trình duyệt không cố gắng gửi báo cáo đó. Báo cáo xuất hiện dưới dạng Queued trong một trong hai trường hợp sau:
|
MarkedForRemoval |
Sau một thời gian thử lại (Queued), trình duyệt đã ngừng cố gắng gửi báo cáo và sẽ sớm xoá báo cáo đó khỏi danh sách báo cáo cần gửi. |
Báo cáo sẽ bị xoá sau một thời gian, cho dù có được gửi thành công hay không.
Khắc phục sự cố
Báo cáo không được tạo hoặc không được gửi đến điểm cuối của bạn như mong đợi? Sau đây là một số mẹo khắc phục sự cố này.
Báo cáo không được tạo
Các báo cáo xuất hiện trong Công cụ cho nhà phát triển đã được tạo chính xác. Nếu báo cáo mà bạn mong đợi không xuất hiện trong danh sách này:
- Kiểm tra
report-totrong chính sách của bạn. Nếu bạn định cấu hình sai, hệ thống sẽ không tạo báo cáo. Hãy chuyển đến phần Chỉnh sửa chính sách để khắc phục vấn đề này. Một cách khác để khắc phục sự cố này là kiểm tra bảng điều khiển Công cụ cho nhà phát triển trong Chrome: nếu một lỗi xuất hiện trong bảng điều khiển cho lỗi vi phạm mà bạn dự kiến, thì có nghĩa là chính sách của bạn có thể đã được định cấu hình đúng cách. - Xin lưu ý rằng chỉ những báo cáo được tạo cho tài liệu mà Công cụ cho nhà phát triển đang mở mới xuất hiện trong danh sách này. Ví dụ: nếu trang web
site1.examplecủa bạn nhúng một iframesite2.examplevi phạm chính sách và do đó tạo ra một báo cáo, thì báo cáo này sẽ chỉ xuất hiện trong Công cụ cho nhà phát triển nếu bạn mở iframe trong cửa sổ riêng và mở Công cụ cho nhà phát triển cho cửa sổ đó.
Báo cáo được tạo nhưng không gửi hoặc không nhận được
Nếu bạn có thể thấy một báo cáo trong Công cụ cho nhà phát triển nhưng điểm cuối của bạn không nhận được báo cáo đó thì sao?
- Hãy nhớ sử dụng độ trễ ngắn. Có thể lý do bạn không thấy báo cáo là vì báo cáo đó chưa được gửi!
Kiểm tra cấu hình tiêu đề
Reporting-Endpoints. Nếu có vấn đề với báo cáo, thì báo cáo đã được tạo đúng cách sẽ không được gửi. Trong Công cụ cho nhà phát triển, trạng thái của báo cáo sẽ vẫn làQueued(trạng thái này có thể chuyển sangPending, rồi nhanh chóng quay lạiQueuedkhi có một lần thử gửi) trong trường hợp này. Một số lỗi thường gặp có thể gây ra tình trạng này:Điểm cuối được dùng nhưng chưa được định cấu hình. Ví dụ:
Document-Policy: document-write=?0;report-to=endpoint-1; Reporting-Endpoints: default="https://reports.example/default"
Báo cáo vi phạm Document-Policy phải được gửi đến endpoint-1, nhưng tên điểm cuối này chưa được định cấu hình trong Reporting-Endpoints.
Thiếu điểm cuối
default. Một số loại báo cáo, chẳng hạn như báo cáo về việc ngừng sử dụng và báo cáo can thiệp, sẽ chỉ được gửi đến điểm cuối có tên làdefault. Đọc thêm trong phần Định cấu hình tiêu đề Reporting-Endpoints.Tìm các vấn đề trong cú pháp tiêu đề chính sách, chẳng hạn như thiếu dấu ngoặc kép. Xem thông tin chi tiết.
Kiểm tra để đảm bảo điểm cuối của bạn có thể xử lý các yêu cầu đến.
Đảm bảo rằng điểm cuối của bạn hỗ trợ các yêu cầu kiểm tra trước CORS. Nếu không, thì thiết bị đó không thể nhận báo cáo.
Kiểm thử hành vi của điểm cuối. Để làm như vậy, thay vì tạo báo cáo theo cách thủ công, bạn có thể mô phỏng trình duyệt bằng cách gửi các yêu cầu đến điểm cuối của bạn giống như những yêu cầu mà trình duyệt sẽ gửi. Chạy lệnh sau:
curl --header "Content-Type: application/reports+json" \ --request POST \ --data '[{"age":420,"body":{"columnNumber":12,"disposition":"enforce","lineNumber":11,"message":"Document policy violation: document-write is not allowed in this document.","policyId":"document-write","sourceFile":"https://dummy.example/script.js"},"type":"document-policy-violation","url":"https://dummy.example/","user_agent":"xxx"},{"age":510,"body":{"blockedURL":"https://dummy.example/img.jpg","destination":"image","disposition":"enforce","type":"corp"},"type":"coep","url":"https://dummy.example/","user_agent":"xxx"}]' \ YOUR_ENDPOINTĐiểm cuối của bạn phải phản hồi bằng mã thành công (
200hoặc một mã phản hồi thành công khác2xx). Nếu không, có vấn đề với cấu hình của điểm cuối.
Các cơ chế báo cáo có liên quan
Chỉ báo cáo
Tiêu đề chính sách -Report-Only và Reporting-Endpoints hoạt động cùng nhau.
Các điểm cuối được định cấu hình trong Reporting-Endpoints và được chỉ định trong trường report-to của Content-Security-Policy, Cross-Origin-Embedder-Policy và Cross-Origin-Opener-Policy sẽ nhận được báo cáo khi các chính sách này bị vi phạm.
Bạn cũng có thể chỉ định các điểm cuối được định cấu hình trong Reporting-Endpoints trong trường report-to của Content-Security-Policy-Report-Only, Cross-Origin-Embedder-Policy-Report-Only và Cross-Origin-Opener-Policy-Report-Only.
Họ cũng sẽ nhận được báo cáo khi các chính sách này bị vi phạm.
Mặc dù báo cáo được gửi trong cả hai trường hợp, nhưng tiêu đề -Report-Only không thực thi các chính sách: không có gì bị hỏng hoặc thực sự bị chặn, nhưng bạn sẽ nhận được báo cáo về những gì sẽ bị hỏng hoặc bị chặn.
ReportingObserver
ReportingObserver JavaScript API có thể giúp bạn quan sát các cảnh báo phía máy khách.
ReportingObserver và tiêu đề Reporting-Endpoints tạo ra các báo cáo có giao diện giống nhau, nhưng chúng cho phép các trường hợp sử dụng hơi khác nhau.
Sử dụng ReportingObserver nếu:
- Bạn chỉ muốn theo dõi các tính năng không dùng nữa hoặc các biện pháp can thiệp của trình duyệt.
ReportingObserverhiển thị cảnh báo phía máy khách, chẳng hạn như cảnh báo về việc ngừng sử dụng và các biện pháp can thiệp của trình duyệt, nhưng không giống nhưReporting-Endpoints,ReportingObserverkhông ghi lại bất kỳ loại báo cáo nào khác, chẳng hạn như lỗi vi phạm CSP hoặc COOP/COEP. - Bạn cần phản ứng với những lỗi vi phạm này theo thời gian thực.
ReportingObservercho phép bạn đính kèm một lệnh gọi lại vào một sự kiện vi phạm. - Bạn muốn đính kèm thêm thông tin vào báo cáo để hỗ trợ gỡ lỗi bằng cách sử dụng lệnh gọi lại tuỳ chỉnh.
Một điểm khác biệt nữa là ReportingObserver chỉ được định cấu hình phía máy khách: bạn có thể sử dụng ReportingObserver ngay cả khi không kiểm soát được tiêu đề phía máy chủ và không thể đặt Reporting-Endpoints.
Tài liệu đọc thêm
- Hướng dẫn di chuyển từ Reporting API phiên bản 0 sang phiên bản 1
- ReportingObserver
- Quy cách: Reporting API cũ (phiên bản 0)
- Quy cách: Reporting API mới (phiên bản 1)
Hình ảnh chính của Nine Koepfer / @enka80 trên Unsplash, đã chỉnh sửa. Xin chân thành cảm ơn Ian Clelland, Eiji Kitamura và Milica Mihajlija vì đã xem xét và đưa ra đề xuất về tài liệu này.