HTML5 has become an inevitable technology for the web. Developers, businesses and users need HTML5 in some way or the other to push the limits of innovation. HTML5 has proved its competence and is continuing to do so in domains of web development, mobile and gaming. IT offers a host of value added features such as offline, storage, 3D graphics, nuts & bolts, semantics to name a few.

HTML5 has been boosting innovation and technology for more than 20 years. The time has come when modern browsers need to revamp their strength to power modern-day sites. Security, however is one major concern for all major present-day browsers. HTML5 has some significant features that can not only improve security but can acquire content from various sources.

Let’s take a look at the stunning features of HTML5 to improve content security for HTML5 Website Development:

iFrame With Sandbox Attribute

Browsers usually handle content using iFrame just like any web page. Many times, you may not be sure the potential threats of what the hosted content are? It is interesting to not that modern browsers such as Firefox, Chrome, and IE 10 are based on the W3C iFrame Sandbox Attribute. iFrame evaluates each content coming even from the same domain with its cross-domain policy.

iframeSandbox1Image Credit

iFrame content can be hosted in browser by disabling the following:

  • Plugins
  • Forms
  • Scripts
  • Unique origin content
  • Links to other browsing content

Moreover, the sandbox attribute may have several values such as allow-scrips, allow-forms, allow-pop ups, allow-top-navigation, allow-same-origin. With sandbox attribute iFrame browsers can better detect malicious content which means that HTML5 users are less prone to such attacks.

In addition, sandboxing can be combined with 2 new attributes of iFrame srcdoc and seamless to render it more elastic. Though the 2 are still in their development stage and may help you sandbox different types of content in the future. For instance, sandboxing user comments.

Cross – Origin Resource Sharing (CORS)

Cross – Origin resource Sharing (CORS) is a feature that allows a web page to make XMLHttpRequests to another domain. It is a highly powerful and secure way of allowing cross-origin requests. It is a must for platforms that serve public content. All it does is define a set of headers that let the browser and server to decide which requests to allow and which not.

2012120123063595Image Credit

To add CORS to the server use the following header:


To use CORS from JavaScript, this tutorial from HTML5 Rocks by Monsur Hossain may be useful.

Using CORS one web app on one domain can freely communicate with another API on another domain via simple methods like DELETE, and PUT. All you need is a client-side server with JavaScript to enable communication with other domain’s API. The main focus of CORS is to lay stress on flexibility rather than anything else. With CORS you may define the period of trust, use minimal values rather than allowing all things to the browsers.

To Wrap It Up

Content Security Policy (CSP) specification gives you the ability to filter good from harmful sources of content. It must be notified that the reach of this policy is still not sensitive enough to safeguard against all odds. At present the CSP is undergoing a change and the latest version of it can be found at W3C. The goals of CSP is to mitigate cross-site scripting (XSS), clickjacking, and packet sniffing attacks.

HTML5 website development is unique as it is striving hard to empower browsers with the strength and capability of advanced platforms. Using JavaScript businesses and developers are raising the standard of app development from where it currently is. It is important to note in which cases the above HTML5 security features apply and prove beneficial.