https://kotlinlang.org logo
#webassembly
Title
# webassembly
a

Abdul Basit

03/16/2024, 7:53 AM
Hello, I am using Weather API in app. I am reading the secret locally from
secret.properties
and in CI/CD, i have added variables. Now when
wasmJsBrowserProductionExecutableDistributeResources
task is run, and i try to push the files, i get:
Copy code
—— WorkOS Production API Key —————————————————————————        
remote:    locations:        
remote:      - commit: e1945e4582844cf57dbfd6c04b1d7d8d79d11c6d        
remote:        path: docs/skiko.wasm:40175
Now how i can obfuscate/protect my secret in
skiko.wasm
? or is there any way around ?
m

mohamed rejeb

03/16/2024, 8:25 AM
For web you can put your keys in
.env
and set the
.env
variables in your server. I didn't try it with Kotlin but that's what they do in js. But the token will be visible anyway from the network inspector, So you need to add more restrictions by accepting api calls only from your website domain or something like that.
a

Abdul Basit

03/16/2024, 8:26 AM
Hmm, so like you need to add server in the middle ?
app -> your server -> weather endpoint
1
m

mohamed rejeb

03/16/2024, 8:28 AM
No that's not what I meant, now I thing that you are deploying your website using something like netlify or another cloud provider.
You should be able to set environment variables from your could provider and have access to them in your code.
a

Abdul Basit

03/16/2024, 8:31 AM
So i am deploying my app on github pages. I have set the env variable there and reading that. Issue is in skiko.wasm, because once the file is build, the key is added inside that.
m

mohamed rejeb

03/16/2024, 8:38 AM
https://stackoverflow.com/questions/53648652/how-to-use-environment-variables-in-github-page Check this one, you will access the env variables at runtime so they will not be compiled with your code. I didn't try it with gh pages but I think it should be possible with Kotlin/JS.
👀 1
You will have something like this in your code:
Copy code
const apiKey = process.env.REACT_APP_APIKey
const apiSecret = process.env.REACT_APP_APISecret
j

Jacob Ras

03/16/2024, 9:38 AM
No matter what you do, without a server in between the secret will no longer be secret because, as mentioned above, anyone can look in the inspector and grab the token. So keep that in mind and decide how important that is to you (i.e. what are the risks of this particular secret being public information).
d

Darryl Miles

03/16/2024, 7:54 PM
Ermm... this is a secret that is used to identify your customer base at the 3rd party service provider ?
For example you pay a subscription to allow 1000 users a month to access to weather ? you get an API key. But all client users need the API key to access the 3rd party weather service, so it can not be a secret from the client
It is upto the 3rd party to provide a mechanism to help you protect it (but their aims are usually just to bill you more). Technology such as Kerberos tickets (maybe JWT) maybe useful in this area, such that your server periodically asks for a new temporal key (using the secret), this temporal key is the one given to clients to use directly against the service (the one WASM loads), you use this ticket for all clients for an hour, but that ticket expires in 2 hours, so this means any attacker who gets your current key, it will only work for 2 hours. So at least if there an information disclosure issue, the attacker must be accessing your server to refresh as well every 2h, which means you can block them. But maybe this just lifts the barrier to attack your key higher than is worth the hassle.
☝️ 1
a

Abdul Basit

03/17/2024, 5:16 AM
Hmm, so the best possible solution is to have a backend in the middle. it is Open Weather Api key.
Thank you everyone
10 Views