How to Secure Single-Page Applications

Let’s face it; consumers’ attention spans are getting shorter by the day. Gone are the days of people willing to wait several minutes for a clunky website with a poor user experience to load. In fact, 47 percent of users expect the average page to load in less than 2 seconds before they leave, resulting in billions in missed potential revenue. With the increased competition for consumer attention, companies have turned to single-page applications (SPAs) to overcome the technical challenge of providing a better experience with fewer development efforts. The widespread use of this technology provides a unique challenge for security teams looking to mitigate their risk of breach, as traditional scanning methods may not provide the necessary coverage. This is alarming because, according to the 2020 Verizon Data Breach Investigations Report, web applications were involved in 43 percent of all breaches.

How SPAs work

SPAs work well because a single HTML page is loaded in the browser and the content is dynamically updated without needing to refresh the entire page. This decreases the chance of users bouncing off the page because of load delays caused by rendering HTML files on uncertain networks. The page can load in as little as 0.2 seconds, which can lead to longer and more meaningful interactions.

In addition to a more engaging experience, SPAs are easy for developers to build and deploy. SPAs are developed using frameworks like React and Angular, making it easy to debug with Chrome. Apps built with these frameworks typically interact with a back end implemented as RESTful API, typically through the fetch() JavaScript call. Since all the data sits under a single location on the client’s side, developers only have to deal with one HTML file, making things much faster and simpler. 

Security challenges with SPAs

Although SPAs provide a better experience for developers and consumers, they come with their own set of security challenges. The inability to adequately scan them, coupled with the large number of SPAs deployed by organizations, give cyberattackers a wide attack surface. Traditionally, multi-page applications have a number of URLs for a scanner to crawl through in order to consider a scan complete. When a scanner does not support single-page applications, it is unable to scan much at all and returns quickly with few CWEs, resulting in a false sense of security.

SPAs are especially vulnerable to Cross-Site Scripting (XSS) attacks, since users are making server requests in JavaScript that result in outputs in HTML. As developers are moving logic and features from the server and to the client, it becomes easy to accidentally allow improper access to confidential data. This can lead to lawsuits, hefty fines, a bad PR storm, and reduced sales due to lack of public trust.

How to prevent your SPAs from getting breached

There are two ways to ensure that SPAs are properly tested for security.

The first is to have an expert penetration tester attack the application manually. Pen testers can find all levels of vulnerabilities, but many organizations like to focus their tests on the areas where automation is difficult, such as business logic. The downside of solely using pen testing is the lack of scalability across the application portfolio, which prevents frequent testing. Without frequent testing, mitigating the risk of attack would be nearly impossible. 

The second solution is to use automated security scanning technologies. Organizations need to use a Dynamic Analysis solution that has the ability to automatically and effectively scan SPAs. Veracode Dynamic Analysis has a unique approach to this problem. Our scanning engine uses an embedded browser in order to record and replay a series of actions that users are likely to take as they browse a single-page application. Because the scanner mimics real-world user actions inside a browser instead of simply observing network traffic, it can navigate through the SPA, despite it only consisting of a single URL. This process is then followed until the application has been successfully scanned. Without an embedded browser, which is the case with traditional dynamic scanning, it is extremely difficult to achieve this same level of coverage.

Learn more

Securing your web applications can seem like a daunting task, but it doesn’t have to be. To learn more, please download our whitepaper, Reducing Your Risk of a Breach with Dynamic Analysis, or to schedule a demo now, click here.