Single Page Web Applications and How to Secure Them

App developers like Airbnb, Pinterest, and LinkedIn are showing a new approach to designing and building modern web apps. By using what is known as a single-page application (SPA), these applications represent the next generation of modern software design, providing a faster and cleaner user experience than traditional multi-page websites.

What is a Single Page Application?

SPAs consist of a browser-rendered page, linked to a variety of backend data sources through application programming interfaces (APIs). SPAs operate more like mobile apps than multi-page web apps, and their rise to prominence has been driven in part by the popularity of the mobile app experience.

Multi-page web applications have multiple pages, with each page containing its own HTML code. And, although linked at the navigation level, each page is unique and dynamically generated on the server side. Multi-page web applications can incorporate front-end code to make pages more interactive and dynamic, but their user interfaces (UIs) don’t primarily use APIs to fetch application data.

An example of a multi-page application is a LAMP stack, a Linux-based server running on-premises or in the cloud using apache Web server, mysql as a relational database system, and PHP as a client-side programming language. Each page typically interacts directly with the server and backend databases for each individual page load. This framework now represents a legacy approach to building web applications.

In contrast, a SPA is composed of a single-page web application that refreshes frequently through multiple API calls. While these APIs can be implemented on a backend similar to a LAMP stack, the backend is increasingly implemented as an ever-evolving group of microservices that can be located on one or more cloud platforms. The emergence and popularity of SPAs also correlates with the growth of serverless applications and cloud-native services. Additionally, SPAs are mostly built with more modern client-side development frameworks, such as React, Vue, and Angular.

SPA security

The architecture of SPAs introduces new vulnerabilities that hackers can exploit, as the attack surface moves from the client layers of the application to the APIs, which serve as the data transport layer that refreshes the SPA.

With multi-page web applications, security teams need to secure only individual pages of the application to protect their sensitive customer data. Traditional web security tools such as web application firewalls (WAFs) cannot protect SPAs because they do not fix underlying vulnerabilities found in built-in APIs and core microservices. For example, in the 2019 Capital One data breach, the hacker reached beyond the customer layer by attacking Capital One’s WAF and extracted data by exploiting the underlying API-based cloud services. hosted on AWS.

SPAs require proper indexing of all of their APIs, similar to how multi-page web applications require indexing of their individual pages. For SPAs, the vulnerabilities start with the APIs. Sophisticated hackers often start with multi-layered attacks that reach the customer-facing application and look for unauthenticated, unauthorized or unencrypted APIs that are exposed to the internet to hack and extract customer data. If the first step proves unsuccessful, hackers often collect credentials and tokens by exploiting the client layer to access these built-in APIs.

Additionally, the increase in misconfigurations, especially in the public cloud, requires a whole new approach to attack surface management (ASM) for these modern web applications.

Developers can modify APIs endlessly and quickly, a process even more evident when using GraphQL API versus more established REST APIs. Similarly, cloud storage buckets and cloud-native applications can be misconfigured even though they were initially secured when created and deployed. Unauthenticated APIs often appear when developers accidentally leave unauthenticated or unauthorized APIs when updating features, which is common with SPAs. Indeed, the very appeal of the SPA is its innate flexibility, and this also causes some of its biggest security flaws.

Securing SPAs

To stay secure, organizations with SPAs should migrate to a security program that performs continuous, automated discovery of the entire attack surface of a SPA, starting with dynamic application scanning. customer-oriented to all its underlying APIs, and all the way to the back-end. resources such as storage buckets, serverless cloud functions, containers, and database services.

Traditional web application security tools are not suitable for analyzing and protecting SPAs. A standard Web AppSec Dynamic Application Security Testing (DAST) solution is designed to crawl and index the pages of a multi-page application to understand the attack surface at the client layer, but it is not not designed to deal with multifaceted attacks that probe for vulnerabilities in dynamically rendered API-driven applications. Instead, an SPA needs a comprehensive application security approach.

Mitigating the risks faced by SPAs also requires a comprehensive and ongoing AppSec solution. This approach is necessary for two reasons. First, SPAs are constantly changing, with changes and updates from developers potentially exposing new vulnerabilities. And second, the attack vectors evolve in parallel all the time. A point solution is doomed to failure and manual penetration testing results are doomed to be obsolete.

Another SPA security best practice is to use attack automation, an automated “red team” so to speak, that emulates hackers and continually identifies potential vulnerabilities. With this in place, a comprehensive discovery and remediation solution will never stop checking for vulnerabilities. It runs on the customer-facing web application and APIs that transport sensitive customer data, as well as cloud storage, databases, and microservices.

A complete AppSec solution for securing SPAs should have the ability to alert developers to vulnerabilities. But alerting is never enough. Automatic remediation to triage and repair immediately before a data breach occurs should be part of a DevSecOps strategy to minimize disruption to the CI/CD pipeline.

The best security solution for a SPA will perform continuous detection and vulnerability assessment across all application layers. To meet the demands of ever-changing web application development and cloud migration, enterprises must provide attack surface management across all layers of the application stack: client, API, and cloud services. . Complete AppSec solutions are proven to meet these ever-changing security needs.