如何处理 Next.js 应用程序中的 csrf 保护-JavaScript中文网-JavaScript教程资源分享门户

在 Web 开发领域，CSRF（Cross-Site Request Forgery，跨站请求伪造）是一种常见的攻击方式。攻击者通过欺骗用户在已经登录的网站上执行恶意请求，造成危害。为了防止 CSRF 攻击，我们需要对 Next.js 应用程序进行相应的 CSRF 保护。

CSRF 的工作原理

CSRF 攻击的实质就是伪造用户的身份，向服务器发送伪造的请求。攻击者在另外的站点上事先准备好一个含有攻击代码的页面，然后欺骗用户点击链接或者访问这个页面。当受害者登录了目标网站并且没有注销时，攻击者就可以通过伪造请求来执行恶意操作。

核心解决方案

为了防止 CSRF 攻击，我们需要在客户端发送所有的请求时都附加一个 token。这个 token 在每次发送请求时都会被验证，从而防止 CSRF 攻击。目前，最常用的防御 CSRF 攻击的方式是在表单中加入隐藏域的方式，将 token 值存储在这个隐藏域中，然后在提交表单时同时把这个 token 值发送给服务器。

在 Next.js 应用程序中实现 CSRF 保护

在 Next.js 应用程序中实现 CSRF 保护也非常简单。我们只需要按照以下步骤操作即可。

在服务端设置 Cookie

我们可以在服务端设置一个 CSRF token 的值，并将其存储在 Cookie 中。在每次请求时，我们需要将这个 token 值从 Cookie 中获取，并添加到请求头部中。

// javascriptcn.com 代码示例
import cookie from 'cookie';

export async function getServerSideProps({ req, res }) {
  const token = '生成一个 token';
  const headers = { 'X-CSRF-Token': token };
  const csrfCookie = cookie.serialize('csrfToken', token, { httpOnly: true });
  res.setHeader('Set-Cookie', csrfCookie);

  return { props: { headers } };
}

在客户端包含 CSRF token

在所有的表单中，我们需要增加一个隐藏域，用来存储 CSRF token。这个 token 的值需要从 Cookie 中获取，并添加到请求头部中。

// javascriptcn.com 代码示例
import { parseCookies } from 'nookies';
import { useRef } from 'react';

export default function MyForm() {
  const inputRef = useRef(null);
  const csrfToken = parseCookies().csrfToken;

  const handleSubmit = (event) => {
    event.preventDefault();
    fetch('/api/form', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': csrfToken },
      body: JSON.stringify({ text: inputRef.current.value }),
    });
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="hidden" name="csrfToken" value={csrfToken} />
      <label>
        Text:
        <input type="text" name="text" ref={inputRef} />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}

总结

CSRF 攻击是一种常见的网站安全威胁。在 Next.js 应用程序中实现 CSRF 保护也非常容易，只需要在服务端设置好 Cookie 和 token，然后在客户端包含 token 即可。通过这样的方式，我们可以轻松地增强应用程序的安全性。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/652f0b317d4982a6eb027a26