如何设置内容安全策略标头？

【问题标题】：How to set content-security-policy header?如何设置内容安全策略标头？
【发布时间】：2020-10-01 10:16:21
【问题描述】：

标题为content-security-policy: frame-ancestors 'self'; 的网站https://www.example.com 无法使用<iframe> 打开

此网站包含一个可共享的 url，如 https://www.example.com/#/shareablelink，应该允许在 <iframe> 中打开，但作为标题 content-security-policy: frame-ancestors 'self'; 也应用于此页面，它没有按预期工作。

有什么办法吗？

它的前端基于 Angular 5+

【问题讨论】：

您能否提供一些示例代码来展示您的尝试？

标签： http-headers content-security-policy x-frame-options

【解决方案1】：

HTTP 标头在后端（服务器）上发布，因此只有网站所有者可以更改这些标头。

使用哈希 # 链接 (https://www.example.com/#/shareablelink) 很棘手：

# 之前的部分由服务器提供服务 - 在点击时发送到服务器并从服务器获得回复（如果您不通过浏览器中的脚本处理 onClick）
# 之后的部分在浏览器中本地提供（通过脚本或内置浏览器导航）并且永远不会发送到服务器

因此，https://www.example.com/#/shareablelink 页面上的 CSP HTTP 标头始终与https://www.example.com/ 上的相同。 #/shareablelink 部分通常是滚动到 '/shareablelink' 锚点，或者可以出于任何目的由 javascript 处理（甚至将 XMLHttpRequest 发送到服务器，获取响应并更改页面内容但不更改 HTTP 标头）

【讨论】：