Embed PowerPoint Presentation with IFrame in angular

Question

I am trying to embed a powerpoint presentation in the powerpoint viewer of Sharepoint Online in an iframe in an angular app (v14). Unfortunately I get the following error message:

Refused to frame 'https://{my}.sharepoint.com/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self' teams.microsoft.com *.teams.microsoft.com *.skype.com *.teams.microsoft.us local.teams.office.com *.powerapps.com *.yammer.com *.officeapps.live.com *.office.com *.stream.azure-test.net *.microsoftstream.com *.dynamics.com *.microsoft.com securebroker.sharepointonline.com".

Here my Code:

  constructor(
    private sanitizer: DomSanitizer
  ) {
    this.trustedUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.externalUrl as string);
  }



<iframe [src]="trustedUrl" width="100%" frameborder="0">This is an embedded <a target="_blank" href="https://office.com">Microsoft Office</a> presentation, powered by <a target="_blank" href="https://office.com/webapps">Office</a>.</iframe>

If I set the url directly without the trustedUrl variable it works:

<iframe [src]="'https://{my}.sharepoint.com/personal/{myuser}/_layouts/15/Doc.aspx?sourcedoc={mypresentationid}&amp;action=embedview'" width="100%" frameborder="0">This is an embedded <a target="_blank" href="https://office.com">Microsoft Office</a> presentation, powered by <a target="_blank" href="https://office.com/webapps">Office</a>.</iframe>

Answer 1

I've found the solution, the code was correct. The Url was wrong, the correct Url is https://{my}.sharepoint.com/personal/{myuser}/_layouts/15/Doc.aspx?sourcedoc={mypresentationid}&action=embedview .

If &action=embedview is missing in the Url, the Error

Refused to frame 'https://{my}.sharepoint.com/' because an ancestor violates the following

occours.