Search code examples
azurejekylltableau-apiazure-static-web-app

How can I enable cross-origin framing on a jekyll site hosted on an Azure Static Web App?

I'm building a static site using jekyll and I'm trying to embed my tableau public dashboard to this webpage. When I try to embed it in an iframe I get this below error saying that I can't embed it. I've tried to do some research and it looks like it's because cross-origin framing isn't enabled.

enter image description here

I've tried adding the following section to my _config.yml which doesn't work

# 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

I also tried to find some setting on Azure that would allow it but I'm coming up empty.

How can I enable cross-origin embedding so I can embed this dashboard?

Solution

  • Looks like X-Frame-Options header is set to sameorigin on tableau.com server. This prevents the page from being rendered in an iframe on pages other than the original host. This is set on the server and you cannot fix it from the client side.

    However, you can embed a specific dashboard from tableau using Share -> Embed Code option on dashboard page. Just paste the given code in your jekyll page and it should create a working iframe with dashboard.