SharePoint: Non-core OneDrive types cannot be embedded

[r-a-y]

When using SharePoint/Office 365, it appears items that are not a core OneDrive type (Word, Powerpoint, Excel, Visio) will not embed properly due to a cross-domain iframe request restriction:

• https://docs.microsoft.com/en-us/sharepoint/troubleshoot/security/cross-domain-iframe-requests-are-blocked
• https://github.com/MicrosoftDocs/OfficeDocs-Support/issues/1170

So basically any file like an image, audio or PDF will not work without further SharePoint configuration. This also includes OneNote.

There's a SharePoint UserVoice suggestion here that is worth keeping an eye on: https://sharepoint.uservoice.com/forums/329214-sites-and-collaboration/suggestions/37212052-ability-to-use-frame-iframe-object-embed

[r-a-y]

As a workaround, I looked into two things:

1. Using the OneDrive preview URL for embedding: https://docs.microsoft.com/en-us/graph/api/driveitem-preview?view=graph-rest-1.0

   This works well, however I found that the preview URLs expire after only five minutes.

2. Using the thumbnail of the OneDrive item (https://docs.microsoft.com/en-us/graph/api/driveitem-list-thumbnails?view=graph-rest-1.0) and linking to the item

   This works as well, but suffers from a similar problem as the preview URLs. The thumbnails expire within 24 hours. Thumbnails only appear to work for images and PDFs. Audio and OneNote files do not have thumbnails.

If we wanted to refresh either the preview URL or thumbnail, we'd have to ask the user to authenticate separately at least once (similar to how we tell a user to allow us to access their GDrive). Then, whenever either the preview URL or thumbnail expires, we would have to fetch the new URL on the user's behalf. The Azure app would also need to add additional API permissions so we can make these calls.

The alternative to using the preview URL or thumbnail is simply displaying an icon of the file type with the filename.

[mrjarbenne]

Let's go with an icon for the file type displayed in the post. That seems like the least taxing to the system. That matches what happens in Brightspace as well, so the behaviour will be familiar:

[r-a-y]

Apologies for the delay in this. I've put up some updates on production.

Here's an example with a PDF file:

The icons are exactly the ones used by OneDrive. I've tried to account for most file types for the icons such as audio, video, photo, zip, html, rtf, etc. Let me know if I'm missing any file types. Also let me know if the styling is okay.

You might need to purge your browser cache and will need to re-select your file in the OneDrive block to see the changes.

Also, let me know if you want me to change the "Find out how to find your shared OneDrive link" URL to something else. If you record a video on hwdsb.tv, I can change the link to that. Otherwise, I can write some placeholder documentation.

[mrjarbenne]

For PDF files, once a link has been shared publicly, there are two URL.

The share link: https://hwdsbonca-my.sharepoint.com/personal/jarbenne_hwdsb_on_ca/_layouts/15/onedrive.aspx?id=%2Fpersonal%2Fjarbenne%5Fhwdsb%5Fon%5Fca%2FDocuments%2FShared%20with%20Everyone%2Fadoption%20components%2Epdf&parent=%2Fpersonal%2Fjarbenne%5Fhwdsb%5Fon%5Fca%2FDocuments%2FShared%20with%20Everyone&originalPath=aHR0cHM6Ly9od2RzYm9uY2EtbXkuc2hhcmVwb2ludC5jb20vOmI6L2cvcGVyc29uYWwvamFyYmVubmVfaHdkc2Jfb25fY2EvRVhzSTd0NVpvcU5DdmFhcVdfMFZyNmNCTm9HSGJmaGd4eWx4di1ia2M4X1VLQT9ydGltZT1DcHhpbXBRMTJVZw

and then the subsequent link that can be located through the Open button at the top, that leverages the browser's own PDF capabilities:

https://hwdsbonca-my.sharepoint.com/personal/jarbenne_hwdsb_on_ca/Documents/Shared%20with%20Everyone/adoption%20components.pdf

We couldn't somehow leverage PDF.js to display the second link could we?

[r-a-y]

Unfortunately, that will not work for the same reason why it cannot be embedded in an iframe:

Refused to frame 'https://hwdsbonca-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 *.powerapps.com *.yammer.com *.officeapps.live.com *.office.com *.stream.azure-test.net *.microsoftstream.com".

What's interesting is why SharePoint administrators cannot register their own domains to the CSP and why core OneDrive files are not affected by this CSP.

[r-a-y]

While working on migrating our videos to SharePoint, I stumbled across a workaround to get other OneDrive items to embed from SharePoint. I only tested this method with a video, but this can probably work for other file types as well.

This would require embedding two <iframe> items. The first embed would be the "Anyone with the link can view" sharing link generated by OneDrive. The sharing URL generally resembles something like hxxps://XXX.sharepoint.com/:v:/g/personal/XXX/SOMEID. Embedding the sharing link helps to set the necessary authentication cookies needed to view the main embed. We would need to hide this item from display.

The main embed uses the following URL format:

hxxps://XXX.sharepoint.com/personal/XXX/_layouts/15/embed.aspx?UniqueId=XXX.

I'm not sure if the 15 has any special significance or not, however the UniqueId is something we need to query OneDrive for and is not the same as SOMEID from the first embed. I can probably query this info from the OneDrive File Picker.

Also I believe this method would require that downloads are not disabled for the specific OneDrive item. Needs further testing, but thought I'd document this somewhere.

[r-a-y]

@mrjarbenne - I've got a first pass of the double <iframe> trick for testing on production. You might need to purge your browser cache to get the new javascript.

You'll need to use the OneDrive block to select a video into a post. The Gutenberg live preview isn't updated yet, but if you save as a draft and view the post preview, you should be able to view the video. Older video embeds will not work as I need to save the unique ID as a block attribute. Once I get some confirmation, I'll try and get the Gutenberg live preview working to display the video and open this up to audio, images and PDFs as well.

[mrjarbenne]

Cleared my cache. It's looking good from my logged in view, but logged out in a private browser window (and on a colleagues browser) I'm seeing what might be a login page from Microsoft, but it's not rendering properly:

https://sandbox.commons.hwdsb.on.ca/2023/10/video-on-onedrive-test/

[r-a-y]

but logged out in a private browser window (and on a colleagues browser) I'm seeing what might be a login page from Microsoft, but it's not rendering properly

Hmm, I'm getting that as well, but after refreshing the page, the video shows up. Can you confirm if that is the case?

Maybe I can add a page refresh after the initial page load is done so the cookies are set before the embed is ready to show up?

[mrjarbenne]

Yes. Refreshing the page seems to bring it to life.

[r-a-y]

I made a little error when rendering the second <iframe>. The video embed should now recognize the cookies from the first <iframe> and automatically refresh on its own. Can you test again?

[mrjarbenne]

I think that fixed it. It seems to be working nicely now.

[r-a-y]

I've opened up the double iframe technique to audio, images and PDFs. I still need to get the Gutenberg preview working with this new technique, so for now, you will have to save as a draft or publish the post to view the change on the frontend.

I found one niggle while testing when logged out. If you are viewing a few, different embeds on the same page when logged out, only one of the embeds will render correctly unless you refresh the page again. You can test at sandbox.commons.hwdsb.on.ca in a private browser. Let me know if this is important to address.

[mrjarbenne]

Here's a post with some test content: https://sandbox.commons.hwdsb.on.ca/2023/10/embed-test/

When the post first loaded only the bottom option appeared. When I refresh (multiple times) only the second to last option is available:

It does look great when logged in.