How to secure Keys in Javascript?

Question

How to secure Keys in Javascript?

Dondon510 261

I use APIKey, APISecret and Deployment to constant variables like below:

public const string Path = "/Deploy/Here";  
public const string APIKey = "xyzApIKeY";  
public const string APISecret = "zbcApISeCrEt";

I call controller using ajax like below:

    $.ajax({  
                    type: 'POST',  
                    url: '@MyApp.Models.AppSettings.Application.Path' + '/Sales/Add_Update/' + '@Model.xData',  
                    data: fd,  
                    processData: false,  
                    contentType: false,  
                    headers: {  
                        apiKey: '@MyApp.Models.AppSettings.Application.APIKey',  
                        apiSecret: '@MyApp.Models.AppSettings.Application.APISecret'  
                    },  
                    success: function(result) {  
                          
                    },  
                    error: function(result) {  
                           
                    }  
                });

everything (Path, APIKey, APISecret) are displayed clearly in javascript, any tips or idea on how to secure or hide it?

I need advice

thanks a lot in advance

Accepted answer

6 additional answers

Your answer

Answer 1

Bruce (SqlWork.com) 77,686 Volunteer Moderator

If you are authenticating (looks like cookie) why does the client need an api key and secret?

Dondon510 261 Reputation points

2022-07-04T14:49:31.45+00:00

Because I call the controller/action using ajax, like for example User/Login, Sales/Index
Bruce (SqlWork.com) 77,686 Reputation points Volunteer Moderator

2022-07-04T16:42:00.023+00:00

The ajax requests will include the authentication cookie. Why do you did an additional secret? The user name and claims are in the cookie.

Note: because you are using cookie authentication with Ajax, the server will need to return an error on expired authentication cookie, rather than redirect to login page.
Dondon510 261 Reputation points

2022-07-05T00:39:15.717+00:00

Hi @Bruce (SqlWork.com)
Sorry, I'm not really sure about this, can you provide me a simple example?
Dondon510 261 Reputation points

2022-07-06T03:46:46.477+00:00

@Bruce (SqlWork.com)

I got your clue! thank you

Answer 2

Dillon Silzer 57,826 Volunteer Moderator

You cannot hide API/secrets with pure javascript as javascript is on the client-side. You need to hide this information via server-side scripts/wrappers. I'd recommend you build a PHP application that javascript calls and the PHP script returns information from the API in some type of readable format.

Answer 3

Dondon510 261

hmm, unfortunately, I don't understand PHP, can we just use Netcore?

Dillon Silzer 57,826 Reputation points Volunteer Moderator

2022-07-02T06:16:34.18+00:00

If I am understanding you correctly, you understand how to use ASP.NET Core. It looks like there is a couple of tutorials for creating this.

Tutorial: Create a web API with ASP.NET Core

https://learn.microsoft.com/en-us/aspnet/core/tutorials/first-web-api?view=aspnetcore-6.0&tabs=visual-studio

Tutorial: Call an ASP.NET Core web API with JavaScript

https://learn.microsoft.com/en-us/aspnet/core/tutorials/web-api-javascript?view=aspnetcore-6.0

-----------------------

You can also look at a NodeJS tutorial for accomplishing hiding your API Key. This looks like a really simple tutorial.

How to Hide API Keys with Node JS | Hiding API Keys with dotenv Environment Variables

https://www.youtube.com/watch?v=uk9pviyvrtg
Dondon510 261 Reputation points

2022-07-02T06:52:10.783+00:00

Thank you, currently I call controller using ajax and the API Key, Secret being exposed!.. really bad!..
if you have suggestion to prevent this, that's would be helpful
AgaveJoe 30,126 Reputation points

2022-07-02T11:40:29.537+00:00

The standard solution is using proxy and cookie authentication. The JavaScript calls an MVC action and the MVC action calls Web API.

Answer 4

Dondon510 261

I use this way, example:

Controller -> Index -> View -> Index.html -> Javascript -> Call Controller using Ajax (this is the problem, the API Key, Secret clearly exposed!)

really need advice, how to deal with this, I have to secure the key

AgaveJoe 30,126 Reputation points

2022-07-02T15:09:37.317+00:00

The goal is not possible with the current design. Take advantage of the very common 3-tier design.

JavaScript (AJAX) -> Web application (cookie auth) -> Web API (bearer token).

The Web application hosts the API key and makes calls to Web API. In other words a proxy.
The Web application also host cookie authentication which handles the client (browser) authorization.
Dondon510 261 Reputation points

2022-07-02T15:22:19.34+00:00
How about if I use below scenario:

I will use JWT for user login, and every user will receive randomize API Key and API Secret every time they logged-in, and they access the Web API using their own API Key and API Secret, of course in Web API, we will have to validate the user id + API Key + API Secret as their access authentication, what do you think?
Dondon510 261 Reputation points

2022-07-02T16:07:12.417+00:00

@AgaveJoe

Actually currently I did like you mentioned (JavaScript (AJAX) -> Web application (cookie auth) -> Web API (bearer token).)

Javascript (AJAX) user login after they logged in, they need to get some info, so they access the controller again through AJAX then the API key & secret would be exposed!

ie.

AJAX Call Login Controller (using API Key and Secret)
after they logged in, they would get the list of their sales --> this process will call a Sales Controller -> List Action and I use AJAX (this stage API Key and Secret exposed) .. also the other things
AgaveJoe 30,126 Reputation points

2022-07-03T10:46:33.957+00:00
You made up a scenario. Learn OAuth/OIDC flows and client types. You get to pick a flow that fits your security needs.

https://auth0.com/docs/get-started/authentication-and-authorization-flow/which-oauth-2-0-flow-should-i-use

I'm recommending a web application OAuth client (not JavaScript) and using the Authorization Code Flow. The Web Application contains the API Key and Secret not the JavaScript application.

The login flow is...

Browser tries to access a secured resource and is redirected to the authentication server to login. The API key and secret are passed.

The user logs in. Usually the auth server sets an authentication cookie for SSO.

The authentication server redirects the browser back to the web application and passes along the token. The redirect URL is configured when you register your application with the auth server. See your auth server documentation.

The web application creates an authentication cookie and caches the token.

Often the token is cached in the authentication cookie. The contents of the authentication cookie are encrypted.

JavaScript (AJAX sends auth cookie) -> Web application (authorizes cookie | fetches bearer token from cache) -> Web API (authorizes bearer token)

The concept of using a web application proxy is not new and in my experience mandatory. It is a security vulnerability to let the browsers talk to Web API (application services) directly. Usually application services are behind a firewall and not exposed to the public. Only the web application can talk to the web API application.

Answer 5

Dondon510 261

@DillonS-2060
can you give me an example?, I'm not familiar with PHP, or perhaps there is another tricks in ASP MVC Netcore 6 to deal with this?, I use this way:

Controller -> Index -> View -> Index.html -> Javascript -> Call Controller using Ajax (this is the problem, the API Key, Secret clearly exposed!)

Share via

How to secure Keys in Javascript?

6 additional answers

Your answer