How to securely store an API key in static website

Question

I have a SPA website that is hosted in AWS s3 and served by cloudfront There are multiple CNAMES that connects to this website, e.g. A.Mysite.com, B.Mysite.com I have an API that the static website connects to that only want to serve content for A if the request comes from A.Mysite.com and B if the request comes from B.Mysite.com

Where should I store the API key? I'm guessing it's a bad idea to expose API key on the client side right? I've looked through OAuth, JWT tokens etc. it seems like no matter what way, I still have to send a Access Key to the client side if I don't have a server...

Please help me understand this, since i'm very confused on how security between a static site and API can be achieved without a server.

Mere

This is not possible. The request would not come "from A.Mysite.com." It would come from the client. You will need to redesign so that some piece of the code is not static. Anything you send to the client can be used by the client any way they wish. You cannot stop that. If the API key is not particularly sensitive, then you can play obfuscation tricks (like jumbling the key with some piece of ad hoc complicated code), but it will not survive any serious attack. – Justifiable

Answer 1

Have you looked into Environment variables?

https://www.twilio.com/blog/2017/08/working-with-environment-variables-in-node-js.html

https://hackernoon.com/how-to-use-environment-variables-keep-your-secret-keys-safe-secure-8b1a7877d69c

Monticule

This question seems to be about an SPA running entirely on the client with no server component. These links apply to server-side node. – Justifiable

Ah yes you're correct. I think you can set env variables in a static server config (nginx). Do you control your static server? What service are you using? Maybe something like this: serverfault.com/questions/577370/… – Monticule

No server, only s3. Is there not a way to achieve this at all? Serverless static page are so popular nowadays, why is there not a solution to securely store API keys? – Mere

You cannot avoid to expose the API key without some sort of backend code. The minimum you can do is to create a function in any FaaS provider (even a free one) and use it as a gateway. There you will check your conditions and react consequently. – Rockies