Technologieaustausch

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Um Cross-Site Request Forgery (CSRF)-Angriffe zu verhindern, können bei der Frontend-Entwicklung die folgenden gängigen Sicherheitsmaßnahmen ergriffen werden:

1. Verwenden Sie CSRF-Token

Dies ist einer der am häufigsten verwendeten Abwehrmechanismen.

• Token generieren: Nachdem sich der Benutzer angemeldet hat, generiert der Server ein zufälliges, unvorhersehbares CSRF-Token und speichert es auf der Serverseite. Gleichzeitig wird es über den Set-Cookie-Header an den Client gesendet und im Cookie des Benutzers gespeichert.

• Formular eingebettetes Token: Fügen Sie in jedem HTML-Formular, das geschützt werden muss, ein ausgeblendetes Feld hinzu (<input type="hidden">), wird sein Wert auf das aus dem Cookie gelesene CSRF-Token gesetzt.

• VerifyToken : Wenn das Formular gesendet wird, erhält das Backend die Formulardaten und das Token im Cookie (aufgrund der Same-Origin-Richtlinie sendet der Browser das Cookie automatisch). Die Serverseite überprüft, ob das Token im Formular mit dem auf der Serverseite oder in der Sitzung gespeicherten Token übereinstimmt. Bei Inkonsistenz wird die Anfrage abgelehnt.

2. Überprüfen Sie den HTTP-Referer und den Origin-Header

Obwohl es nicht völlig zuverlässig ist, da Referrer und Origin möglicherweise manipuliert sind oder fehlen, kann es in einigen Szenarien dennoch als Hilfsmittel verwendet werden.

• Überprüfen Sie den Referenten : Überprüfen Sie das Feld „Referer“ im HTTP-Anforderungsheader, um sicherzustellen, dass die Anforderung vom erwarteten Domänennamen initiiert wird. Es ist jedoch zu beachten, dass diese Methode Einschränkungen aufweist. Beispielsweise wird bei einer Downgrade-Anfrage von HTTPS auf HTTP der Referrer nicht gesendet.

• Überprüfen Sie den Origin-Header: Ähnlich wie bei Referer liefert der Origin-Header Informationen über die Quelle der Anfrage, wird jedoch nur gesendet, wenn XMLHttpRequest oder die Fetch-API verwendet werden.

3. Verwenden Sie das SameSite-Cookie-Attribut

Für Cookies, die keinen standortübergreifenden Zugriff erfordern, kann das SameSite-Attribut gesetzt werden, um die Sicherheit zu erhöhen.

• SameSite=Lax: Cookie wird nur bei Anfragen auf derselben Website gesendet und schützt teilweise vor CSRF.
• SameSite=Streng: Cookies werden nur innerhalb derselben Website und innerhalb derselben Seitennavigation gesendet, was einen stärkeren Schutz bietet, jedoch möglicherweise einige erwartete subdomainübergreifende Funktionen beeinträchtigt.
• SameSite=Keine: Muss mit dem Secure-Attribut für Cookies verwendet werden, die standortübergreifend sein müssen, um sich an die Anforderungen moderner Browser anzupassen.

4. Überprüfung des benutzerdefinierten Anforderungsheaders

Fügen Sie der AJAX-Anfrage einen benutzerdefinierten HTTP-Header hinzu (z. BX-Requested-With: XMLHttpRequest ) und überprüfen Sie dann die Existenz und den Wert dieses Headers auf der Serverseite. Da JavaScript den Header von XMLHttpRequest frei festlegen kann, die normale Formularübermittlung jedoch nicht, kann dies von Skripten initiierte Anforderungen unterscheiden.

Beispielcode (CSRF-Token-Implementierung):

Serverseitig (Pseudocode):

// 生成并设置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

Frontend-HTML:

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

Bitte beachten Sie, dass der obige Code nur ein Beispiel ist und die tatsächliche Anwendung entsprechend dem Backend-Framework und der verwendeten Sprache angepasst werden muss.