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?

iframe + secure = problem always...Have a read some ideas here msdn.microsoft.com/en-us/library/bb735305.aspx stackoverflow.com/questions/229624/… iframehtml.com/iframe-security.html — NoWar
– NoWar, Commented Jan 12, 2012 at 12:52
@DmitryBoyko Thanks for the links. Very useful. Though, what other choice do I have than to use an iframe for this? :) — Matthew
– Matthew, Commented Jan 12, 2012 at 13:36

Cheekysoft · Accepted Answer · 2012-01-12 13:59:15Z

2

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

edited Jan 12, 2012 at 13:59

answered Jan 12, 2012 at 12:02

Cheekysoft

35.7k20 gold badges75 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Matthew Over a year ago

Thank you! The information on sub domains in particular helps.

Matthew Over a year ago

Thanks. Can I ask what you do mean by your last line "Personally I would..."? Do you mean just redirect the page to the site with the game hosted on it?

Cheekysoft Over a year ago

@Matthew Scratch that, I was thinking before typing. The main risk from clickjacking is from when someone iframes your site into theirs . Putting someone else's content into an iframe inside your own site, should not expose you to much additional risk. But i would imagine it is quite easy to avoid using any cross-domain iframes at all.

Matthew Over a year ago

The problem then being that I can't have elements like ads on the page then or even much of an interface if any.

Matthew Over a year ago

Any chance I could have your email? I would really like to discuss this in more depth, and get clarification. If you wouldn't mind I would really appreciate it.

ymz · Accepted Answer · 2020-10-13 18:30:55Z

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 :)

Collectives™ on Stack Overflow

Executing HTML5/Javascript Within An iFrame Securely

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related