The development of web applications has become exponentially more complex within the past decade, especially with the different approaches available to most developers today. The challenge of building applications is driven mainly by the user experience consumers expect, with platforms like smartphones, tablets, and computers requiring a methodical and calculating approach to succeed. How do developers deliver the desired results to users while not sacrificing security?
That's where Backend for Frontend (BFF) comes into play as a crucial architectural concept in software development. The BFF pattern aims to ease some software development burdens developers face while keeping security posture high, according to modern best practices dictated by leading security experts.
In this article, we'll explore what Backend for Frontend is, what it's capable of, and why you, as an application developer, should care about it.
What is Backend for Frontend?
Backend for Frontend is an architectural pattern that states that every frontend must have a corresponding backend service that manages its secrets, including, but not limited to, sessions, cookies, and security tokens. Some BFF offerings, like Duende's, can securely proxy user requests between the frontend and integral backend APIs, making the token handling between caller and service seamless.
Traditionally, developers would employ OAuth and OpenID Connect to authenticate users within the client-side codebase. These frontends must store sensitive tokens in the browser's local storage or within an unsecured cookie to manage a session. If a user's browser were to be compromised, these tokens could leak, allowing malicious parties to access sensitive information and perform destructive actions. It doesn't take much to compromise a web application, as an attacker only needs to find a way to run unintended JavaScript within the application context, and they can begin to scan the client-side storage locations. While storing tokens client-side is an approach that functionally "works", it is not a recommended practice to continue when building modern web applications due to the security risks associated with the implementation.
BFF improves your application's security posture by relying on tried and true security models built into HTTP over decades of refinements and improvements. The increase in HTTP security features, such as Cross-Origin Resource Sharing, Cookie security, Cross-Site Request Forgery protections, and more, makes it increasingly difficult to compromise a session and leak access tokens from the server. In addition to the HTTP security features, BFF can utilize the ASP.NET Core security models to encrypt and secure sensitive data, such as access and refresh tokens. Even if an attacker could intercept a cookie, they could not unencrypt its contents without access to a secure key. The combination of HTTP and ASP.NET Core security significantly reduces your application's attack surface, making it a less appealing target for attackers.
For developers, the BFF pattern brings simplicity back to building frontend applications. Since BFF relies on cookies, frontend developers don't need to manage security tokens explicitly, nor orchestrate adding the correct headers when making requests to an API - the browser handles all of this. All issued requests from the client will be made to the BFF, and the encrypted cookie will be passed along to validate the user and the intended action. Generally, BFF-based solutions will emphasize business-related code more and less security boilerplate related to managing tokens. Frontend developers enthusiastically love the approach, and their users still get the promised user experiences.
Benefits of Backend for Frontend
We'll explain the benefits of choosing BFF as a fundamental part of your solution architecture for development teams considering BFF for an existing or new solution.
Reliability
BFF is a server-side application, and developers can benefit from its features. In Duende's BFF, built on ASP.NET Core, developers can use any community package to handle API call failures and retries, OpenTelemetry for enhanced tracing, and database storage engines to scale session management. Thus, you can increase the reliability of your solutions in a way that is impossible with client-side-only solutions.
Security
Backend for Frontend architecture is designed to prioritize data confidentiality and system integrity. Implementing best current practices into the solution means you can rest assured that the surface attack area for your solutions is minimized in combination with modern encryption provided by .NET.
Efficiency
BFF makes the frontend development process more efficient by allowing developers to focus on writing business logic without the ceremony of managing tokens on each request. This makes developers more efficient as it simplifies the codebase and allows for more straightforward additions in the future.
Flexibility
With the BFF acting as a proxy between the frontend and backend, API calls going through the BFF to and coming from services can be transformed and modified to meet the solution's needs. This can make integrating new features easier without requiring more dependencies for your frontend solutions. New endpoints with bespoke requests and responses can make reasoning about the frontend easier.
Duende's Features of Backend for Frontend
While BFF is an architectural pattern, our implementation at Duende aims to help development teams implement it in their solutions. Here are some of the features we provide that you may be interested in utilizing:
Protection from Token Extraction Attacks
A token extraction attack is one in which an attacker can get access to a user's access or refresh token to interact with a secure system. With Duende's BFF, tokens are stored in a symmetrically encrypted cookie and are only accessible by entities with access to the private key.
Built-in CSRF Attack Protection
All incoming requests must be made from the application's domain to the BFF, requiring a header value that triggers HTTP security protocols. The added layer of security prevents any third party from issuing requests and receiving responses from the BFF.
Server-side OAuth 2.0 Support
Tokens are managed and attached to their corresponding destinations. If a token needs to be refreshed, the BFF manages those implicitly, and requests are issued and handled as expected.
Client-side Session Management APIs
Adding client-side session management APIs allows frontend developers to track sessions and get authenticated user information from API endpoints. These APIs can help extend a current session or warn users that their session will expire soon.
Server-side Session State Management
Server-side sessions persist in data storage and allow visibility into active sessions and better management techniques. Solutions can receive back-channel logouts and end user sessions, store and view session information, coordinate across application topologies, and alter claims data.
Considerations for BFF Architecture
There are many benefits to using BFFs in your web application architecture, but there are a few trade-offs to consider when setting up Backend for Frontend patterns for deployment.
For starters, BFFs add more moving parts to your architecture, which can feel more overwhelming for developers when iterating or updating applications. Some teams develop frontend solutions wholly isolated from an ASP.NET Core host, which can mean building and maintaining two separate repositories for a single application.
There's also the human element of managing a BFF layer, which involves different teams working and implementing changes differently. If a BFF service is used without keeping logic consistent across interfaces or adhering to a standard schedule, this can create friction amongst product teams. Project progress can be more difficult to track across multiple backends without proper synchronization. However, many of these challenges can be mitigated if good development practices are used across the team.
Most teams gravitate towards a purely frontend solution because development and deployment can be much more cost-effective. In a BFF architecture, you will need a server running an ASP.NET Core process, which is typically more costly than the static hosting cost of JavaScript, HTML, and CSS files. While the hosting costs may be slightly higher with BFF, the cost of a security event dramatically outweighs the financial savings in the long term.
Conclusion
Backend for Frontend (BFF) architecture offers significant benefits for web application development, particularly in security, reliability, efficiency, and flexibility. While it adds complexity to the architecture and potential management challenges, sound development practices can mitigate them. Ultimately, choosing BFF enhances application security, streamlines frontend development, and provides a robust framework for handling sensitive data, making it a valuable approach for modern web applications.
Want to Learn More?
If you want to learn more about BFF and Duende's offerings, check out the Duende (BFF) Backend for Frontend documentation site with detailed explanations of features, security considerations, and working samples.