Egyik webfejlesztéssel foglalkozó csoportban szó volt arról, hogy hogyan lehet elrejteni egy API kulcsát.
Az API-k nagy része kulcsot (van ahol token-nek hívják) kér, hogy hozzáférhess az adataihoz. Ha ezt a kulcsot vagy tokent publikus helyre rakod ki, például frontend kódba, akkor az is előfordulhat, hogy ezt valaki ellopja. És ha a kulcs nincs pluszban hozzárendelve az oldaladhoz, akkor simán használhatja a saját oldalán. Ha az API erőforrás korlátozva van (például meg van szabva havi vagy napi limit), akkor, ha más is a te kulcsodat használja, akkor az a te limited kárára fog menni. Ez akkor a legszebb, ha esetleg valamely limit elérése után esetleg még fizetned is kell. Akkor bizony bajban vagy, ha lelopták a kulcsod és mondjuk 10000 hívást kezdeményeztek vele az API felé.
Mi a megoldás? Helyezzük az API kulcsot backend-re, ami lehet PHP vagy akár Node.JS vagy akár Python is. A szerveren is a legjobb, ha nem a source kódba tesszük, mert mi is elkövethetünk olyan hibát, hogy valahogy kipublikáljuk a forráskódot a szerverről csak úgy alanature vagy esetleg szeretnénk feltenni a kódunat a Githubra és ezzel együtt az API-unk kulcsát is kitesszük oda. És akkor ország-világ viheti. Épp ezért egy környezeti változóba érdemes tenni jól elkülönített helyen a forráskódtól is. A PHP esetében be lehet tenni a PHP.ini-be vagy node esetén .env fájlba, amit véletlen se töltünk fel sehová vagy nem válik letölthetővé akár egy szerveres bug miatt. Ahogy a MySQL user/pass adatokat sem tesszük ki ilyen helyekre, így az API kulcsokkal is érdemes így bánnunk.
Készítettem NODE.JS-el egy API proxyt, ami fetchel rácsatlakozik a Weatherapi.com-ra, megadja neki a környezeti változóból az API kulcsot. A kapott adatokból új JSON adatot generál. Úgy van beállítva, hogy csak egy bizonyos origin-ből férhessenek hozzá. (A példakódban ez most a cdpn.io). Így a Codepenes frontendről nem az API kulcsommal indítok kérést a Weatherapi.com felé, hanem a PROXY backendemhez a kulcs nélkül. A kérésre a PROXY BACKEND indít kérést a Weather.com felé és elküldi az adatokat és az API kulcsot is. A választ pedig továbbítja a Codepenes frontend felé. Így a frontend semmit nem tud a kulcsról.
PROXY BACKEND: https://codesandbox.io/s/weather-proxy-pmuilu?file=/Server.js
FRONTEND: https://codepen.io/bzozoo/pen/JjpLEMM
WEATHERAPI.COM dokumentáció:
https://www.weatherapi.com/docs/
Először a backendet nyissátok meg, mert ezek a Codesandbox-os Node backendek olyanok, hogy ha nincs feléjük kérés, akkor maguktól "elalszanak"
A későbbiekben pedig írok bejegyzést magáról a kódról is.
