Käyttöliittymähaastattelun kysymys 50 (Millä yleisillä käyttöliittymän suojaustoimenpiteillä voidaan estää CSRF-hyökkäykset?)

2024-07-12

Lisää kuvan kuvaus tähän
Cross-Site Request Forgery (CSRF) -hyökkäysten estämiseksi käyttöliittymäkehityksessä voidaan toteuttaa seuraavat yleiset suojatoimenpiteet:

1. Käytä CSRF-tunnusta

Tämä on yksi yleisimmin käytetyistä puolustusmekanismeista.

Luo Token: Kun käyttäjä kirjautuu sisään, palvelin luo satunnaisen, arvaamattoman CSRF-tunnuksen ja tallentaa sen palvelinpuolelle. Samalla se lähetetään asiakkaalle Set-Cookie-otsikon kautta ja tallennetaan käyttäjän evästeeseen.
Lomakkeeseen upotettu Token: Lisää jokaiseen suojausta tarvitsevaan HTML-lomakkeeseen piilotettu kenttä (<input type="hidden">), sen arvoksi asetetaan evästeestä luettu CSRF-tunnus.
VerifyToken : Kun lomake lähetetään, taustajärjestelmä vastaanottaa lomaketiedot ja evästeessä olevan Tokenin (sama alkuperäkäytännön vuoksi selain lähettää evästeen automaattisesti). Palvelinpuoli tarkistaa, onko lomakkeessa oleva Token yhdenmukainen palvelinpuolelle tai istuntoon tallennetun Tokenin kanssa. Jos ne ovat ristiriidassa, pyyntö hylätään.

2. Tarkista HTTP Referer ja Origin Header

Vaikka se ei ole täysin luotettava, koska viittausta ja alkuperää saatetaan peukaloida tai ne puuttuvat, sitä voidaan silti käyttää apuvälineenä joissakin skenaarioissa.

Tarkista Referer : Tarkista HTTP-pyynnön otsikon Viittaus-kenttä varmistaaksesi, että pyyntö aloitetaan odotetusta toimialueen nimestä. On kuitenkin huomattava, että tällä menetelmällä on rajoituksia. Esimerkiksi HTTPS:stä HTTP:hen siirrettäessä viittausta ei lähetetä.
Tarkista alkuperäotsikko: Kuten Viittaus, Origin-otsikko antaa tietoja pyynnön lähteestä, mutta se lähetetään vain käytettäessä XMLHttpRequest- tai Fetch API -sovellusta.

3. Käytä SameSite Cookie -määritettä

Niille evästeille, jotka eivät vaadi pääsyä sivustojen välillä, SameSite-attribuutti voidaan asettaa turvallisuuden parantamiseksi.

SameSite=Lax: Eväste lähetetään vain saman sivuston pyynnöissä, mikä suojaa osittain CSRF:ltä.
SameSite=Tiukka: Evästeet lähetetään vain saman sivuston sisällä ja samalla sivulla navigoinnissa, mikä tarjoaa vahvemman suojan, mutta voivat vaikuttaa joihinkin odotettuihin aliverkkotunnusten välisiin toimintoihin.
SameSite=Ei mitään: Sitä on käytettävä Secure-attribuutin kanssa evästeille, joiden on oltava sivustojen välillä mukautuakseen nykyaikaisten selainten vaatimuksiin.

4. Mukautetun pyynnön otsikon vahvistus

Lisää mukautettu HTTP-otsikko AJAX-pyyntöön (esimX-Requested-With: XMLHttpRequest ) ja tarkista sitten tämän otsikon olemassaolo ja arvo palvelinpuolella. Koska JavaScript voi vapaasti asettaa XMLHttpRequestin otsikon, mutta tavallinen lomakkeen lähetys ei, tämä voi erottaa komentosarjojen käynnistämät pyynnöt.

Esimerkkikoodi (CSRF-tunnuksen toteutus):

Palvelinpuoli (pseudokoodi):

// 生成并设置Token
function generateCsrfToken() {
    return crypto.randomBytes(32).toString('hex');
}

app.post('/login', (req, res) => {
    const token = generateCsrfToken();
    res.cookie('csrfToken', token, { httpOnly: true, secure: true, sameSite: 'strict' });
    // 存储token到session或其他存储机制
});

app.post('/submitForm', (req, res) => {
    if (req.body.csrfToken === req.cookies.csrfToken) {
        // 请求合法，处理逻辑...
    } else {
        // CSRF攻击检测，拒绝请求
        res.status(403).send('Forbidden');
    }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

Käyttöliittymän HTML:

<form action="/submitForm" method="POST">
    <!-- 其他表单字段... -->
    <input type="hidden" name="csrfToken" value="{{csrfToken}}">
    <button type="submit">Submit</button>
</form>
1
2
3
4
5

Huomaa, että yllä oleva koodi on vain esimerkki, ja varsinaista sovellusta on mukautettava taustakehyksen ja käytetyn kielen mukaan.

Teknologian jakaminen