如何在Azure静态Web应用的Jekyll站点启用跨源嵌入以嵌入Tableau仪表盘？

一、修正本地开发环境的Jekyll配置 #

你之前在_config.yml里的配置存在两个关键问题：

1. X-Frame-Options: ALLOW-FROM已被主流浏览器废弃，现代浏览器优先通过Content-Security-Policy（CSP）的frame-src指令控制iframe嵌入权限。
2. 原有CSP规则过于严格，未允许Tableau Public的域名，导致嵌入请求被拦截。

修改_config.yml中的WeBrick配置如下：

# Custom headers for local development (WeBrick)
webrick:
  headers:
    Content-Security-Policy: >-
      default-src 'self'; 
      script-src 'self' https://public.tableau.com; 
      connect-src 'self' https://public.tableau.com; 
      img-src 'self' https://public.tableau.com data:; 
      style-src 'self' 'unsafe-inline' https://public.tableau.com; 
      frame-src https://public.tableau.com;
    # 移除X-Frame-Options，用CSP的frame-src替代

注：添加'unsafe-inline'是兼容Tableau嵌入脚本的内联样式需求，若后续确认无依赖可移除；data:用于允许Tableau加载base64格式的图片资源。

保存配置后重启Jekyll本地服务（bundle exec jekyll serve），本地环境的iframe嵌入即可正常工作。

二、Azure部署环境的配置 #

部署到Azure后，Jekyll生成的是静态文件，WeBrick的配置不再生效，需在Azure服务中直接配置HTTP响应头，分两种常见托管场景处理：

场景1：Azure Static Web Apps #

1. 登录Azure门户，进入你的Static Web Apps资源
2. 左侧导航栏选择配置 > 响应头
3. 点击添加，新增以下响应头：
   • 名称：Content-Security-Policy
     值：default-src 'self'; script-src 'self' https://public.tableau.com; connect-src 'self' https://public.tableau.com; img-src 'self' https://public.tableau.com data:; style-src 'self' 'unsafe-inline' https://public.tableau.com; frame-src https://public.tableau.com;
   • 名称：X-Frame-Options（可选，兼容旧版本浏览器）
     值：ALLOWALL

场景2：Azure App Service #

1. 根据部署环境创建对应配置文件，提交到代码仓库后重新部署：
   • Linux环境：在Jekyll站点根目录创建.htaccess文件：

     <IfModule mod_headers.c>
       Header set Content-Security-Policy "default-src 'self'; script-src 'self' https://public.tableau.com; connect-src 'self' https://public.tableau.com; img-src 'self' https://public.tableau.com data:; style-src 'self' 'unsafe-inline' https://public.tableau.com; frame-src https://public.tableau.com;"
       Header set X-Frame-Options "ALLOWALL"
     </IfModule>
     

   • Windows环境：在Jekyll站点根目录创建web.config文件：

     <?xml version="1.0" encoding="UTF-8"?>
     <configuration>
       <system.webServer>
         <httpProtocol>
           <customHeaders>
             <add name="Content-Security-Policy" value="default-src 'self'; script-src 'self' https://public.tableau.com; connect-src 'self' https://public.tableau.com; img-src 'self' https://public.tableau.com data:; style-src 'self' 'unsafe-inline' https://public.tableau.com; frame-src https://public.tableau.com;" />
             <add name="X-Frame-Options" value="ALLOWALL" />
           </customHeaders>
         </httpProtocol>
       </system.webServer>
     </configuration>
     

三、验证嵌入代码 #

确保你的Tableau Public嵌入代码格式正确，示例如下：

<iframe src="https://public.tableau.com/views/YourDashboardName/YourView?:language=en-US&:display_count=n&:origin=viz_share_link" width="800" height="600" frameborder="0"></iframe>

内容的提问来源于stack exchange，提问作者MyNameHere