Executing HTML5/Javascript Within An iFrame Securely

Question

I'm looking to develop a website to host HTML5 games on. Since these games have the chance to include malicious javascript, I'd like to know how to setup a secure environment for hosting them.

It seems like embedding the game with an iframe is the answer, but I'm relatively new to website development, so some questions:

• is there a simple way to host the games securely on the same domain, or...

• does the game have to be hosted on a different domain, then embedded within an iframe, so that it can't interact with the parent document?

• if the game is executed while hosted on another domain, can it interact with that host domain in any malicious way?

Answer 1

Cross-site scripting and over-scoping of cookies will be a great concern here. Utilising the browsers' Same Origin Policies will be a valuable methodology in your defence of this. ref1 ref2

• Ensure your sites are served from a different domain to the contributors apps. (e.g. coolgames.com vs mycoolgames.com) - This will segregate the origin-scope of your code from theirs.
• Ensure that each different contributor has their apps/games served from a unique subdomain (e.g. bob.mycoolgames.com, dave.mycoolgames.com) - This will help to segregate the origin of the different developers. Each will need to be careful to never scope cookies to .mycoolgames.com or they will overexpose themselves.

You may also wish to further protect your own app by utilising the new Content Security Policy support in modern browsers. This will additionally help to mitigate against clickjacking attacks.

Regarding iframes:

Can you explain why you think you need to use an iframe at all? What's wrong with good old fashioned links?

If the graphic design dictates that an iframe must be used, you can easily have all the embedded games iframed into a dynamic page at www.mycoolgames.com, where you will not keep any sensitive systems, data or code - keep all user authentication systems, CMS systems and data only on the applications at *.coolgames.com

Answer 2

First - this is a great question! I was asking myself the same question when design a hosted iframe-based solution.

Second - after a short search I've came across iframe sandbox attribute

TLDR - it enables developers to declare which security options will be applied to the iframe, letting the browser define a tailored-made restrictive scope

So.. I found a great article that gives a real world sample of this feature usage + some clear explanations (read more about this topic here). In short:

<iframe sandbox="security options goes here" src="your hosted page"></iframe>

The security options are:

• allow-forms allows form submission.
• allow-popups allows popups (window.open(), showModalDialog(), target=”_blank”, etc.).
• allow-pointer-lock allows (surprise!) pointer lock.
• allow-same-origin allows the document to maintain its origin; pages loaded from https://example.com/ will retain access to that origin’s data.
• allow-scripts allows JavaScript execution, and also allows features to trigger automatically (as they’d be trivial to implement via JavaScript).
• allow-top-navigation allows the document to break out of the frame by navigating the top-level window.

For instance:

<iframe sandbox="allow-scripts allow-popups" src="https://mywebsite.com/hosted_page"></iframe>

It is also worth mentioning that this security feature is highly supported (can I use for the rescue)

Happy reading / coding... may the security force be with you :)