Q: What is the best way to store api keys in a Blazor WASM application?

Question

I am using a blazor web assembly application that is not asp.net core hosted for a personal website. This website is integrated with Contentful CMS which requires an api key, preview key and space id. I am currently storing these inside my own appsettings.json in www/root and accessing them by injecting IConfiguration into my service, and then accessing the values through the GetSection method.

They take the form:

    "DeliveryApiKey": "A",
    "ManagementApiKey": "not used",
    "PreviewApiKey": "B",
    "SpaceId": "C",```

This is fine for running it locally, but after some researching online, these keys would be readable and visible to users if deployed and dlls decompiled.

What is the best way to store api keys with a blazor web assembly application? I am wondering if I should create a asp.net core hosted blazor project which would give me a server and shared project, but if I were to deploy it, I am unsure if that would work with github actions and.netlify if I were to solely deploy the 'server' side of my project. What is the best course of action?

*Edit, this is how I use those keys to access the contentful CDA. This is the way based off the documentation.

        {
            var apiKey = _configuration.GetSection("ContentfulOptions").GetSection("DeliveryApiKey").Value;
            var previewKey = _configuration.GetSection("ContentfulOptions").GetSection("PreviewApiKey").Value;
            var spaceid = _configuration.GetSection("ContentfulOptions").GetSection("SpaceId").Value;
            var httpClient = new HttpClient();
            var client = new ContentfulClient(httpClient, apiKey, previewKey, spaceid);
            return client;
        }

Answer 1

In general, if any secret (API key, password, etc) is available on the client (web browser, desktop app, etc), regardless of what the medium is - Blazor WASM included - it's only a matter of persistence before such secret is compromised. Encryption is of little help, because you still need the actual clear-text version at some point on the client, in order to facilitate access.

I would strongly recommend keeping any sensitive info server-side. In case of a Blazor WASM app, this means a secondary Web API, etc, accessible from the client (yes, that's still a security risk, but a far more typical one - secure APIs are a solved problem, with Identity Framework, for instance, and similar techniques).

I'd still recommend using a Key Vault service for anything really sensitive, even for server-side access (this is primary use case for a key vault anyhow) - it's a much better practice than storing the keys locally, embedded in the app, committed to GitHub, etc.

Take a look at this video (I promise I don't make a commission off Azure sales, I just really do think it's a great solution). The video is featuring a Blazor Server app, but the technique is easily adaptable to a Blazor WASM app calling a Web API.

Answer 2

Coming back to provide an answer after thinking through the problem. I decided to create a web api to this project, and write services to consume that which does the dirty work querying ContentfulCDA. All I have to do is deserialize it into whatever I liked. This seems to be the best way forward, as the api keys would be visible on the client side through appsettings.json.

Furthermore, apparently appsettings.json in blazor wasm projects cannot access environmental variables as they are not exposed to the browser, so my idea of using EVs does not work - So the web api is the best way forward, and Azure Key Vault would be the next step in securing those keys.

Tudor