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

Nirmal Mudaliar 5 Reputation points
2025-06-12T13:11:31.8266667+00:00

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

We are seeking official guidance or confirmation on the following:

Is there any supported method to embed editable Excel files from OneDrive/SharePoint inside an <iframe> on a custom (non-Microsoft) domain?

Can our domain be approved, whitelisted, or trusted to bypass this CSP restriction?

Are there licensing tiers, SharePoint tenant-level settings, or enterprise agreements that allow iframe embedding?

Microsoft 365 and Office | SharePoint | Development
0 comments No comments

1 answer

Sort by: Most helpful
  1. Hin-V 16,830 Reputation points Microsoft External Staff Moderator
    2025-06-12T14:49:02.1733333+00:00

    Dear @Nirmal Mudaliar
    Thank you for posting your question in Microsoft Q&A.  

    Based on your inquiry, we understand that you need to embedded your Excel file in OneDrive within an <iframe>  .We will be glad to assist you with this 

    Here is my following respond for your question 

    1.Is there any supported method to embed editable Excel files from OneDrive/SharePoint inside an <iframe> on a custom (non-Microsoft) domain? 

    Currently, I have not found any article from Microsoft that advises on setting editable mode in a custom application. Of course, your clients can make changes on your website, but these changes won't be reflected in the source file on OneDrive. 

    You can refer via this link: Linked objects and embedded objects - Microsoft Support 

    undefined

    2.Can your domain be approved, whitelisted, or trusted to bypass this CSP restriction? 

    The core issue you're facing is Microsoft's Content Security Policy (CSP). More specifically, the frame-ancestors directive within that CSP is very strict and pre-defined by Microsoft. 

    It means: 

    • Microsoft has hard-coded a strict whitelist of domains that are permitted to embed Office Online applications (like Excel Online) within an <iframe>. 
    • This list only includes Microsoft's own domains (e.g., teams.microsoft.com, *.office.com, *.sharepoint.com, etc.). 
    • Your custom application's domain is not on this list. 

    3.Are there licensing tiers, SharePoint tenant-level settings, or enterprise agreements that allow iframe embedding? 
    By design, SharePoint Online doesn’t allow to access its pages via <iframe > from an external application. This header is a critical security measure designed to prevent security vulnerabilities such as clickjacking. 

    In my perspective, CSP  with great care to safeguard your main data and private information from being compromised or stolen. Due to this fundamental security objective, Microsoft currently may not supply alternative solution to the CSP for your custom domain. 

    Please correct me if I misunderstand your request. 

    If you need further assistance, please let us know.  


    If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".     

    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread. 

    Was this answer helpful?

    1 person found this answer helpful.

Your answer

Answers can be marked as 'Accepted' by the question author and 'Recommended' by moderators, which helps users know the answer solved the author's problem.