我找到了一个解决方案:
<meta http-equiv="Content-Security-Policy" content="[CSP_CONTENT_HERE]">
<script nonce="[CSP_NONCE_HERE]">
document.addEventListener('securitypolicyviolation', function (event) {
console.log(event)
let config = JSON.parse('{"keys" : ["blockedURI", "columnNumber", "disposition", "documentURI", "effectiveDirective", "lineNumber", "originalPolicy", "referrer", "sample", "sourceFile", "statusCode", "violatedDirective"],"reportUri" : "[YOUR_REPORT_URI_HERE]"}');
let reportKeys = {'blockedURI':'blocked-uri', 'columnNumber':'column-number', 'documentURI':'document-uri', 'effectiveDirective':'effective-directive', 'lineNumber':'line-number', 'originalPolicy':'original-policy', 'sourceFile':'source-file', 'statusCode':'status-code', 'violatedDirective':'violated-directive'};
let json = {'csp-report': {}};
for (let i = 0, len = config.keys.length; i < len; i++) {
if (event[config.keys[i]] !== 0 && event[config.keys[i]] !== '') {
json['csp-report'][(reportKeys[config.keys[i]] ? reportKeys[config.keys[i]] : config.keys[i])] = event[config.keys[i]];
}
}
let xhr = new XMLHttpRequest();
xhr.open('POST', config.reportUri, true);
xhr.setRequestHeader('content-type', 'application/csp-report');
xhr.send(JSON.stringify(json));
});
</script>
因此,您不必设置某种报告 uri 或配置报告,而是使用 JS 事件侦听器securitypolicyviolation
。从事件中,您可以获取报告可能感兴趣的所有参数,并将它们发送到所需的报告 URI。
脚本取自这里,但我不喜欢添加另一个外部脚本的想法:https://report-uri.github.io/report-uri-js-demo/ https://report-uri.github.io/report-uri-js-demo/
只需看一下占位符即可:
- [CSP_CONTENT_HERE]:您的 CSP 定义
- [YOUR_REPORT_URI_HERE]:您的报告 URI(例如 Sentry)
- [CSP_NONCE_HERE]:您的 CSP 随机数(如果您使用 CSP 随机数)。