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]

I'll pull something together on how to find the link. It's not as logical as Google. You need to change the permissions by creating a share link, but it's not the share link that you need to use to create the embed.

If you use the wrong link, the block changes from the OneDrive block to a core/embed block, and then you need to start over again.

[r-a-y]

You need to change the permissions by creating a share link, but it's not the share link that you need to use to create the embed.

There are two methods to get the Share link.

From the main OneDrive screen:

From the document itself:

This is desktop-only though. Mobile would be different.

[mrjarbenne]

Ok. I swear that wasn't working for me yesterday for some reason. The share link you are pulling looks like this:

https://hwdsbonca-my.sharepoint.com/:p:/g/personal/jarbenne_hwdsb_on_ca/ETPbb8KJkeJPpPDFw_V_X1YBXRZSe1ggFh9azF_EUADUCA?e=8478Mc

But that one was failing to embed for me. The link that the OneDrive block would accept was the one from the browser bar once the document was open, with the "sourcedoc= portion included.

https://hwdsbonca-my.sharepoint.com/:p:/r/personal/jarbenne_hwdsb_on_ca/_layouts/15/Doc.aspx?sourcedoc=%7BC26FDB33-9189-4FE2-A4F0-C5C3F57F5F56%7D&file=H5P%20Presentation.pptx&action=edit&mobileredirect=true

[mrjarbenne]

If I use the Button option instead: "Or Select From Drive" and search my drive for a file to share, is the item automatically shared anonymously? (in our Google instance we needed to toggled a switch to Allow Access)

[mrjarbenne]

Resource link: https://support.commons.hwdsb.on.ca/embed-from-onedrive/

[mrjarbenne]

If I use the Button option instead: "Or Select From Drive" and search my drive for a file to share, is the item automatically shared anonymously? (in our Google instance we needed to toggled a switch to Allow Access)

Sorted this out by testing it myself (what a novel idea) and notice you've added the resource link. Thanks for that!

Once you upload the plugin to this repo I can help out with some of the documentation.

[r-a-y]

But that one was failing to embed for me. The link that the OneDrive block would accept was the one from the browser bar once the document was open, with the "sourcedoc= portion included.

I might have figured out a workaround with using the browser URL. I'm still looking into this. If this works, I might be able to embed audio, image and video depending if the browser supports it.

The workaround is adding the parameter csf=1 to the end of certain URLs.

Can you check the following test URL on Sandbox and tell me if you can see the image? https://sandbox.commons.hwdsb.on.ca/?p=44423&preview=true

If you can see the image, I can write some logic to use this new URL format.

I also added an audio file as well. Let me know if it is playable.

If I use the Button option instead: "Or Select From Drive" and search my drive for a file to share, is the item automatically shared anonymously

Yes, the "Or Select From Drive" button will automatically set the Share link for the doc to "Anyone with the link can view".

[mrjarbenne]

Just to confirm, the share link worked yesterday. The browser url doesn't need to function, but if you think it might unlock some additional functionality then let's play.

I can't see the image, but I do see an audio player (with an error so it won't play)

[r-a-y]

Hmm, it looks like you have to load the actual resource in a separate tab. Then when you refresh the page, the embed will work. I'm guessing when you go to the actual resource, SharePoint will set the proper cookies.

Try heading to the following URLs in a separate tab. Then refresh the Sandbox page. I think I might have to ditch the workaround idea.

[mrjarbenne]

Yup. Visiting those resources first, then launching the site rendered them in the post. That pic would make an appropriate album cover for the track below:

[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.