Checkmarx Launches Infrastructure as Code Scanning Solution to Secure Cloud-Native Applications: KICS

All You Wanted To Know About HTML5 Security

With Google officially dropping Flash ad support in favor of HTML5, the security aspect of this relatively young programming and scripting language has become extremely crucial. Being a web-based application always invites cybercrime, which means that code integrity is very important. The following article will lay down the most important Application Program Interface (API) coding practices that developers must adopt to boost HTML5 security.


Due to the extensiveness of this language, the best practices mentioned below will only address the Communication and Storage APIs, considered by many to be the most crucial to HTML5 security. The Geolocation API, Forms API and the Offline Apps API must also not be overlooked by developers. Knitted together, these APIs provide an extensive web experience unique to HTML5.


Watch Your Communication APIs


The Communication API allows HTML5 pages to communicate with each other, even when not loaded via the same domain. If done insecurely, HTML5 security is compromised.


1 – Web Messaging


Also known as Cross Domain Messaging, this API provides a means of messaging between documents from different origins in a way that is generally safer than the “hacks” used in the past to accomplish this.


  • Explicitly state the expected origin while posting a message.
  • The receiving page should always check the origin attribute of the sender. This helps verify that the received data is indeed sent from the expected location.
  • The receiving page should also perform input validation on the data attribute of the event. This helps confirm that the data is indeed in the desired format.
  • Both pages should interpret exchanged messages as data, not as code.
  • Assign data value to elements securely – textContent = Data. Insecure methods should be avoided (i.e – element.innerHTML = data).


Embedding external/untrusted content and allowing user-controlled scripts is dangerous. If needed, it must be done by using a JavaScript rewriting framework (i.e – Google Caja).


2 – Cross Origin Resource Sharing 


Known in inner circles as CORS, this functionality allows cross-domain communication from the browser. For optimal HTML5 security, developers should make sure to:


  • Validate URLSs passed to open. Most modern browsers allow these to be cross-domain, making them vulnerable to code injections.
  • Pay extra attention to absolute URLs.
  • Make sure that URLs responding with Access-Control-Allow-Origin don’t include sensitive information. Also, don’t use the header for the whole domain.
  • Discard requests received over plain HTTP with HTTPS origins to prevent bugs.
  • Not rely on the Origin header for Access Control checks as they can be spoofed outside the browser. Protect sensitive data using application-level protocols.


3 – WebSockets


The WebSocket API helps establish a persistent connection between the browser and the server. But glitches in the coding process can cause security debacles. Developers must:


  • Disable backward compatibility in all servers and make sure you are using protocol versions above hybi-00. For example, Hixie-76 version is insecure and outdated.
  • WebSocket protocol RFC 6455, supported by all browsers, is the one to go with.
  • WebSocket protocols don’t handle authorization or authentication. Application-level protocols should be made to handle these separately.
  • Process messages received by the WebSocket as data, not as code. Also, don’t assign it directly to the DOM. If the response is JSON, use the safe parse() option.
  • Make sure the server can handle illegal/malicious input to avoid spoofing attacks.


4 – Server-Sent Events


This API is used for opening an HTTP connection to receive push notifications from a server.


  • Always validate URLs passed to the EventSource.
  • Check the origin attribute of the message (origin) and make sure it’s coming from a trusted domain. You may use a whitelist solution for this.



Sidejacking with HTML5. Courtesy: Adrian Michalczyk


Don’t Forget the Storage APIs


Similar in many ways to cookies, HTML5 lets the browser save values that can outlast the web session. Events can also be transferred between browser windows. Developers must code with care.


1 – Local Storage/Offline Storage/Web Storage


With this kind of storage, HTML5 web applications can store data within the user’s web browser.


  • It’s highly recommended not to store sensitive information in the local storage.
  • Opt for object sessionStorage when persistent storage is not needed.
  • Pay attention to “getItem” and “setItem” calls within the HTML5 page. This helps detect when sensitive information is put into the local storage.
  • Session identifiers are accessible by JavaScript. Don’t put them in local storage. This can be solved by using cookies along with the httpOnly
  • Avoid the practice of hosting multiple applications of the same origin in the local storage, since they all will then share the same localStorage


2 – Client-side Databases


There are a few APIs that come under this category – Web Storage, Web SQL Database, Indexed Database, and File Access. They help the app to be available offline, while improving performance.


  • Client-side WebDatabase content is often vulnerable to SQL injections. Developers must make sure that the content is properly validated and parameterized.
  • Just like with local storage, malicious data can make its way to the web database with the help of Cross Site Scripting (XSS). Hence, any data can’t be trusted.

Secure Coding Practices for Better HTML5 Security


All the secure practices in the world are no substitute for proper application security testing. HTML5 security hinges on proper testing, preferable during the development process. Unfortunately, this can’t be achieved with traditional security solutions such as Penetration (Pen) Testing and Manual Code Reviewing. Thats where Static Application Security Testing (SAST) enters the picture.


Static Code Analysis (SCA), a leading SAST solution, can be integrated directly into the development process. This helps detect and mitigate application layer vulnerabilities quickly, something that helps organizations save a lot of resources and finances. The solution typically sits directly in the developers’ IDE, involving them directly in the security process.


Other benefits of automating HTML5 security include:

  • Creation of a secure Software Development Life Cycle (sSDLC), which helps break the build when medium/severe flaws are detected.
  • Optimal security performance for Agile/DevOps/CICD development scenarios, which are being implemented in more and more organizations worldwide.
  • Reduces friction with the organization between the security staff and development teams. Even the executives are happy with lesser product launch delays.
  • Developers are proactive on the security front. Scan reports can be exported for online scrutiny, future planning and educational purposes.
  • SCA utilizes the only thing the hackers don’t have access to – the source code. This advantage is crucial and makes the difference when it comes to finding big flaws.


Regardless of the aforementioned advantages of SCA/SAST, HTML5 security requires a multi-layered approach. The scanning during the development stages can and should be complemented with Pen Testing prior to release. There is also the option of implementing post release solutions such as the ever-popular Web Application Firewall (WAF), which can detect and block malicious input.


Simply put, no single security solution is perfect. Hence, implementing two or more during the various stages can help optimize the HTML5 security process. Stay safe!


To read more about HTML5 security – Click Here


Jump to Category