Post
Ask Question

Blazor Server - How To Store Encrypted Session Data In The Browser

Introduction

While developing for the web in front-end JavaScript, we have access to localStorage and sessionStorage, which are key-value data stores that exist within the user's web browser. These data stores are sandboxed to each website, meaning every website only has access to its own data store, and cannot access localStorage and sessionStorage objects being saved from another website.

The data in these data stores is considered to be volatile, meaning it is not permanent storage and it's never guaranteed to be there. The browser can decide to delete this data or the user can use a PC cleanup tool and all the stored data will be gone.

What's the difference between localStorage and sessionStorage?

Luckily they are easy to differentiate.

  • sessionStorage data only exists while the browser tab, or session, stays open. Once the user closes the tab or exits their web browser, your sessionStorage data is cleared.
  • localStorage data will persist until cleared by the browser or from some user action.

Security implications of using browser storage

It is important to note that even though this data is sandboxed, storing sensitive user data in the browser can lead to many vulnerabilities, especially if your website is the victim of an XSS (Cross-site scripting) attack. For example, if your website includes a third-party script like this,

<script src="https://someawesomewebsite.com/someawesomelibrary.js"></script>

and if that website is compromised, an attacker can potentially insert malicious JavaScript into the library that will retrieve data from localStorage and sessionStorage and send it to their server! Yikes.

Since the security implications of using localStorage are debated, I will focus on the use of sessionStorage in this article. Session storage can be considered somewhat safer, keeping in mind the data is deleted when the session ends.

This is just a friendly reminder to be mindful about the kind of data you store in the web browser.

How can we use sessionStorage in Blazor Server?

With the release of .NET 5, there have been many additions to Blazor Server and Blazor WebAssembly. With these additions we now have access to new classes, such as

  • ProtectedLocalStorage
  • ProtectedSessionStorage

These classes give us access to the client-side sessionStorage and localStorage from within our server-side C# code! Not only is this fact great by itself, these classes are also very easy to use, and they encrypt the data instead of storing it as plaintext.

Note. Although the data is encrypted, it isn't immune to the potential security risks mentioned before.

To begin using these classes, we must first import the class (either in our _Imports.razor file or in the component itself.)

@using Microsoft.AspNetCore.Components.Server.ProtectedBrowserStorage;

And add the following line at the top of your Blazor Component,

@inject ProtectedSessionStorage storage

This will tell the Dependency Injection service to give us a ProtectedSessionStorage instance.

Then to set or get data,

// Set
await storage.SetAsync("greeting", "Hello, World!");

// Get
var greeting = await storage.GetAsync<string>("greeting");

It really is that simple!

Example

Breaking News control

Let's say in our web app we want to have a news alert appear at the top of the page with any breaking news. The user can dismiss this banner, and if it's dismissed, it won't appear again during this session. This is a perfect use-case for session storage because we want the banner to stay dismissed until the next time the user opens your web app.

First, create a new Blazor Component named NewsAlert and type the following code,

@if (showAlert)
{
    <div class="alert alert-primary alert-dismissible fade show" role="alert">
        @Text
        <button type="button" class="close" data-dismiss="alert" aria-label="Close" @onclick="OnDismiss">
            <span aria-hidden="true">×</span>
        </button>
    </div>
}

@code {
    private bool showAlert = false;

    [Parameter]
    public string Text { get; set; } = string.Empty;

    private async Task OnDismiss()
    {
        showAlert = false;
    }
}

This will be the basis for our component. To make this function to our requirements we need,

  • Whenever the component is loaded, check sessionStorage to see if the alert has ever been dismissed. If it hasn't, then show it
  • When the user dismisses the alert, we need to store that data in sessionStorage for the next time the component is loaded during this session.

To check sessionStorage after the component has been loaded, we can write,

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    var result = await storage.GetAsync<bool>("NewsAlert.showAlert");

    bool oldValue = showAlert;

    showAlert = result.Success ? result.Value : true;

    if (showAlert != oldValue)
    {
        StateHasChanged();
    }
}

Let's break down this method.

  • First, we're asking for a bool called NewsAlert.showAlert in sessionStorage.
  • Next, we're keeping a copy of the showAlert value so that later we can check if it actually changed.
  • Then we set the value of showAlert. If there is a value with that key, then set it to that value. Otherwise, it defaults to true.
  • Finally, if the value has changed, invoke the StateHasChanged() method, which tells Blazor we've changed the component state.

Note. Using StateHasChanged() can potentially force the entire component to redraw, so be mindful of its usage. Typically you should never explicitly call this method, but since we're changing the state immediately after the component is rendered, it won't update the state unless we invoke it. You might be asking why we don't use OnInitializedAsync instead, to avoid this issue. This is because Blazor seemingly doesn't like it when we do JS interop inside OnInitializedAsync(). There is a special runtime error when you do it, that says to use OnAfterRender instead.

Now finally we need to update sessionStorage when the user dismisses the alert,

private async Task OnDismiss()
{
    showAlert = false;
    await storage.SetAsync("NewsAlert.showAlert", false);
}

The finished component.

@inject ProtectedSessionStorage storage

@if (showAlert)
{
    <div class="alert alert-primary alert-dismissible fade show" role="alert">
        @Text
        <button type="button" class="close" data-dismiss="alert" aria-label="Close" @onclick="OnDismiss">
            <span aria-hidden="true">×</span>
        </button>
    </div>
}

@code {
    private bool showAlert = false;

    [Parameter]
    public string Text { get; set; } = string.Empty;

    private async Task OnDismiss()
    {
        showAlert = false;
        await storage.SetAsync("NewsAlert.showAlert", false);
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        var result = await storage.GetAsync<bool>("NewsAlert.showAlert");
        bool oldValue = showAlert;
        showAlert = result.Success ? result.Value : true;

        if (showAlert != oldValue)
        {
            StateHasChanged();
        }
    }
}

You can now feel free to use this component like so,

<NewsAlert Text="This is some news text" />

Output

Summary

Although it must be used responsibly, client-side browser storage can prove very useful in your project! With Blazor Server and .NET 5, using this browser storage with your server-side components has never been easier.

Happy coding! Stay safe everyone.


Similar Articles