我最近在我的项目中添加了 CSP 标头。 同时，我也在我的项目中使用 PDFTron webviewer。 如您所知，PDFTron webviewer 是在 iframe 中呈现的，在添加 CSP 标头后，我遇到了错误 - 相关的框架祖先。
问题1如何向 PDFtron 网络查看器添加 frame-ancestors 标头以绕过此错误？
问题2是与跨域相关的第二个错误无法通过将我的域添加到configorigin.txt 来修复，它与 csp 标头设置有关吗？
【问题讨论】：
标签： reactjs iframe next.js content-security-policy pdftron
至问题 1： 只需将 frame-ancestors 'none' 更改为 frame-ancestors 'self'（如果在您的特定浏览器中，'self' 令牌不包含 localhost:port_number，则更改为 frame-ancestors localhost:*）以允许嵌入PDF 网页浏览器。
致问题 2： 我认为第二个错误与 CSP 相关（CSP 阻塞的副作用），因为 localhost 不应该是跨域资源，因为主页是使用同一主机加载的名称和端口号http://localhost:3000。
【讨论】：
frame-ancestors 标头添加到 pdftron webviewer，因为它嵌入在 iframe 中，我要问的是如何/在哪里可以在 pdftron 项目中添加标头。我尝试将它作为元标记添加到 index.html，但它不起作用。
frame-ancestors 在元标记中不受支持，但仅在 HTTP 标头中。 (2) 您已经发布了 CSP HTTP 标头，因为您在浏览器控制台中看到了阻塞。检查next-secure-headers/next-safe 包是否存在或headers() 函数调用上的next.config.js 文件-这些可以公开CSP 标头。你必须在那里修改frame-ancestors。
frame-ancestors标头应该设置在iframe里面，我错了吗？我试图更改 next.config.js 中的标头值，但结果是相同的“拒绝框架 localhost .... frame-ancestors: none” - 意味着它不适用于 iframe。
frame-ancestors 标头应该设置在 iframe 中。 “refused to frame localhost .... frame-ancestors: none”表示您没有更改 CSP 标头。更改后在违规消息中应为frame-ancestors 'self' 或frame-ancestors localhost:*。