Hide API token from generated .cshtml page source code

Question

I have a .cshtml page, where a click on a button calls an API

Currently, my JS code looks like:

var headers = {};
headers["Authorization-Token"] = '@Model.ApiToken';

$.ajax({
    url: "my-url",
    type: "GET",
    headers: headers
});

However, if the end-user opens the browser console, goes to the Network tab, searches for the generated cshtml , he can see:

The token can be seen in clear text (cropped in the above picture for exhibit)
I can't call my API without this header, as the call is immediately rejected if the header is not present

Is there a way to hide it to the end-user, and if so, how?
Thank you

Answer 1

It is better to keep the tokens outside the browser, one option is to store the token inside the cookie (encrypted of course). ASP.NET Core can handle that for you automatically. Or in the backend as part of the user session.

An perhaps better option is to look at using the Backend For Frontend (aka BFF) pattern to secure SPA applications.

See

• Backend For Frontend Authentication Pattern with Auth0 and ASP.NET Core
• The BFF Pattern (Backend for Frontend): An Introduction
• Securing SPAs using the BFF Pattern (once and for all)