The combinations of HTML5 and JavaScript has become a popular solution for developers to build apps and websites. Over the past years this combination has delivered increasing speed and reliability.
Although the W3C only approved HTML5 as a standard in October 2014, its adoption started many years ago. Presently, almost 30% of the Fortune 500 companies, which include tech giants like Google, Facebook, Netflix and Microsoft are using it.
A Gartner report found that over 50% of the mobile apps are likely to be based on HTML5 by 2016. One reason for its popularity is HTML5 being largely cross-platform. It allows developers to create apps for various platforms including iOS, Android, Windows, Mac and web applications.
The increasing popularity of JavaScript has been meteoric and is the perfect accompaniment to HTML5. Together, they are fast becoming dominant technologies for designing mobile applications.
This technology stack combination is not without its haters, problems and questions. One such question is…
Do HTML5 apps pose any security threats for developers and businesses?
The answer unfortunately is yes. Apps built with HTML5 are like any web-based applications. Developers should take proper security measures against cyber attacks to safeguard any stored data and communications. Unfortunately, many are doing little to protect themselves and their users against these threats.
Let’s consider what threats HTML5 mobile apps are facing.
Threats from Malicious Code
According to researchers from Syracuse University, HTML5 apps are most likely to add security risks via developer error. For example, executing malicious code automatically sent through Bluetooth, Wi-Fi or text messages.
This malicious code can capture sensitive information and expose the victim’s mobile device to an attacker. Worse, the malicious code can spread and cause the app to carry out undesired tasks such as sending SMS text messages. As the use of this platform is growing, its security weaknesses are becoming a bigger problem.
By using incorrect APIs developers make apps vulnerable and as a result they can send malicious code to the JavaScript engine for execution. Choosing correct APIs is critical to avoid this security breach.
Developers typically mix data and code together and Apps can become vulnerable to malicious code when user generated data originates from unreliable sources. This problem is not limited to HTML5 apps, but there are more channels from which a mobile device can become infected, unlike a web browser.
Apart from developer error, malicious code can be injected into an app through images and music files (as metadata), QR codes, Bluetooth transmission and SSID fields transmitted over WiFi. SMS messages displayed by the app can also contain malicious code.
Middleware is a Major Issue
HTML5 applications often need a middleware framework to be cross-platform. This middleware is one of the ways that JavaScript can call the operating system in its native language. This middleware is liable to malicious code injection attacks known as XSS (cross-site scripting) as middleware accepts both data and code and executes the latter automatically.
The risk is greater on mobile devices due to the permissions we give to apps, such as accessing contact lists, location data and cameras. The Syracuse researchers particularly mentioned PhoneGap, a popular middleware. Using plugins, PhoneGap can access various elements of your mobile device. Researchers found that 77 PhoneGap plugins out of the total 186 were exploitable. This means that these plugins could accept data+code from external channels and execute them.
Almost 764 free apps in the Google Play Store are using PhoneGap and researchers could carry out code injection attacks successfully on 2 of these apps. This is a small percentage considering there are over 12,000 free Android apps. The researchers said nothing about a potential solution and promised to be more specific in a future paper.
It’s not just HTML5 based apps that expose users to security issues, but a problem that affects Apps generally. Appthority, a mobile app risk management vendor, analyzed 400 apps in its Winter 2014 App Reputation Report, which includes the top 100 paid and top 100 free iOS and Android apps. The report found a lot of risky practice in these apps and most are related to users’ privacy.
The report found that almost 70% of apps allow location tracking, 56% can identify the UDID and 31% can access the address book of the user. 53% of these apps share data with third-party analytics and ad networks, 69% use single sign-on and 51% of them allow in-app purchasing.
Out of all, “In-app purchasing” is especially risky due to the type of the data collected. It usually collects sensitive information such your email address, phone number, address and possibly bank details. This information could be shared with third parties like advertising networks and/or analytics companies and take the risk of being misused.
Domingo Guerra, the president and cofounder of Appthority states that for apps the growing trend is to monetize through in-app purchasing. He cited the example of one of the most hyped and downloaded free apps, Candy Crush Saga being “one of the top-grossing apps” as well.
These risky practices are not limited to free apps. The report mentions that almost 80% of the top paid Android and iOS apps also exhibited examples of risky practice.
The Solution
The researchers at Syracuse University didn’t give any concrete solutions. They suggest that the solution lies in one of the three approaches to XSS. These are:
- Sanitization, which is filtering the code mixed with data.
- Mitigation or restricting the permissions for untrusted code.
- Tainting or tagging inputs from any unreliable sources and not allowing them to run.
Consider the following examples borrowed from the HTML5 Security Cheatsheet:
Displaying an HTML5 form and form action has the capability for form hijacking from outside the form.
<form id="test"><button form="test" formaction="javascript:alert(1)">X</button></form>This form uses an input element with autofocus to call its own focus event handler, no user interaction required.
<input onfocus=write(1) autofocus/>In the first example, users shouldn’t be allowed to submit any markup containing attributes like form or formaction or even transform them to bogus attributes. The id attribute should be avoided for forms and submit buttons.
In the second example, developers need to keep in mind that markup submitted by users should not include autofocus attributes.
The best advice is to remove irrelevant or dangerous characters from content. Proper design strategies should contain no or minimal data caching and minimize logic on the client, keeping passwords, tokens, security profiles and credentials on the server. The focus should be on UI interaction with the server. It is possible to develop secure HTML5 apps by leaving no data behind in cache.
Developers need to be aware of the most potent mobile security threats and secure apps against them. Another useful resources is this detailed guideline for secure mobile development from the PCI SSC (Payment Card Industry Security Standards Council).
Your mobile technology must provide an authentication framework and robust security features including:
- On-device encryption
- Secure client/server communication
- Access control
- Offline authentication
Cross-platform applications are one of the holy grails of mobile app development, but never compromise on security issues and user experience. One way of achieving this is by focusing on the integration between the app, its cloud platform-specific features and remote authentication services and combine them with security best practices applicable for web development.
What are your experiences and advice with securing HTML based Apps?
Frequently Asked Questions about HTML5 Security Risks
What are the main security risks associated with HTML5 applications?
HTML5 applications are susceptible to a variety of security risks. The most common ones include Cross-Site Scripting (XSS), Cross-Site Request Forgery (CSRF), and Clickjacking. XSS occurs when an attacker injects malicious scripts into web pages viewed by other users, while CSRF tricks the victim into submitting a malicious request. Clickjacking involves tricking a user into clicking on something different from what the user perceives, potentially revealing confidential information or taking control of their computer.
How can I prevent Cross-Site Scripting (XSS) in HTML5?
To prevent XSS attacks, it’s crucial to sanitize user input. This means that any data received from a user should be checked and possibly modified to ensure it does not contain harmful content. Additionally, using HTTP-only cookies can prevent scripts from accessing sensitive data stored in cookies.
What is the role of Content Security Policy (CSP) in HTML5 security?
CSP is a security standard introduced to prevent XSS attacks. It allows you to create a whitelist of sources of trusted content, and instructs the browser to only execute or render resources from those sources. It’s a powerful tool in securing your HTML5 applications.
How does HTML5 handle Cross-Origin Resource Sharing (CORS)?
CORS is a mechanism that allows many resources (e.g., fonts, JavaScript, etc.) on a web page to be requested from another domain outside the domain from which the resource originated. In HTML5, CORS is handled by adding specific HTTP headers that tell the browser to allow requests from certain origins.
What is the risk of using local storage in HTML5?
Local storage in HTML5 allows web applications to store data persistently in a browser. However, this data is not encrypted and can be accessed by any script on your website, which poses a risk of data theft. Therefore, sensitive information should never be stored in local storage.
How can I secure my HTML5 web sockets?
Web sockets provide a full-duplex communication channel over a single TCP connection. To secure them, you should use the WebSocket Secure (WSS) protocol, which encrypts the data transmitted over the sockets.
What is the risk of using third-party libraries and frameworks in HTML5?
While third-party libraries and frameworks can speed up development, they can also introduce security vulnerabilities if they are not properly maintained or if they contain malicious code. Therefore, it’s important to only use libraries and frameworks from trusted sources and to keep them updated.
How can I prevent Clickjacking in HTML5?
Clickjacking can be prevented by using the X-Frame-Options HTTP response header, which indicates whether a browser should be allowed to render a page in a , <iframe>,
What is the risk of using inline scripts and styles in HTML5?
Inline scripts and styles can be a security risk as they can be used to inject malicious code. To mitigate this risk, you can use Content Security Policy (CSP) to restrict the use of inline scripts and styles.
How can I ensure the security of my HTML5 application?
Ensuring the security of your HTML5 application involves a combination of practices, including sanitizing user input, using HTTP-only cookies, implementing CSP, handling CORS correctly, securing web sockets, and being cautious with third-party libraries and frameworks. Regular security audits and updates are also crucial.
Jaykishan PanchalJaykishan Panchal is a content marketer at MoveoApps, an apple watch app development company. He enjoys writing about Technology, marketing & industry trends. He is tech enthusiast and loves to explore new stuff.
