'%3e%3cpath%20d='M8%200C12.4183%200%2016%203.58172%2016%208C16%2012.4183%2012.4183%2016%208%2016C3.58172%2016%200%2012.4183%200%208C0%203.58172%203.58172%200%208%200ZM11.6162%204.38379C11.2257%203.99337%2010.5927%203.99338%2010.2021%204.38379L8%206.58594L5.79785%204.38379C5.40732%203.99334%204.77429%203.99329%204.38379%204.38379C3.99331%204.77429%203.99335%205.40733%204.38379%205.79785L6.58594%208L4.38379%2010.2021C3.99348%2010.5927%203.99341%2011.2257%204.38379%2011.6162C4.77426%2012.0066%205.40734%2012.0065%205.79785%2011.6162L8%209.41406L10.2021%2011.6162C10.5927%2012.0066%2011.2257%2012.0067%2011.6162%2011.6162C12.0067%2011.2257%2012.0066%2010.5927%2011.6162%2010.2021L9.41406%208L11.6162%205.79785C12.0066%205.40735%2012.0066%204.77429%2011.6162%204.38379Z'%20fill='%23080E17'%20fill-opacity='0.46'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_3761_713'%3e%3crect%20width='16'%20height='16'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e)
How to Securely Embed a SharePoint File or PDF in an iframe
Question details
The user needs to embed a SharePoint file or PDF into a website or React application using an iframe, but encounters a Content Security Policy (CSP) frame-ancestors error.
- Product
- SharePoint Online
- Device & OS
- not provided
- Scenario
- Developing a website or React application that needs to display a shared or public SharePoint file or PDF to specific audiences.
- Observed behavior
- The SharePoint file URL opens correctly in a standard web browser but fails to load inside an iframe due to CSP restrictions.
Ensure you have site owner or admin privileges for the SharePoint site hosting the file, and that you have access to modify the source code of your website or React application.
Use SharePoint's Built-in Embed Feature
Direct file URLs usually trigger CSP errors in iframes. Using Microsoft's official embed code feature generates a URL specifically designed for external embedding.
SharePoint Online enforces a strict Content Security Policy (CSP) that includes a 'frame-ancestors' directive. This intentionally blocks external domains from rendering its pages or files in standard iframes to prevent clickjacking attacks.
Navigate to your file in SharePoint or OneDrive for Business and open it in the web browser (e.g., Word for the Web or the built-in PDF viewer).
Click on 'File' in the top-left menu, select 'Share', and then choose 'Embed'.
A sidebar will appear with an automatically generated HTML iframe snippet. Copy this code.
Paste this generated snippet directly into your website's HTML or adapt it for your React component instead of manually constructing the iframe URL.
Configure SharePoint HTML Field Security
If you are embedding the file on an approved corporate domain, you can configure SharePoint site settings to permit iframes specifically for that domain.
Easily Manage and Share PDF Documents with WPS Office
Tired of dealing with complex SharePoint embedding errors and strict Content Security Policies? WPS Office provides a lightweight, user-friendly alternative for creating, managing, and sharing Office and PDF files. You can effortlessly generate web-friendly sharing links that avoid strict iframe restrictions.
- 1. Download and Install: Get WPS Office from the official website and install it on your Windows, Mac, or Linux device.
- 2. Open Your File: Launch the application and open the PDF or Office document you need to distribute.
- 3. Share via Link: Click the 'Share' button in the top right corner to instantly generate a secure, easy-to-access link for your users.
Frequently Asked Questions
Why do I get a 'refused to display' error when embedding a SharePoint PDF?
This happens because Microsoft SharePoint sets a Content Security Policy (CSP) header with a 'frame-ancestors' directive. This security measure intentionally blocks unauthorized external websites from rendering the file in an iframe to prevent malicious clickjacking attacks.
Can I embed a SharePoint file for users who do not have Microsoft accounts?
Yes, but only if your organization's SharePoint sharing policies permit 'Anyone with the link' (anonymous sharing). You must generate an anonymous link and use that specific URL within your embed code snippet.
Is there a React package to bypass SharePoint iframe restrictions?
No client-side NPM package can bypass the server-side CSP headers sent by Microsoft. You must either use the official SharePoint generated embed code, fetch the file securely via the Microsoft Graph API, or adjust your SharePoint domain HTML Field Security settings.
How do I natively display a PDF from SharePoint without the standard web viewer?
Direct iframe embedding of the raw PDF file stream is generally blocked. To display the PDF natively, you will need to authenticate and download the file via Microsoft Graph API on your server backend, then serve that file directly to the frontend React component or website.
