如何在 Azure 静态 Web 应用程序托管的 jekyll 站点上启用跨域框架？

Question

我正在使用 jekyll 构建一个静态网站，并尝试将我的 tableau 公共仪表板嵌入到此网页中。当我尝试将其嵌入到 iframe 中时，出现以下错误，提示我无法嵌入它。我尝试做一些研究，看起来是因为未启用跨源框架。

我尝试将以下部分添加到我的 _config.yml 中，但这不起作用

# Custom headers
  webrick:
    headers:
      Content-Security-Policy: default-src 'none'; script-src 'self'; connect-src 'self'; img-src 'self'; style-src 'self'; 
      X-Frame-Options: ALLOW-FROM https://public.tableau.com

我还尝试在 Azure 上找到一些允许这样做的设置，但我一无所获。

如何启用跨源嵌入以便嵌入此仪表板？

Answer 1

看起来

X-Frame-Options

标头在 tableau.com 服务器上设置为

sameorigin

。这可以防止页面在原始主机以外的页面上的 iframe 中呈现。 这是在服务器上设置的，您无法从客户端修复它。

但是，您可以使用仪表板页面上的“共享”->“嵌入代码”选项从 tableau 嵌入特定仪表板。只需将给定的代码粘贴到您的 jekyll 页面中，它就会创建一个带有仪表板的工作 iframe。