内容安全策略问题…iFrame和内联样式_Iframe_Bootstrap 4_Content Security Policy_Inline Styles

内容安全策略问题…iFrame和内联样式

iframe bootstrap-4

内容安全策略问题…iFrame和内联样式,iframe,bootstrap-4,content-security-policy,inline-styles,Iframe,Bootstrap 4,Content Security Policy,Inline Styles,我有一个HTML/EJS网页，标题标签中有以下内容安全策略： <meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' 'unsafe-inline' https://maxcdn.bootstrapcdn.com https://fonts.googleapis.com; frame-src https://externalpage.com

我有一个HTML/EJS网页，标题标签中有以下内容安全策略：

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' 'unsafe-inline' https://maxcdn.bootstrapcdn.com https://fonts.googleapis.com; frame-src https://externalpage.com/">

可以看出，为了将外部iframe加载到页面中，我已经为“framesrc”声明了一个URL。然而，这是不起作用的。错误如下：

<iframe width="256" height="256" style="display:inline-block;border:none;" src="//externalpage.com/ect/long/remainder/of/url/link/here</iframe>

“拒绝诬陷”https://externalpage.com/'因为它违反了以下内容安全策略指令：“default src'self'”。请注意，未显式设置'frame src'，因此将'default src'用作回退。”

iframe类似于以下内容：

<iframe width="256" height="256" style="display:inline-block;border:none;" src="//externalpage.com/ect/long/remainder/of/url/link/here</iframe>

看起来您有两个不同的CSP—第一个通过HTTP头，第二个通过meta标记
HTTP头中的内容安全策略具有更严格的规则，因此实际上由谁来执行锁
检查HTTP头中是否提供了CSP（is教程）
类似于
的多方案URL意味着在HTTP:-页面上它将是
，在HTTPS:-
（浏览器使用同一来源策略自行添加方案）。

因此，您需要在不使用scheme的情况下使用frame src externalpage.com
。

在HTTP:-页面上，它将是frame srchttp://externalpage.com
和框架srchttps://externalpage.com
在HTTPS:pages上。
看起来您有两个不同的CSP-第一个通过HTTP头，第二个通过meta标记
HTTP头中的内容安全策略具有更严格的规则，因此实际上由谁来执行锁
检查HTTP头中是否提供了CSP（is教程）
类似于
的多方案URL意味着在HTTP:-页面上它将是
，在HTTPS:-
（浏览器使用同一来源策略自行添加方案）。

因此，您需要在不使用scheme的情况下使用frame src externalpage.com
。

在HTTP:-页面上，它将是frame srchttp://externalpage.com
和框架srchttps://externalpage.com
在HTTPS:pages上。
感谢您的回复。我觉得它很有用。我已经使用您提供的方法检索了HTTP响应头。这个顾客服务提供商来自哪里？我正在使用我的本地主机，所以我不明白该CSP是如何设置的？还有，更重要的是…我如何超越这个CSP，以替换我在meta标签中设置的内容？从我所看到的，HTTP头提供了一个更严格的CSP…？我还尝试在页面使用的外部.js文件中创建一个脚本对象。我仍然得到该脚本的CSP阻塞。我本以为这会被称为“脚本src‘self’”，但显然不是。因此，“自我”指令到底应该允许什么？我知道它也不允许“内联脚本”…如果无法处理“内联”和“外部”脚本，我应该如何解决此问题？？？再次感谢您提供的信息。我们需要知道您在后端使用什么软件。一些自动设置默认CSP头（例如头盔4）。'self'
标记可能有点棘手-通常意味着相同的源策略（加载页面的相同方案/主机名/端口号）。在CSP3浏览器中，'self'
将http:
方案扩展到http:https:
和。“我已尝试创建脚本对象”-如果使用createElement（'SCRIPT'）
创建…
，它将被视为内联脚本。
的创建是外部脚本。再次感谢您的回复。我使用的是Node/Express，我还使用了Helmet模块……也许这就是为什么我的CSP是通过HTTP头创建的，并按原样设置的。我将移除头盔，看看这对CSP有什么影响。我相信我也可以直接在Node.js本身中形成CSP…我必须对此进行研究。是的，我的external.js文件尝试使用“createElement（'script'）创建脚本元素。我在external.js文件中编写了该代码，该文件使用“script src'=/path/to/my/external/js/file”调用“…所以我仍然不明白为什么它会被认为是内联的…”。。。？再次感谢您提供的有用信息。谢谢您的回复。我觉得它很有用。我已经使用您提供的方法检索了HTTP响应头。这个顾客服务提供商来自哪里？我正在使用我的本地主机，所以我不明白该CSP是如何设置的？还有，更重要的是…我如何超越这个CSP，以替换我在meta标签中设置的内容？从我所看到的，HTTP头提供了一个更严格的CSP…？我还尝试在页面使用的外部.js文件中创建一个脚本对象。我仍然得到该脚本的CSP阻塞。我本以为这会被称为“脚本src‘self’”，但显然不是。因此，“自我”指令到底应该允许什么？我知道它也不允许“内联脚本”…如果无法处理“内联”和“外部”脚本，我应该如何解决此问题？？？再次感谢您提供的信息。我们需要知道您在后端使用什么软件。一些自动设置默认CSP头（例如头盔4）。'self'
标记可能有点棘手-通常意味着相同的源策略（加载页面的相同方案/主机名/端口号）。在CSP3浏览器中，'self'
将http:
方案扩展到http:https:
和。“我已尝试创建脚本对象”-如果使用createElement（'SCRIPT'）
创建…
，它将被视为内联脚本。
的创建是外部脚本。再次感谢您的回复。我使用的是Node/Express，我还使用了Helmet模块……也许这就是为什么我的CSP是通过HTTP头创建的，并按原样设置的。我将移除头盔，看看这对CSP有什么影响。我相信我也能形成