Forum Discussion

DHeijbroek's avatar
DHeijbroek
New Member
1 year ago
Solved

Embed a website into a Power BI report

Dear community,

 

Last week I have tried embedding a website into a Power BI report. I have tried several security settings on the server side, however I kept seeing that PowerBI could not connect to the website. We tried another website that does work https://fast.com. We could not investigate from curl information what needs to be done to make the website embedding visible in a PowerBI report/dashboard. Has anyone experienced with this before and can anyone explain to me how I can make it possible?

I want to start with embedding a simple static website and update iteratively to know where I could run into embedding issues. I want to test this website for now as a start https://dhey.nl/ . The website only consists of one static index.html file and is hosted on a Virtual Machine with nginx. I tried with and without the content security policy header for app.powerbi.com. The attached image shows the console.log for when I included the CSP (also tried without) as follows (I also tried with removing "file:", which I used to test the embedding locally):
frame-ancestors 'self' https://app.powerbi.com https://*.powerbi.com file:

  • Hi DHeijbroek

     


    The message “Refused to frame … because an ancestor violates the Content Security Policy directive ‘frame-ancestors …’” is the browser saying your site told it which parent origins may iframe it, and one of Power BI’s actual ancestors wasn’t on that allow-list. If X-Frame-Options is present (e.g., SAMEORIGIN), that will block framing too.

    Quick solution

    1. Use a dashboard (not a report) and add a Web content tile. Microsoft explains tiles and the Web content option here: Intro to dashboard tiles.
    2. On your website, remove any X-Frame-Options header and send a CSP header that explicitly allows Power BI to frame you, e.g.:
      Content-Security-Policy: frame-ancestors 'self' https://app.powerbi.com https://*.powerbi.com;
      MDN reference for frame-ancestors: MDN.

     

    If you found this helpful, consider giving some Kudos. If I answered your question or solved your problem, mark this post as the solution.

  • Hi DHeijbroek,

    Thank you tayloramy for your response to the query,

    To resolve the issue and enable your website to be embedded in Power BI, please follow these steps:
    Update the X-Frame-Options header

    If your nginx server is setting the X-Frame-Options header to SAMEORIGIN or DENY, this will prevent Power BI from framing your site. Remove this header or adjust it as needed.
    Configure the Content-Security-Policy (CSP) header
    Add a CSP header in your nginx configuration that specifies Power BI domains as allowed frame ancestors.
    For example:
    Content-Security-Policy: frame-ancestors 'self' https://app.powerbi.com https://*.powerbi.com;
    This instructs browsers to permit framing from app.powerbi.com and related subdomains.
    Select the appropriate Power BI embedding feature
    Consider using a dashboard Web Content tile rather than report embedding, as this may offer more flexibility for web content.
    Test your changes
    After updating your configuration, use your browser’s developer tools to verify that the response headers are correctly set and that embedding in Power BI works as intended.

    Power BI

    Sign in to Microsoft Power BI for intuitive data visualization, detailed analytics, and interactive dashboards. Unlock your data's full potential.

     

    Thank you.

6 Replies

  • Hi DHeijbroek

     


    The message “Refused to frame … because an ancestor violates the Content Security Policy directive ‘frame-ancestors …’” is the browser saying your site told it which parent origins may iframe it, and one of Power BI’s actual ancestors wasn’t on that allow-list. If X-Frame-Options is present (e.g., SAMEORIGIN), that will block framing too.

    Quick solution

    1. Use a dashboard (not a report) and add a Web content tile. Microsoft explains tiles and the Web content option here: Intro to dashboard tiles.
    2. On your website, remove any X-Frame-Options header and send a CSP header that explicitly allows Power BI to frame you, e.g.:
      Content-Security-Policy: frame-ancestors 'self' https://app.powerbi.com https://*.powerbi.com;
      MDN reference for frame-ancestors: MDN.

     

    If you found this helpful, consider giving some Kudos. If I answered your question or solved your problem, mark this post as the solution.

  • v-sgandrathi's avatar
    v-sgandrathi
    Icon for Community Support rankCommunity Support

    Hi DHeijbroek,

    Thank you tayloramy for your response to the query,

    To resolve the issue and enable your website to be embedded in Power BI, please follow these steps:
    Update the X-Frame-Options header

    If your nginx server is setting the X-Frame-Options header to SAMEORIGIN or DENY, this will prevent Power BI from framing your site. Remove this header or adjust it as needed.
    Configure the Content-Security-Policy (CSP) header
    Add a CSP header in your nginx configuration that specifies Power BI domains as allowed frame ancestors.
    For example:
    Content-Security-Policy: frame-ancestors 'self' https://app.powerbi.com https://*.powerbi.com;
    This instructs browsers to permit framing from app.powerbi.com and related subdomains.
    Select the appropriate Power BI embedding feature
    Consider using a dashboard Web Content tile rather than report embedding, as this may offer more flexibility for web content.
    Test your changes
    After updating your configuration, use your browser’s developer tools to verify that the response headers are correctly set and that embedding in Power BI works as intended.

    Power BI

    Sign in to Microsoft Power BI for intuitive data visualization, detailed analytics, and interactive dashboards. Unlock your data's full potential.

     

    Thank you.

    • v-sgandrathi's avatar
      v-sgandrathi
      Icon for Community Support rankCommunity Support

      Hi DHeijbroek,

      Just wanted to follow up and confirm that everything has been going well on this. Please let me know if there’s anything from our end.
      Please feel free to reach out Microsoft fabric community forum.

  • Thankyou very much for your quick answers! You can close the question.

    • tayloramy's avatar
      tayloramy
      Icon for Super User rankSuper User

      Hi DHeijbroek,

       

      To close the question, please mark the answer post as the solution. 

       

      If you found this helpful, consider giving some Kudos. If I answered your question or solved your problem, mark this post as the solution.

    • v-sgandrathi's avatar
      v-sgandrathi
      Icon for Community Support rankCommunity Support

      Hi DHeijbroek,

       

      I'm glad the responses helped you resolve the issue.
      If you have any more questions, feel free to reach out to the Community forum. We're happy to assist.

      Thank you.