如何为HTML表单添加CSRF令牌？启用CSRF后登录请求失效怎么办？

嘿，针对你的两个CSRF相关问题，我来给你梳理下实用的解决方案：

从你提到的.csrf().disable()来看，应该是在用Spring Security，那我就围绕这个场景给你两种常用实现方式：

• 方案一：添加隐藏表单字段
  如果你用Thymeleaf这类模板引擎，可以直接用框架提供的表达式自动生成CSRF令牌字段，省得手动处理：

  <form id="login-form" method="post" action="/login">
      <!-- 用户名、密码等表单字段 -->
      <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}">
      <button type="submit">登录</button>
  </form>
  

  要是纯HTML页面，就得从后端设置的XSRF-TOKENCookie里取令牌，再手动插入隐藏字段，就像你代码里尝试做的那样。

• 方案二：通过请求头传递令牌
  既然你已经用JS阻止了表单默认提交，改用AJAX提交会更灵活，直接把CSRF令牌放在请求头里就行：

  $('#login-form').submit(function (ev) {
      ev.preventDefault();
      const csrfToken = Cookies.get('XSRF-TOKEN');
      $.ajax({
          url: '/login',
          method: 'POST',
          headers: {
              'X-CSRF-TOKEN': csrfToken
          },
          data: $(this).serialize(),
          success: (res) => {
              // 登录成功后的逻辑，比如跳转首页
          },
          error: (xhr) => {
              // 处理登录失败，比如提示错误
          }
      });
  });
  

这个问题大概率是CSRF令牌没有正确传递给后端，导致Spring Security验证失败触发了默认重定向逻辑，你可以按以下步骤排查修复：

1. 确认XSRF-TOKENCookie是否可被JS读取
   打开浏览器开发者工具（F12），在「Application」→「Cookies」里检查是否存在XSRF-TOKEN，并且它的HttpOnly属性是false。如果HttpOnly是true，JS根本拿不到这个Cookie，你需要在Spring Security配置里修改：

   @Override
   protected void configure(HttpSecurity http) throws Exception {
       http.csrf(csrf -> csrf
           .csrfTokenRepository(CookieCsrfTokenRepository.withHttpOnlyFalse())
       );
   }
   

2. 完善你的表单提交JS代码
   你的代码片段只写了一半，要是想用隐藏字段传递令牌，得确保字段的name是Spring Security默认的_csrf（或者你自定义的参数名），完整代码应该是这样：

   $('#login-form').submit(function (ev) {
       ev.preventDefault();
       const csrfToken = Cookies.get('XSRF-TOKEN');
       // 先移除已存在的csrf字段，避免重复提交
       $(this).find('input[name="_csrf"]').remove();
       // 添加隐藏的csrf令牌字段
       $('<input>').attr({
           type: 'hidden',
           name: '_csrf',
           value: csrfToken
       }).appendTo(this);
       // 现在提交表单
       this.submit();
   });
   

3. 检查登录接口的CSRF验证规则
   Spring Security默认会对表单登录的/loginPOST请求豁免CSRF验证，但如果你是自定义的登录接口，得确保配置里没错误。比如：

   @Override
   protected void configure(HttpSecurity http) throws Exception {
       http
           .csrf(csrf -> csrf
               .csrfTokenRepository(CookieCsrfTokenRepository.withHttpOnlyFalse())
           )
           .formLogin(form -> form
               .loginPage("/login") // 登录页面路径
               .loginProcessingUrl("/login") // 处理登录的接口路径
               .permitAll()
           );
   }
   

4. 排查重定向的真实原因
   打开浏览器「Network」面板，查看POST /login请求的响应状态码：

   • 如果是403 Forbidden：肯定是CSRF验证失败，回头检查令牌传递是否正确；
   • 如果是3xx重定向：可能是登录本身失败（比如用户名密码错误），而非CSRF问题，得结合后端日志排查。

内容的提问来源于stack exchange，提问作者gstackoverflo