SharePoint Embedded: Is it possible to embed Word editing into an iframe?

[MykolaKanunnikov]

What type of issue is this?

Question

What SharePoint development model, framework, SDK or API is this about?

not applicable

Target SharePoint environment

other (enter in the "Additional environment details" area below)

What browser(s) / client(s) have you tested

• 💥 Internet Explorer
• 💥 Microsoft Edge
• 💥 Google Chrome
• 💥 FireFox
• 💥 Safari
• mobile (iOS/iPadOS)
• mobile (Android)
• not applicable
• other (enter in the "Additional environment details" area below)

Additional environment details

No response

Issue description

It would be nice to be able to create a link to the office file stored in the SPE container that:

1. opens Microsoft 365 for the web in edit mode; AND
2. is embeddable in an iframe

POST /drives/{{ContainerId}}/items/{{FileId}}/preview returns a link that works nicely with iframes, but its content is view-only. Using in iframe a webUrl from GET /drives/{{ContainerId}}/items/{{FileId}} doesn't work (and seems it's not expected to work like that).

Can we get a link like the preview one, but with content editable in iframe?

[kbeverforden]

We built our own UI so our users don't have to go to the backend Site Contents > Document Library page to manage their files. We use PnP JS to query the documents to get their ID and Name. Once you have those 2 things you can do something like this. This assumes the file being shown in the iframe exists on the same SharePoint site where the iframe exists. Not sure if this works for your scenario

<iframe
                src="https://xxxxx.sharepoint.com/:x:/r/sites/SiteName/_layouts/15/Doc.aspx?sourcedoc={${document.id}}&file=${document.name}&action=default&mobileredirect=true"
                frameBorder="0"
                allowFullScreen
            >
            </iframe>

The iframe will show an editor like this for Word, Excel, etc (Microsoft file types). Multiple people can edit the file at once and edits are automatically saved without having to click save. I'm not sure if this is recommend but we found that it works and haven't had any issues.

[MykolaKanunnikov]

@kbeverforden Thanks for your contribution

In our scenario the iframe exists on the different site, not even sharepoint. So, link as in your example results in CSP error like this:
Framing 'https://{{company}}.sharepoint.com/' 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". The request has been blocked.

[Ashlesha-MSFT]

embedding Microsoft Word (or other Office apps) in edit mode within an iframe hosted outside of SharePoint or Microsoft 365 is not supported by design. Office for the web enforces strict Content Security Policy (CSP) rules that block cross-origin framing for editable experiences. While the Preview API supports iframe embedding, it is intentionally limited to view-only mode. Opening the document in a new tab using the provided webUrl remains the recommended approach for editing.

[Ashlesha-MSFT]

Since this is expected platform behavior, we’ll close this issue. Please feel free to open a new request if you have feedback or feature suggestions.