-1

I have a Vue Storefront which, out of the box, exists of a Nuxt.js front-end and a Express.js back-end.

In this project I created a custom Server Middleware (which is the Express.js part) that has an Axios call in it. My entire Vue Storefront project is hosted and deployed on a server where I also store the secret keys for the Axios call as eviorment variables. Whenever I request data via the Axios call on the deployed website, I can still see my secret keys in payload in the browser console.

Can these keys be hidden? Since the call is done in the VSF Server Middleware (which is a Express.js server under the hood) and my secret keys are defined on the server too... Not in a .ENV file.

The official docs also state the following about the server middleware:

  • Securely store credentials on the server without exposing them to theend-users of your application,

I also have Server Side Rendering enabled, if this has any effect on this.

Craws
  • 576
  • 4
  • 30
  • 1
    Your backend/server should serve as a proxy for the request to the API you're using. So, you do a request to your backend (using `fetch` or something similar), and your backend does it's own HTTP request to the actual API you want to consume. That way, your end user does not directly have access to the API (key)/ – nbokmans May 30 '22 at 12:54
  • And there is no way that the Express.js part of the app (which is included in the project with Nuxt ) can do this? It must be a new, stand-alone project that will serve as the proxy? – Craws May 30 '22 at 12:56
  • 1
    The proxy functionality mentioned by @nbokmans can be programmed as part of your express.js server. – Heiko Theißen May 30 '22 at 14:55
  • @HeikoTheißen Could you elaborate on that? I can not seem to find how I can make my express.js serve as a proxy. – Craws May 30 '22 at 15:01

1 Answers1

0

As explained in my previous answer here, you cannot really hide anything on a client side app.

The fact that you do have ssr: true and target: 'server' enables the usage of a serverMiddleware. Nuxt is also an Express server, so you could technically still totally hide stuff, the configuration of this one is detailed here. Please pay attention to the whole answer (especially the gotcha at the end).

The TDLR is as mentioned above: you'll need some kind of proxy to hide that, so you could do that:

  • directly with Nuxt2 but it's kinda tricky and hard to work with overall, on top of paying a whole Node.js server and a possible mistake exposing those tokens at some point
  • get another Node.js server to properly separate the concern and use that one as a proxy, it can be pretty light (no need for a beefy configuration), not as expensive price-wise
  • a serverless function could be the best idea here because it's light, cheap and you don't need to manage anything (send your query there, it will proxy the request with the secret token) but it can be a bit annoying regarding cold starts
kissu
  • 40,416
  • 14
  • 65
  • 133