topic Re: Content Security Policy error , when embedding the dashboard using Angular in Developer

Content Security Policy error , when embedding the dashboard using Angular

mayank2109 — Mon, 23 Aug 2021 13:09:24 GMT

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,

Re: Content Security Policy error , when embedding the dashboard using Angular

lbendlin — Tue, 24 Aug 2021 20:12:17 GMT

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

Re: Content Security Policy error , when embedding the dashboard using Angular

Anonymous — Thu, 26 Aug 2021 09:46:55 GMT

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.

Re: Content Security Policy error , when embedding the dashboard using Angular

fullstack-dev — Thu, 30 Sep 2021 15:21:10 GMT

Hi @Anonymous, 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.

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!

Re: Content Security Policy error , when embedding the dashboard using Angular

Anonymous — Mon, 28 Mar 2022 10:02:54 GMT

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!!!

Re: Content Security Policy error , when embedding the dashboard using Angular

Anonymous — Mon, 28 Mar 2022 10:05:10 GMT

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".

This is the error am getting

Re: Content Security Policy error , when embedding the dashboard using Angular

Anonymous — Mon, 28 Mar 2022 10:06:13 GMT

@Anonymous 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". please help!!

Re: Content Security Policy error , when embedding the dashboard using Angular

Anonymous — Wed, 06 Apr 2022 09:40:50 GMT

@lbendlin @mayank2109 @Anonymous @fullstack-dev ,

Any of you were able to solve this issue.

Re: Content Security Policy error , when embedding the dashboard using Angular

cl_jpo — Tue, 28 Jun 2022 17:14:57 GMT

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

Re: Content Security Policy error , when embedding the dashboard using Angular

stevevharris — Thu, 08 Dec 2022 08:50:08 GMT

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?

Re: Content Security Policy error , when embedding the dashboard using Angular

Erik_TPC — Thu, 15 Jun 2023 08:33:25 GMT

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

Re: Content Security Policy error , when embedding the dashboard using Angular

Anonymous — Thu, 27 Feb 2025 16:19:12 GMT

I am facing the exact same error, was anyone able to find any solution ? i tried all in this thread, none worked.

Re: Content Security Policy error , when embedding the dashboard using Angular

DeadHeadinBham — Fri, 18 Jul 2025 15:43:21 GMT

I was facing this error too, but the fix turned out to be a simple thing... I was using the wrong iFrame name. I copied my JS code from a playground proof-of-concept environment, but I used a different name for the iFrame control in my dev environment. I updated the iFrame control name and it worked.

My point is to double check the iFrame control name, the JS function name, the report id, etc. The little things get me sometime.

Re: Content Security Policy error , when embedding the dashboard using Angular

DeadHeadinBham — Fri, 18 Jul 2025 15:44:33 GMT

You probably already fixed your problem, but see my post above. Sometimes it's the little things.