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

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;
        }

CodePudding user response：

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.