CSRF-suojaus Reactissa ja API-asetuksissa

Cross-Site Request Forgery (CSRF) on hyökkäys, jossa haitallinen verkkosivusto huijaa käyttäjän selaimen lähettämään todennetun pyynnön API:lle. Koska selain liittää evästeet automaattisesti pyyntöihin, palvelin ei pysty erottamaan sovelluksen tekemää aitoa pyyntöä hyökkääjän sivustolta tulevasta väärennetystä pyynnöstä.

Evästeet ovat CSRF-haavoittuvuuden perimmäinen syy. Kun käyttäjä on kirjautunut sovellukseen, hänen istuntoevästeensä on tallennettu selaimeen. Kun hän vierailee hyökkääjän sivulla, hyökkääjä voi käynnistää lomakkeen lähetyksen tai fetch-pyynnön API:lle, ja selain liittää istuntoevästeen automaattisesti mukaan — näin haitallinen pyyntö autentikoituu.

Evästeen SameSite-attribuutti kertoo selaimille, milloin evästeet liitetään sivustojen välisiin pyyntöihin. Sillä on kolme arvoa: Lax (nykyaikaisten selainten oletusarvo — estää sivustojen väliset POST-pyynnöt mutta sallii GET-pyynnöt), Strict (estää kaikki sivustojen väliset pyynnöt, myös GET-siirtymät) ja None (sallii sivustojen väliset pyynnöt, mutta edellyttää HTTPS- ja Secure-määritystä).

SameSite=Lax estää sivustojen väliset POST-, PUT-, DELETE- ja PATCH-pyynnöt — eli mutaatioihin käytetyt menetelmät. Jos API käyttää GET-pyyntöjä vain lukemiseen ja POST-pyyntöjä kaikkiin mutaatioihin, SameSite=Lax estää CSRF:n käytännössä kokonaan modernien selainten SPA-sovelluksissa. Tämä on perustason lievennys, johon useimmat sovellukset nykyään luottavat.

Double Submit Cookie -malli on CSRF:n torjuntamenetelmä, jossa palvelin asettaa satunnaisen CSRF-tokenin evästeeseen, jota HttpOnly ei suojaa. Asiakas lukee evästeen arvon ja lisää sen mukautettuun pyyntöotsakkeeseen, esimerkiksi X-CSRF-Token. Palvelin tarkistaa, että otsakkeen arvo vastaa evästeen arvoa. Hyökkääjä ei voi lukea evästettä eri originista, joten hän ei voi asettaa oikeaa otsaketta.

Synchronizer Token Pattern -malli luo palvelimella jokaiselle käyttäjän istunnolle yksilöllisen CSRF-tokenin. HTML-lomakkeissa token upotetaan piilotettuun kenttään. SPA-sovellusten API-kutsuissa token annetaan päätepisteen tai meta-tagin kautta ja lähetetään mukautetussa otsakkeessa. Palvelin vahvistaa tokenin jokaisen tilaa muuttavan pyynnön yhteydessä.

React-SPA, joka tallentaa JWT:nsä muistiin tai localStorage-tallennustilaan ja lähettää sen Authorization: Bearer -otsakkeessa, ei ole altis perinteiselle CSRF:lle. CSRF-hyökkäykset hyödyntävät evästepohjaista autentikointia — hyökkääjän sivu ei voi CORS-rajoitusten vuoksi asettaa mukautettuja otsakkeita sivustojen välisiin pyyntöihin, joten se ei voi väärentää Authorization-otsaketta.

Yksinkertaiset sivustojen väliset pyynnöt (lomakkeen POST-lähetys ja kuvan lataus) eivät salli mukautettuja otsakkeita. Vain CORS-esitarkistuksen läpikäyvät pyynnöt voivat sisältää mukautettuja otsakkeita — ja esitarkistetut pyynnöt edellyttävät palvelimelta nimenomaista lupaa. API, joka edellyttää kaikissa mutaatioissa mukautettua otsaketta, kuten X-Requested-With: XMLHttpRequest, on luonnostaan suojattu yksinkertaisilta CSRF-hyökkäyksiltä.

CORS määrittää, mitkä origin-osoitteet voivat lukea vastauksen eri originista tehtyyn pyyntöön. CSRF puolestaan koskee sitä, mitkä origin-osoitteet voivat tehdä tilaa muuttavia pyyntöjä. Originien rajoittaminen CORS-asetuksilla ei estä CSRF:ää — selain lähettää edelleen pyynnön ja evästeen, ja CORS määrittää vain, voiko JavaScript nähdä vastauksen. CSRF-hyökkäys ei tarvitse vastauksen lukemista.

Määrittäkää istuntoevästeet seuraavasti: HttpOnly: true (estää JavaScriptiä lukemasta evästettä ja torjuu XSS-pohjaisen tunnisteiden varastamisen), Secure: true (eväste lähetetään vain HTTPS-yhteyden kautta), SameSite: Lax tai Strict (estää CSRF:n) sekä asianmukainen Max-Age tai vanhenemisaika. Nämä neljä attribuuttia yhdessä vahvistavat istuntojen hallinnan turvallisuutta merkittävästi.

Next.js App Router käyttää Server Actions -toimintoja, jotka ovat POST-pyyntöjä. Next.js toteuttaa CSRF-suojauksen tarkistamalla Origin-otsakkeen suhteessa hostiin — odottamattomista origineista tulevat pyynnöt hylätään. Tämä sisäänrakennettu tarkistus yhdessä SameSite=Lax -istuntoevästeiden kanssa tarjoaa vankan CSRF-suojauksen Server Action -pohjaisille muutoksille.

CSRF hyödyntää evästepohjaista tunnistautumista huijaamalla selaimen lähettämään todennettuja pyyntöjä sivustojen välillä. SameSite=Lax on nykyaikaisten selainten perustason suojaus. Double Submit Cookie- ja Synchronizer Token -mallit tarjoavat lisäsuojan. JWT:tä Authorization-otsakkeissa käyttävät React-SPA:t ovat luonnostaan vastustuskykyisiä CSRF:lle. Mukautetut pakolliset otsakkeet ja CORS-esilennätys lieventävät myös CSRF-riskiä. Yhdistä istuntoevästeissä aina HttpOnly + Secure + SameSite.