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