39

The runnable snippets on Stack Overflow for JavaScript, HTML and CSS are a very convenient feature. I was wondering how is it implemented.

From what I could find on this link, Stack Overflow implements it using HTML5 sandboxed iframes in order to prevent many forms of malicious attack. The Snippets are rendered on an external domain (stacksnippets.net) in order to ensure that the same-origin policy is not in effect and to keep the snippets from accessing logged-in session or cookies.

However, I could not find a more detailed explanation of how it works. I played around with the Chrome Dev Tools and found out:

  • The output is displayed in an iframe with the following sandbox attribute <iframe sandbox="allow-forms allow-modals allow-scripts">
  • The origin of the iframe is null
  • A POST request is sent to https://stacksnippets.net/js. The origin of this request is https://stackoverflow.com and the request form data is js: foo css: bar html: baz.
  • The response is a complete HTML doc with a script tag <script src="/scripts/snippet-javascript-console.min.js?v=1"></script>
  • Next is a GET request to stacksnippets.net to get /scripts/snippet-javascript-console.min.js. The origin for this request could not be found on Chrome Dev Tools. The referrer was https://stacksnippets.net/ itself.

Can anyone explain how this whole thing happens? Where does the code live, how does it not interact with the parent cookies, where do the scripts run, how it prevents XSS attacks? How does it work even when iframe has null origin?

And how does Stack Overflow ensure that the scripts are executed securely?

2
  • 1
    Look deeper in the iframe document you will see the JS posted is printed inside it's own script tag in the body, the css inside a <style> tag in the head and the html of course is in the body also. The code lives in the snippet and gets posted every time you hit Run then inserted into the iframe page template
    – charlietfl
    Jun 2, 2021 at 21:14
  • To add to point #3: the POST request data also includes console: <true/ false> and babel: <true/ false>, as well as the 3 code parameters you mention.
    – zcoop98
    Jun 2, 2021 at 22:14

1 Answer 1

22

The origin of the iframe is null because of the iframe's sandbox attribute (and the absence of the allow-same-origin clause).

Since the iframe's origin is null it can't access its .parent and thus can't interact with it.
(In modern browsers I think it will even get executed in a separate thread to avoid timing attacks).

The location.origin is set to //stacksnippets.net because they use a <form> to populate the iframe's content.
The form contains three textareas (js, css, html) and 2 text inputs (console, babel).
Its action is set to //stacksnippets.net/js (which will set the location and base URL of the resulting document) and its target is set to the name of the <iframe> element, so the response form the server will be set as the content of the iframe.

As for why they use all this?

I guess it's for supporting older IE browsers. But they could do the same 100% from the browser using a blob:// URI with the same sandbox rules (pen), or they could even finally enable the allow-same-origin clause by using a data:// URI (pen) which are cross-origin and thus offer the same protection as without that clause, but would allow us to get access to inner frames's content from our snippets since the sandbox also applies to inner frames...


Where does the code live?

In the post's body, then in a POST request and finally in the iframe's content.

How does it not interact with the parent cookies

Same-Origin Policies cover this. The iframe's origin is different than the parent, it won't be able to access anything from there.

Where do the scripts run.

In the iframe's document.

How it prevents XSS attacks?

By sandboxing the iframe.

How does it work even when iframe has null origin?

If you mean why does the relative call to /scripts/snippet-javascript-console.min.js?v=1 work, it's because the location's origin is not null, but //stacksnippets.net (You may want to have a look at What is window.origin?).

And how does Stack Overflow ensure that the scripts are executed securely?

... by sandboxing the iframe. However on that last point, note that they only protect themselves (and our credentials etc.), but one can still cause "harm" through a sandboxed iframe. They can very well start some crypto mining script, they can run finger-printing scripts etc. So before clicking the "Run Code Snippet" button, always read the content of the snippet.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .