Iframe sandbox attribute

Feedback
1

Hi Observable friends,

I noticed that the main iframe for the rendered cell output has the following sandbox attribute:

sandbox="allow-scripts allow-popups allow-forms allow-popups-to-escape-sandbox allow-top-navigation-by-user-activation"

It seems that this breaks video playback in the Wistia player (disclosure: I work there), as seen in this notebook: Using the Wistia oEmbed endpoint / David Cole | Observable.

I think that’s because Wistia, in most cases, delivers video using hls.js, which uses Media Source Extensions – and Media Source Extensions doesn’t play nice with that restriction. It appears to be struggling to construct the URL for the video’s src attribute. See the null in the error message:

Not allowed to load local resource: blob:null/e0de54c8-b258-4a5a-abb3-4a39c11088c6

After a little experimentation in Glitch, I found that including allow-same-origin in the sandbox attribute makes things work.

Would you be down to include that in the iframe’s sandbox attribute? If not, it’d be super helpful if you could help me understand why.

Thank you!

2

Edited, because my first answer was very wrong…

We can’t add allow-same-origin to our sandbox attribute, because it would allow cookies, localStorage and sessionStorage to be shared (or interfered with) across notebooks. They’re all hosted on observableusercontent.com.

For example, if you embedded a video in a notebook that sets a cookie containing tracking information about what video you played — a completely unrelated notebook could then read that cookie information out later.

We’ve got some thoughts about potential ways to ease the sandboxing restrictions further, but we’re not ready to make a change quite yet.

Hope that helps!

2 Likes
3

Thanks @jashkenas! I’ll see if we can find a way to detect this sort of thing from our end and (if we can do that) fall back to an alternative playback strategy.

4

Thanks for the explanation @jashkenas — Lack of allow-same-origin seems to prevent me from using OAuth to Google APIs (like this working example in Codepen), so if there are ways to safely ease the restrictions in the future, that would be much appreciated!

5

Is this why no video embed codes seem to work? I’ve tried youtube & vimeo but no luck. The best I get is to display the interface (vimeo) - youtube has only a black rectangle.

html`<video src=….mp4>` half works.

6

Yes, this is why. Both the YouTube and Vimeo embeds try to set cookies, and can’t within the sandbox.

7

We just added custom origins for notebook content, so you can now embed videos from Wistia, YouTube, Vimeo, and so on, and they should work like a charm. The top example from this post works, and here are some other examples of embeds working.

1 Like
8

Might be nice to have the ‘allow-presentation’ too (e.g. for Chrome cast).