Others

How to Embed Office Documents in a React Website

Maira Mehtab Sep 20, 2026 869 views

Question details

The user needs to display an Office document inside a React website using an iframe, but the standard browser URL fails to load.

Product: Microsoft Office
Device & OS: not provided
Scenario: Integrating a document viewer within a custom React web application via iframe.
Observed behavior: Using the standard browser URL in the iframe results in a failure to load the document; only the specific URL generated through the 'Share > Embed' menu functions correctly.

Before you start

Verify that your React application's Content Security Policy (CSP) permits embedding external iframes and ensure you have the appropriate sharing permissions for the document.

Solution 1Recommended

Use the Designated Embed URL

Standard document URLs cannot be embedded due to security restrictions. You must generate a dedicated embed link.

Web browsers block standard Office URLs in iframes due to the 'X-Frame-Options' security header, which prevents clickjacking. To bypass this, Microsoft provides a specific embedding feature that generates an iframe-friendly URL.

Open the document online

Navigate to your document in the Office Online interface via your web browser.

Access the embed menu

Click on 'File' in the top ribbon, select 'Share', and then choose 'Embed'.

Copy the embed code

A sidebar or modal will appear with the embed code. Copy the URL found within the 'src' attribute of the generated iframe code.

Update your React component

Paste this new URL into the 'src' attribute of the iframe within your React website's codebase.

Permissions Check: Ensure that the sharing settings for the embedded document are set to 'Anyone with the link can view' if your React website is publicly accessible.

Solution 2

Consult the Office Development Q&A Forum

If you are programmatically generating URLs or facing deeper integration issues, reach out to Microsoft specialists.

Free Microsoft Office alternative

Easily Share and Manage Documents with WPS Office

If strict embedding policies and iframe restrictions are slowing down your workflow, try WPS Office. It provides an intuitive interface for viewing, editing, and sharing documents effortlessly, without the complex configuration hurdles.

1. Download WPS Office: Install the free WPS Office suite on your preferred device.
2. Open your file: Load your existing Word, Excel, or PowerPoint document into the application.
3. Share instantly: Use the 'Share' button to instantly generate a view-only or editable web link for easy distribution.

Generate easily accessible document sharing links in one click.Fully compatible with Microsoft Office formats, including DOCX, XLSX, and PPTX.Lightweight suite designed for fast performance on any operating system.Free to use with a familiar, user-friendly interface.

microsoft office alternative - wps office

Frequently Asked Questions

Why does my Office document show a blank screen or 'refused to connect' error in a React iframe?

This happens because standard Office document URLs are protected by the 'X-Frame-Options' HTTP header set to 'SAMEORIGIN'. This security measure prevents the site from being embedded on external domains to protect against clickjacking attacks. You must use the designated 'Embed' URL to bypass this.

Can I programmatically generate embed URLs for Office documents in my React app?

Yes, but you cannot simply concatenate strings to form the URL. You need to use the Microsoft Graph API to create a sharing link with the correct permissions, which will return a URL that is permitted to be rendered inside an iframe.

Are there specialized React libraries for rendering Office documents instead of using an iframe?

Yes, there are third-party NPM packages like 'react-file-viewer' and 'react-doc-viewer' that can render documents directly in the DOM. However, these often require direct access to the raw file (like a .docx or .xlsx file URL) rather than a hosted web viewer URL.

Office Quick Solutions