How BFF Helps Secure Single Page Applications

Despite their small size compared to complex web software, single page applications (SPA) also require robust security. What is a single page application? Simply put, they are basic websites, but with functionality that goes beyond static HTML. For example, they typically update content on the page without performing a refresh, offering a more seamless user experience.

Most SPAs make calls to internal and third-party APIs to perform tasks, and have a form of database access through such APIs. As a result, they provide a potential attack vector for cybercriminals and other nefarious attackers. Protecting these SPAs becomes easier when using a software architecture approach known as the backend for frontend (BFF) pattern.

Let's examine how the BFF protects single page applications. In fact, this same pattern also helps complex web applications enjoy similar levels of security. Adopting this simple design pattern keeps unethical hackers out while you provide users with a more responsive application. Read further to learn how the backend for frontend pattern helps developers build more secure software.

What is a Single Page Application?

Before we dive into the BFF pattern, let's examine the concept of an SPA in more detail. As highlighted above, it's a singular web page able to update its own content dynamically, without a page refresh. When clicking on a button or another on-page control, the browser manages this interaction without a page refresh. JavaScript typically provides the programmatic logic used in an SPA, with React serving as one widely-used example.

Still, these SPAs access data via APIs, as a source for the dynamic information rendered on the page. As a result, they provide an alluring attack surface for cybercriminals. These attack techniques include cross-site scripting (XSS), cross-site request forgery (CSRF), and even stealing access tokens. The latter case is especially dangerous, as unethical hackers might use that token to access critical databases or servers.

In the end, combining the convenience of an SPA with the rigorous cybersecurity footprint of BFF makes perfect sense. Now, let's examine how the backend for frontend pattern provides strong security for any single page application. The Duende BFF Security Framework offers a simple and rigorous approach for achieving this goal.

Intelligent Token Management helps the BFF protect Single Page Applications

With the BFF pattern, developers craft bespoke server-side components to support different front-end clients. They might be a smartphone, a desktop browser, or even a remote device on the IoT. However, this pattern also facilitates adopting a stronger cybersecurity footprint.

Improved token management lies at the heart of the Duende BFF Security Framework. However, our framework also includes protection against other attack vectors, including XSS and CSRF. This makes it a useful solution for companies looking to protect their SPAs and more complex web applications.

In Duende's implementation of the backend for frontend pattern, access tokens are no longer stored in the browser. This simple piece of functionality greatly hampers an attacker's ability to steal these tokens. As noted earlier, hacking into those tokens provides access to security credentials potentially usable for even more nefarious purposes.

Our BFF framework effectively moves the OpenID Connect authentication flow from the browser to the server. As a result, access (and even more critical refresh) tokens are now managed on the server. In their place, a secure and HTTP-signed authentication cookie informs the browser that a user is logged-in. Managing tokens on the server in this manner makes front-end development easier with a significant increase in application security.

Implementing the Duende BFF Security Framework on the Server

Applying the Duende BFF Security Framework to an existing SPA project is a straightforward process. Let's take a closer look.

• On the backend, add a package reference to Duende.BFF library, which applies for SPAs only using local APIs. For projects that also call third-party APIs using reverse proxies, add a package reference to Duende.BFF.Yarp. This package leverages Microsoft's existing Yarp reverse proxy framework.
• Implement cookie authentication on the server side. In the code, add a function call to the Duende BFF (which includes the built-in CSRF protection). Configuring the OpenID Connect flow also happens at this point.
• Another function call adds the BFF endpoints used by the client for login/logout and other application support.

Notably, proxying the app's index.html file makes the user experience more responsive, as it is the main entry point to the SPA. Having the application root on the same host as the BFF also allows for more strict cookie handling, further increasing browser security.

Modifying the Frontend Code

With the BFF Security Framework now handling token management and API calls server-side, the frontend code naturally becomes simpler.

• First, remove any OpenID Connect authentication logic and references, since this functionality now resides on the server. In the BFF, the authentication functionality is wrapped in a layer and accessed from the /BFF/User endpoint.
• Remember to include the CSRF header in all requests to the Duende BFF authentication framework for protection against that attack type.
• Replace references to the older auth provider with those for the Duende BFF authentication framework.
• Replace older code for verifying user authentication and handling token management with redirects to the BFF URLs.

Needless to say, this greatly simplified client code makes maintenance a breeze in addition to the critical security benefits.

Taking a Deeper Dive into the Duende BFF Framework

If you want to explore implementing the Duende BFF Security Framework in more detail, check out our webinar:

In this video, the product owner for our BFF security library, Erwin van der Valk, implements the Duende BFF on a React SPA. You see firsthand how easy it is to apply the framework to an existing project.

Erwin also covers some of the upcoming features in the soon-to-be-released version 4 of the Duende BFF Security Framework. A question-and-answer session provides helpful information for those looking to make their SPAs more secure. Check out the chat replay for useful insights as programmers ask Duende's experts helpful questions on BFF.

Want to Learn More?

Review Duende's Backend for Frontend for more details about product features and benefits. Additionally, our robust documentation library includes helpful Quickstarts, providing hands-on exposure to BFF and the rest of our products. In the end, our BFF Security Framework offers an easy and effective way to secure your company's single page applications!