HTML5 applications are bringing in some significant changes to next generation application architecture. Hence, it is important to understand HTML5 to get a better security perspective. HTML5 allows applications to run in a thick client environment, have its own file system, SQL database, local variable storage and socket within the browser framework. Whether this instance of the browser is a part of desktop or mobile is immaterial.
Figure 1 – Run time environment and execution
Traditional applications have clear layers like presentation, business and data access. Typically, only the presentation layer would run on the client side and the other components would exist on the server side. Hence, the business logic and data access are server side as shown in figure 1.
In an HTML5 application things can be coded differently. It can have its own powerful business and data access layers. Hence, the developer can migrate some of the server side components to the client side by leveraging these features. As shown in figure 1, the shaded left corner rectangle is an overlap, this is the component which runs on the client side in the browser and executes within the client framework. This is a significant change; it allows applications to run in offline mode as well. At the same time, some of the server side implementations are now exposed to the client and some threats and security issues can emerge. HTML5 has a powerful presentation layer with newly added tags and markups. It also encompasses an effective business layer by having strong APIs accessible by JavaScript along with the data access layer. Now let’s look at figure 2
Figure 2 – HTML5 application architecture
An application running on the client side makes small backend calls to the application server as shown above over HTTP/HTTPS. It uses simple structures like JSON or XML. The application environment may have other servers like an authentication server and a database. This environment serves HTML5 and JavaScript content back to browsers. These browsers are running on desktop or mobile devices. HTML5 pages are loaded on the browser and each has the following logical layers within their architecture.
Presentation layer – HTML5 and CSS render the page and start executing the scripts within the DOM context. HTML5 has powerful markup and embedded APIs so it can run any type of application.
Business and Data layer – This layer runs using JavaScript and DOM. DOM is an integral and the most critical component of the browser - it glues everything together. DOM is managed by JavaScript and various APIs. There are several libraries and frameworks that can be used in this layer. This layer uses key functionalities and APIs like WebSQL, File System, Storage, Cache etc.
Network layer – HTML5 has a very powerful XMLHttpRequest (XHR) and Web Socket layer to manage networking calls. Using JavaScript APIs these calls help in communicating with the backend. It is important to note that it’s possible to communicate with the same domain or cross domain under well-defined policies and frameworks. As shown in figure 1.2 these calls can help in fetching data from their own environment or from a third party service like mail, messaging, news, etc.
Browser policies – Browser containers have several policies which are followed by APIs like Same Origin Policy (SOP), Cross Origin Resource Sharing (CORS), Sandbox, Content Security, etc. These policies enforce tight control over browser behavior and focus on the security structure within the browser framework.
Let’s divide application processing into the following key events of an application life cycle.
1. User involvement and interaction
2. Application behavior and process on the client (Browser/Mobile)
3. Modeling and presentation (HTML)
4. Data Analysis and processing
5. Data and store
2. Application behavior and process on the client (Browser/Mobile)
3. Modeling and presentation (HTML)
4. Data Analysis and processing
5. Data and store
In traditional Web 1.0 applications only 1 & 2 events as mentioned above can be done on the browser and the remaining happen on the server side since browsers were primitive by context.
With Ajax/Web 2.0 event 3 (data conversion and modeling) came under the browser umbrella and moved away from the server side.
Now, with HTML5 – all five events can be done completely on the browser side and dependency on the server is drastically reduced. This is the new era where browsers are no longer running a thin client application but executing a thick client application like a desktop app with the browser acting as a “mini operating system”.
With Ajax/Web 2.0 event 3 (data conversion and modeling) came under the browser umbrella and moved away from the server side.
Now, with HTML5 – all five events can be done completely on the browser side and dependency on the server is drastically reduced. This is the new era where browsers are no longer running a thin client application but executing a thick client application like a desktop app with the browser acting as a “mini operating system”.