Trouble with '+' Character in URL-Encoded Token String in ASP.NET Core and Angular Application

Issue

I'm experiencing an issue with URL-encoded strings in my ASP.NET 8 Core and Angular 17 application, specifically when handling password reset functionality. The problem arises with the '+' character in the URL-encoded token string.

Backend (ASP.NET Core): I have two API endpoints: ForgotPassword and ResetPassword. In ForgotPassword, a token is generated, URL-encoded, and sent to the user's email. In ResetPassword, the token is decoded and used to reset the user's password.

// ForgotPassword endpoint
// ... Code to generate resetToken ...
var encodedToken = HttpUtility.UrlEncode(resetToken);
var resetLink = $"{frontendBaseUrl}/account/reset-password?token={encodedToken}&date={encodedDate}&email={HttpUtility.UrlEncode(user.Email)}";
await SendResetPasswordEmail(user, resetLink);
// ... Additional Code ...

// ResetPassword endpoint
var decodedToken = dto.Token.DecodeUrlAndRestorePluses();
var result = await _userManager.ResetPasswordAsync(user, decodedToken, dto.NewPassword);
// ... Additional Code ...

Frontend (Angular): In my Angular component, I extract the token from the URL and pass it to the resetPassword method:

// Extracting token, email, and date from URL
this.route.queryParams.subscribe(params => {
    this.token = params['token'];
    this.email = params['email'];
    this.date = params['date'];
});

// ResetPassword method
this.accountService.resetPassword(this.token, this.date, this.email, newPassword)
    .subscribe( /* ... */ );

Issue: When the + character is present in the token, it's getting converted to a space ( ) somewhere in the process. This causes the token validation to fail with an "invalid token" error. I've already tried using HttpUtility.UrlDecode and WebUtility.UrlDecode, but the issue persists.

I've added an extension method DecodeUrlAndRestorePluses to handle this, which seems to work, but I'm not sure if this is the best approach.

public static string DecodeUrlAndRestorePluses(this string encodedString)
{
    var decodedString = HttpUtility.UrlDecode(encodedString);
    return decodedString.Replace(" ", "+");
}

Questions:

1. Why is the + character getting converted to a space, and where might this conversion be happening?
2. Is there a more standard or fundamental way to handle this issue without the need for a custom extension method?
3. Are there any potential pitfalls or security concerns with my current approach?

Any insights or alternative solutions to this problem would be greatly appreciated.

Solution

This issue may happen since the + may be regard as space inside the url.

To solve this issue, I suggest you could consider using the Microsoft.AspNetCore.WebUtilities.

This package contains the Base64UrlEncode method which could solve this issue.

More details, you could refer to below codes:

        var tokenBytes = Encoding.UTF8.GetBytes(resetToken);

        var encodedToken = WebEncoders.Base64UrlEncode(tokenBytes);

Answered By - Brando Zhang