Sandbox Security in HTML5

Sandbox Security

With the introduction of new tags and features in HTML things around the www has become easier and faster but at the same time a concern about security is alarming as well and cannot be ignored although navigation, browsing, downloading, etc have become sophisticated but until and unless the user agent is secure and safe there is always an issue.

HTML5 comes to the rescue with its sandbox safeguard.

Earlier what happens is within the users webpage, the user may allow the viewers to navigate to a 3rd party vendor and the viewer trusting the page visits the 3rd party vendor site but it may happen sometimes that somehow the viewer's information through cookies etc is misused by some other party or some pop up may rise up ruining the look and feel of the original page. In order to rein this property, the HTML5 sandbox comes with the following features :

Allow or Disable embedding of scripts in the page it is hosted in.
Disable plugins such as flash, Silverlight plugins, etc
Allow or Disable forms to make any post back to any target.
Allow or Disable the links to other browser contents.
The content is not allowed to navigate the DOM or retrieve the user information/ cookie and is treated under a unique origin.

The IDL used for sandboxing is defined as :

interface HTMLSandboxElement : HTMLElement

{
readonly attribute allowRemoting;
readonly attribute allowStyleChange;
readonly attribute allowDOMScripting;
readonly attribute allowEventHandler;
readonly attribute allowSubmit;
boolean checkPermission(in DOMString attributeName);
}

Applying this in HTML:

Starting with Sandboxing in HTML5.

This,sandbox, property or attribute is used under the <iframe></iframe> tag. for example :

Follow the steps to use the sandbox attribute in HTML5 :

Step 1: Open any HTML editor or open Visual Studio and in the code part write the following lines of code.

Step 2: The main properties that sandbox exhibit are :

(i) Allow Forms: This property allows the forms to post back within the frame. Tag used for this is as follows :

<iframe sandbox = "allow-forms" src = "www.google.html"></iframe>

(ii) Allow Scripts: Javascript provides the dynamic interaction on the client-side and can be used to perform self generated events and thus creates a high-security issue for the user hence enabling or disabling javascript or other scripts should be done carefully. In HTML5 sandbox provides the feature of allowing and not allowing scripts and this is done as following :

<iframe sandbox = "allow-scripts" src = "www.google.html"></iframe>

(iii) Allow Same Origin: This property allows the frame page to access the Host page information when the frame page is coming from the same domain but when we use the sandbox attribute this behaves in another manner, Using sandbox attribute restricts the frame page even if it is from the same domain to access the host document object model. This attribute is written as :

<iframe sandbox = "allow-same-origin" src = "example.html"></iframe>

You can also use two property together such as :

<iframe sandbox = "allow-scripts allow-same-origin" src = "example.html"></iframe>

(iv) Allow Top Navigation: Using the sandbox attribute, anchor targeting other browsing contexts are ignored and not executed by default. This protects the website hosting the iframe content from being replaced by the hosted content.

<iframe sandbox = "allow-top-navigation" src = "example.html"></iframe>

(v) Ms-Allow-Popups: Although the pop-ups are disabled by the sandbox but sometimes pop-ups are required for allowing complete functionality for this the ms-allow-pop ups property helps to open pop-ups without violating the sandbox property. Write the following line to allow pop ups :

<iframe sandbox = "ms-allow-popups" src = "example.html"></iframe>

Output