Unable to Embed OneDrive Shareable Link in iFrame due to CSP Restrictions

Hi,

Objective:
We want to embed an Excel file (hosted on OneDrive for Business) within an <iframe> inside our Angular web application. The user should be able to:

• View the Excel file inside the iframe.
• Edit the content directly in-place.
• Save changes back to the original file in OneDrive.

Architecture & Authentication Flow:

We explored two approaches:

1. Client-Side (Angular) Direct Graph API Access via Application Permissions

• We attempted to obtain a Microsoft Graph access token directly from the Angular app using https://login.microsoftonline.com/{tenant}/oauth2/v2.0/token.
• However, this call fails with a CORS (Cross-Origin Resource Sharing) error, which prevents the token exchange in the browser.
• This is due to Microsoft not allowing CORS access to token endpoints for confidential flows from client-side applications for security reasons.
• We found no configuration or setting in Azure Entra (Microsoft Entra ID) that allows bypassing this.

2. Server-Side Graph API Access via Application Permissions

To work around the CORS limitation and meet our goal of centralized company-owned file management, we shifted to the application permission flow on the backend:

• Our server (Node.js/.NET) uses a client credentials flow to acquire an app token.
• It performs the following tasks:
  1. Uploads the Excel file to a company OneDrive location.
  2. Generates a shareable editable link via the Microsoft Graph API (/createLink or /createUploadSession).
  3. Sends that link to the Angular client to render the file.

Issue: iFrame Embedding Blocked by Microsoft CSP

When we attempt to embed the shareable Excel URL into an <iframe> on the Angular page, the browser blocks the request with the following error:

Refused to frame 'https://some-link.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 teams.cloud.microsoft *.office365.com goals.cloud.microsoft *.powerapps.com *.powerbi.com *.yammer.com engage.cloud.microsoft word.cloud.microsoft excel.cloud.microsoft powerpoint.cloud.microsoft *.officeapps.live.com *.office.com *.microsoft365.com m365.cloud.microsoft *.cloud.microsoft *.stream.azure-test.net *.dynamics.com *.microsoft.com onedrive.live.com *.onedrive.live.com securebroker.sharepointonline.com".

Is there any way to achieve our goal?