Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

Get certified in Microsoft Fabric—for free! For a limited time, the Microsoft Fabric Community team will be offering free DP-600 exam vouchers. Prepare now

Reply
mayank2109
New Member

Content Security Policy error , when embedding the dashboard using Angular

Hi , 

I am getting below error , when i am trying to enbed the dashboard .

Refused to frame 'https://app.powerbi.com/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors https://teams.powerbi.com https://teams.microsoft.com".
 
In the UI , it says resfuse to connect to power BI . 
Please provide the resolution of it.
 
Thanks,
10 REPLIES 10
Erik_TPC
New Member

What solved it for me was not to take the URL from the report, but instead select the option: File --> Embed report --> Website or portal --> copy the top URL.

 

This changes the url from something like this:

https://app.powerbi.com/groups/<Group ID>/reports/<report ID>/ReportSection<Section ID>?experience=power-bi

To something like this:

https://app.powerbi.com/reportEmbed?reportId=<reportID>&autoAuth=true&ctid=<some other ID>

 

Hope this helps,

Erik van Hurck

Projectum | TPC

stevevharris
New Member

I am also getting this error with an iframe within and MVC Razor view: Refused to frame 'https://app.powerbi.com/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self' https://teams.powerbi.com https://teams.microsoft.com https://gov.teams.microsoft.us https://dod.teams.microsoft.us https://outlook.office.com https://outlook-sdf.office.com https://outlook.office365.com https://outlook-sdf.office365.com https://www.office.com https://scuprodprv.www.office.com".

Did anyone resolve this yet?

cl_jpo
New Member

in my case, embedd for customers, we were embedding with https://www.power.... instead of https://app.power.....

v-rzhou-msft
Community Support
Community Support

Hi @mayank2109 

What kind of embedding are you using, app owns data or user owns data?

For reference: What is Power BI embedded analytics?

I find a blog about how to embed power bi report by Angular, and I hope it could help you solve your problem.

For reference: How To Embed Power BI Report In Angular 6

 

Best Regards,
Rico Zhou

 

If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.

Hi @v-rzhou-msft, I have exactly the same problem I am using the latest npm package released by Microsoft.

https://www.npmjs.com/package/powerbi-client-angular

 

Facing exactly the same issue. My Azure AD user has access to the report in the PowerBi platform we can embed it in the app for some reason. We are using the license Premium Per User. So embed for your organization.

 

MicrosoftTeams-image (3).png

 

Maybe I'm missing something on the Workspace or Report settings..

 

When I put an Iframe without using the package or anything I have to sign in twice and the report works in the Angular.

 

Our app has an SSO authentication so with the package I thought the report would be displayed without problems.

 

I attched the image with the exact console error.

 

Thank you for your help!

lbendlin
Super User
Super User

Don't create your "dashboard"  in Teams - create it in the Power BI service directly.

Anonymous
Not applicable

Hey, Did you get the solution? I am also getting same error. I am trying to pull powerBI dashboards to my reactJS based application. I am using powerbi-client-react module.

import { PowerBIEmbed } from 'powerbi-client-react';
 
Please help me out!!!
Anonymous
Not applicable

 
Any of you were able to solve this issue.
 
Anonymous
Not applicable

Helpful resources

Announcements
OCT PBI Update Carousel

Power BI Monthly Update - October 2024

Check out the October 2024 Power BI update to learn about new features.

September Hackathon Carousel

Microsoft Fabric & AI Learning Hackathon

Learn from experts, get hands-on experience, and win awesome prizes.

October NL Carousel

Fabric Community Update - October 2024

Find out what's new and trending in the Fabric Community.