Pregunta 50 de la entrevista de front-end (¿Qué medidas de seguridad de front-end comunes pueden prevenir ataques CSRF?)

2024-07-12

Insertar descripción de la imagen aquí
Para evitar ataques de falsificación de solicitudes entre sitios (CSRF), se pueden tomar las siguientes medidas de seguridad comunes en el desarrollo front-end:

1. Utilice el token CSRF

Este es uno de los mecanismos de defensa más utilizados.

Generar ficha: Después de que el usuario inicia sesión, el servidor genera un token CSRF aleatorio e impredecible y lo almacena en el lado del servidor. Al mismo tiempo, lo envía al cliente a través del encabezado Set-Cookie y lo almacena en la cookie del usuario.
Formulario de token incrustado: En cada formulario HTML que necesite protección, agregue un campo oculto (<input type="hidden">), su valor se establece en el token CSRF leído de la cookie.
Verificar token : Cuando se envía el formulario, el backend recibirá los datos del formulario y el token en la cookie (debido a la política del mismo origen, el navegador enviará la cookie automáticamente). El lado del servidor verifica si el Token en el formulario es consistente con el Token almacenado en el lado del servidor o en la Sesión. Si son inconsistentes, se rechaza la solicitud.

2. Verificar el referente HTTP y el encabezado de origen

Aunque no es completamente confiable porque el Referer y el Origin pueden estar alterados o faltar, aún puede usarse como medio auxiliar en algunos escenarios.

Consultar referente : Verifique el campo Referer en el encabezado de la solicitud HTTP para asegurarse de que la solicitud se inicie desde el nombre de dominio esperado. Sin embargo, cabe señalar que este método tiene limitaciones. Por ejemplo, en una solicitud de degradación de HTTPS a HTTP, el Referer no se enviará.
Comprobar encabezado de origen: Similar a Referer, el encabezado Origin proporciona información sobre el origen de la solicitud, pero solo se envía cuando se utiliza XMLHttpRequest o Fetch API.

3. Utilice el atributo Cookie del mismo sitio

Para aquellas cookies que no requieren acceso entre sitios, se puede configurar el atributo SameSite para mejorar la seguridad.

Mismo sitio=Laxo: La cookie solo se envía en solicitudes del mismo sitio, lo que protege parcialmente contra CSRF.
SameSite=Estricto: Las cookies solo se envían dentro del mismo sitio y dentro de la misma página de navegación, lo que proporciona una protección más sólida, pero pueden afectar algunas funciones esperadas entre subdominios.
SameSite=Ninguno: Debe usarse con el atributo Seguro para las cookies que deben ser entre sitios para adaptarse a los requisitos de los navegadores modernos.

4. Verificación del encabezado de solicitud personalizada

Agregue un encabezado HTTP personalizado a la solicitud AJAX (comoX-Requested-With: XMLHttpRequest ), y luego verificar la existencia y el valor de este encabezado en el lado del servidor. Debido a que JavaScript puede establecer libremente el encabezado de XMLHttpRequest, pero el envío de formularios ordinario no puede, esto puede distinguir las solicitudes iniciadas por scripts.

Código de muestra (implementación del token CSRF):

Lado del servidor (pseudocódigo):

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

HTML frontal:

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

Tenga en cuenta que el código anterior es solo un ejemplo y la aplicación real debe ajustarse de acuerdo con el marco de backend y el lenguaje utilizado.

Compartir tecnología