CSPViolationReport: columnNumber 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 columnNumber của từ điển CSPViolationReport cho biết vị trí ký tự trong dòng tệp nguồn đã kích hoạt vi phạm Chính sách bảo mật nội dung (CSP).
Thuộc tính này được sử dụng cùng với các thuộc tính CSPViolationReport.sourceFile và CSPViolationReport.lineNumber, cùng nhau cung cấp vị trí chính xác trong nguồn gây ra vi phạm.
Lưu ý rằng trình duyệt trích xuất giá trị từ đối tượng toàn cục của tệp kích hoạt vi phạm. Nếu tài nguyên kích hoạt vi phạm CSP không được tải, giá trị sẽ là null. Xem CSPViolationReport.sourceFile để biết thêm thông tin.
Giá trị
Một số nguyên chứa số cột đã kích hoạt vi phạm, hoặc null.
Ví dụ
Vi phạm CSP script nội tuyến
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.
HTML
Tệp HTML bên dưới sử dụng phần tử <meta> để đặt default-src của Content-Security-Policy thành self, cho phép tải script và các tài nguyên khác từ cùng nguồn gốc, 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.
<!doctype html>
<html lang="vi">
<head>
<meta
http-equiv="Content-Security-Policy"
content="default-src 'self'; report-to csp-endpoint" />
<meta
http-equiv="Reporting-Endpoints"
content="csp-endpoint='https://example.com/csp-reports'" />
<script src="main.js"></script>
<title>CSP: Violation due to inline script</title>
</head>
<body>
<h1>CSP: Violation due to inline script</h1>
<script>
const int = 4;
</script>
</body>
</html>
JavaScript (main.js)
Tài liệu 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 tệp, dòng và cột của vi phạm vào console.
// main.js
const observer = new ReportingObserver(
(reports, observer) => {
const cspViolationBody = reports[0].body;
console.log(`sourceFile: ${cspViolationBody.sourceFile}`);
console.log(`lineNumber: ${cspViolationBody.lineNumber}`);
console.log(`columnNumber: ${cspViolationBody.columnNumber}`);
},
{
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ả
Bạn có thể thử ví dụ này bằng cách sử dụng máy chủ cục bộ. Sao chép mã trên vào test/index.html và test/main.js và chạy máy chủ trong thư mục gốc. Giả sử địa chỉ của máy chủ cục bộ là http://127.0.0.1:9999, bạn có thể tải tệp HTML từ http://127.0.0.1:9999/test/ (hoặc http://127.0.0.1:9999/test/index.html).
Với cài đặt trên, đầu ra log trên Chrome là:
sourceFile: http://127.0.0.1:9999/test/ lineNumber: 15 columnNumber: 0
Kết quả tương tự trên Firefox:
sourceFile: http://127.0.0.1:9999/test/ lineNumber: 15 columnNumber: 13
Lưu ý rằng số cột khác nhau giữa hai trình duyệt. Chrome luôn báo cáo 0. Giá trị trên Firefox đại diện cho vị trí của ký tự đầu tiên sau cuối thẻ mở <script>.
Thông số kỹ thuật
| Thông số kỹ thuật |
|---|
| Content Security Policy Level 3 # reporting |