*Use the object sessionStorage instead of localStorage if persistent storage is not needed. sessionStorage object is available only to that window/tab until the window is closed.

*Use the object sessionStorage instead of localStorage if persistent storage is not needed. sessionStorage object is available only to that window/tab until the window is closed.

*A single [[Cross-site_Scripting_(XSS)|Cross Site Scripting]] can be used to steal all the data in these objects, so again it's recommended not to store sensitive information in local storage.

*A single [[Cross-site_Scripting_(XSS)|Cross Site Scripting]] can be used to steal all the data in these objects, so again it's recommended not to store sensitive information in local storage.

+

*A single [[Cross-site_Scripting_(XSS)|Cross Site Scripting]] can be used to load malicious data into these objects too, so don't consider objects in these to be trusted.

*Pay extra attention to “localStorage.getItem” and “setItem” calls implemented in HTML5 page. It helps in detecting when developers build solutions that put sensitive information in local storage, which is a bad practice.

*Pay extra attention to “localStorage.getItem” and “setItem” calls implemented in HTML5 page. It helps in detecting when developers build solutions that put sensitive information in local storage, which is a bad practice.

Line 23:

Line 24:

*Underlying storage mechanism may vary from one user agent to the next. In other words, any authentication your application requires can be bypassed by a user with local privileges to the machine on which the data is stored. Therefore, it's recommended not to store any sensitive information in local storage.

*Underlying storage mechanism may vary from one user agent to the next. In other words, any authentication your application requires can be bypassed by a user with local privileges to the machine on which the data is stored. Therefore, it's recommended not to store any sensitive information in local storage.

*If utilized, WebDatabase content on client side can be vulnerable to SQLInjection and needs to have proper validation and parametrization.

*If utilized, WebDatabase content on client side can be vulnerable to SQLInjection and needs to have proper validation and parametrization.

+

*Like Local Storage, a single [[Cross-site_Scripting_(XSS)|Cross Site Scripting]] can be used to load malicious data into a web database too, so don't consider data in these to be trusted either.

Introduction

The following cheat sheet serves as a guide for implementing HTML 5 in a secure fashion.

Cross Origin Resource Sharing

Validate URLs passed to XMLHttpRequest.open, current browsers allow these URLs to be cross domain and this behavior can lead to code injection by a remote attacker.

Ensure that URLs responding with Access-Control-Allow-Origin: * do not include any sensitive content or information that might aid attacker in further attacks. Use Access-Control-Allow-Origin header only on chosen URLs that need to be accessed cross-domain. Don't use the header for the whole domain.

Take special care when using Access-Control-Allow-Credentials: true response header. Whitelist the allowed Origins and never echo back the Origin request header in Access-Control-Allow-Origin.

Keep in mind that CORS does not prevent the requested data from going to an un-authenticated location - it's still important for the server to perform usual CSRF prevention.

While the RFC recommends a pre-flight request with the OPTIONS verb, current implementations might not perform this request, so it's important that "ordinary" (GET and POST) requests perform any access control necessary.

Local Storage (a.k.a. Offline Storage, Web Storage)

Underlying storage mechanism may vary from one user agent to the next. In other words, any authentication your application requires can be bypassed by a user with local privileges to the machine on which the data is stored. Therefore, it's recommended not to store any sensitive information in local storage.

Use the object sessionStorage instead of localStorage if persistent storage is not needed. sessionStorage object is available only to that window/tab until the window is closed.

A single Cross Site Scripting can be used to steal all the data in these objects, so again it's recommended not to store sensitive information in local storage.

A single Cross Site Scripting can be used to load malicious data into these objects too, so don't consider objects in these to be trusted.

Pay extra attention to “localStorage.getItem” and “setItem” calls implemented in HTML5 page. It helps in detecting when developers build solutions that put sensitive information in local storage, which is a bad practice.

WebDatabase

Underlying storage mechanism may vary from one user agent to the next. In other words, any authentication your application requires can be bypassed by a user with local privileges to the machine on which the data is stored. Therefore, it's recommended not to store any sensitive information in local storage.

If utilized, WebDatabase content on client side can be vulnerable to SQLInjection and needs to have proper validation and parametrization.

Like Local Storage, a single Cross Site Scripting can be used to load malicious data into a web database too, so don't consider data in these to be trusted either.

Web Workers

Web Workers are allowed to use XMLHttpRequest object to perform in-domain and Cross Origin Resource Sharing requests. See relevant section of this Cheat Sheet to ensure CORS security.

While Web Workers don't have access to DOM of the calling page, malicious Web Workers can use excessive CPU for computation, leading to Denial of Service condition or abuse Cross Origin Resource Sharing for further exploitation. Ensure code in all Web Workers scripts is not malevolent. Don't allow creating Web Worker scripts from user supplied input.

Validate messages exchanged with a Web Worker. Do not try to exchange snippets of Javascript for evaluation e.g. via eval() as that could introduce a DOM Based XSS vulnerability.

WebSockets

Drop backward compatibility in implemented client/servers and use only protocol versions above hybi-00. Popular Hixie-76 version (hiby-00) and olders are outdated and insecure.

Recommended version due current browser support is hiby-10, supported by Firefox 7 and Chrome 14.

While it is relatively easy to tunnel TCP services through WebSockets (e.g. VNC, FTP), doing so enables access to these tunneled services for the in-browser attacker in case of a Cross-Site-Scripting attack. These services might also be called directly from a malicious page or program.

The protocol doesn't handle authorization and/or authentication. Application-level protocols should handle that separately in case sensitive data is being transferred.

Endpoints exposed through ws:// protocol are easily reversible to plaintext. Only wss:// (WebSockets over SSH) should be used for protection against Man-In-The-Middle attacks

Spoofing the client is possible outside browser, so WebSockets server should be able to handle incorrect/malicious input. Always validate input coming from the remote site, as it might have been altered.

When implementing servers, check the Origin: header in Websockets handshake. Though it might be spoofed outside browser, browsers always add the Origin of the page which initiated Websockets connection.

As WebSockets client in browser is accessible through Javascript calls, all Websockets communication can be spoofed or hijacked through Cross-Site-Scripting. Always validate data coming through WebSockets connection.

Geolocation

The Geolocation RFC recommends that the user agent ask the user's permission before calculating location, but whether or how this decision is remembered varies from browser to browser. Some user agents require the user to visit the page again in order to turn off the ability to get the user's location without asking, so for privacy reasons, it's recommended to require user input before calling getCurrentPosition or watchPosition.

Use the sandbox attribute of an iframe for untrusted content

The sandbox attribute of an iframe enables restrictions on content within a iframe. The following restrictions are active when the sandbox attribute is set:

All markup is treated as being from a unique origin

All forms and scripts are disabled

All links are prevented from targeting other browsing contexts

All features that triggers automatically are blocked

All plugins are disabled

It is possible to have a fine-grained control over iframe capabilities using the value of the sandbox attribute.

Web Messaging

Web Messaging provides a means of messaging between documents from different origins in a way which is generally safer than JSON-P, however, there are still some recommendations to keep in mind:

When posting a message, explicitly state the expected origin as the second argument to postMessage rather than * in order to prevent sending the message to an unknown origin after a redirect or some other means of the target window's origin changing.

The receiving page should always:

Check the origin attribute of the sender to verify the data is originating from the expected location, and

Perform input validation on the data attribute of the event to ensure it's in the desired format.

Don't assume you have control over data attribute. Single Cross Site Scripting flaw in sending page allows attacker to send messages of any given format.

Both pages should only interpret the exchanged messages as data. Never evaluate passed messages as code (e.g. via eval() ) or insert it to a page DOM (e.g. via innerHTML) as that would create a DOM based XSS vulnerability. For more information see DOM based XSS Prevention Cheat Sheet.

To assign the data value to an element, instead of using a insecure method like element.innerHTML = data; use the safer option element.textContent = data;

Progressive Enhancements and Graceful Degradation Risks

The best practice now is to determine the capabilities that a browser supports and augment with some type of substitute for capabilities that are not directly supported. This may mean an onion-like element, e.g. falling through to a Flash Player if the <video> tag is unsupported, or it may mean additional scripting code from various sources that should be code reviewed.