在哪里指定内容安全策略 (CSP)：在后端还是在前端？答案

【问题标题】：Where to specify the Content Security Policy (CSP): on a backend or on a frontend?在哪里指定内容安全策略 (CSP)：在后端还是在前端？
【发布时间】：2021-09-17 15:50:06
【问题描述】：

据我了解，有两种方法可以指定内容安全策略：

在服务器端通过标头：

res.setHeader("content security-policy", "default-src: 'none';")

通过meta-tag 在 HTML 页面中：

<meta content = "default-src 'none';" http-equiv = "Content-Security-Policy" />

我的问题：

这两种技术有什么区别？
只使用其中一个就足够了吗？
我应该使用哪一个？后端、前端还是两者兼而有之？

附：感谢How does Content Security Policy (CSP) work?，我知道什么是 CSP 以及它是如何工作的。然而，我想知道的是在哪里设置 CSP 更好。

【问题讨论】：

这能回答你的问题吗？ How does Content Security Policy (CSP) work?
@j08691，我刚读过这个问题，实际上没有。

标签： content-security-policy

【解决方案1】：

通过 HTTP 标头传递 CSP 是 preferred way。

元标记具有相同的功能，但由于技术原因它不支持某些指令：frame-ancestors、report-uri、report-to 和 sandbox。元标记也不支持Content-Security-Policy-Report-Only。

在 SPA（单页应用程序）中，元标记传统上用于 CSP 交付，因为现在许多主机都允许管理 HTTP 标头。

在 SSR（Server Side Rendering）时，更频繁地使用 HTTP 标头。

您可以使用任何技术上方便的 CSP 交付方法（请记住元标记的限制），但不要同时使用这两种方法。两种政策都会一个接一个地执行，所以如果出现差异，实际上将适用更严格的政策。

请注意：

CSP元标记要放在<head>，否则不起作用。
通过 javascript 更改元标记将导致旧政策和新政策同时生效。
在非 HTML 文件的 CSP 情况下，元标记在技术上不能使用

【讨论】：