Spring react路由器中的csrf令牌

我正在使用react和spring安全性，希望在用户单击注销按钮时传递csrf令牌。关于如何在react中包含csrf令牌的任何建议。我在谷歌上搜索过这个解决方案，但没有找到任何解决方案

import React from 'react';
import { IndexLink, Link } from 'react-router';

const Nav = (props) => (
      <nav className="navbar navbar-inverse navbar-fixed-top">
        <div className="container-fluid">
          <div className="navbar-header">
              <a className="navbar-brand" href="#">GoRFQ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
          </div>
          <ul className="nav navbar-nav">
          <li ><Link onlyActiveOnIndex activeStyle={{color:'#052426'}} to='/'>Home</Link></li>
          <li ><Link activeStyle={{color:'#052426'}} to='/boms'>BOMs</Link></li>
          <li class="dropdown"><a href="javascript:void(0)" class="dropbtn">Quotes</a>
            <div class="dropdown-content">
              <Link activeStyle={{color:'#052426'}} to='/quotesin' >Incoming Quotes</Link>
              <Link activeStyle={{color:'#052426'}} to='/quotesout' >Outgoing Quotes</Link>
            </div>
          </li>
          <li class="dropdown"><a href="javascript:void(0)" class="dropbtn">Requests</a>
            <div class="dropdown-content">
              <Link activeStyle={{color:'#052426'}} to='/requestsin' >Received Requests</Link>
              <Link activeStyle={{color:'#052426'}} to='/requestsout' >Sent Requests</Link>
            </div>
          </li>
          <li ><Link activeStyle={{color:'#052426'}} to='/upload'>Upload BOM</Link></li>
          <li ><Link activeStyle={{color:'#052426'}} to='/contacts'>Contacts</Link></li>
          <li ><Link activeStyle={{color:'#052426'}} to='/profile'>My Profile</Link></li>
          <li ><Link activeStyle={{color:'#052426'}} to='/about'>About</Link></li>
          </ul>

          <form action="/perform-logout" method="post" className="pull-right">
             <input type="submit" className="btn btn-primary" value="Sign Out"/>

          </form>


        </div>
      </nav>
);

export default Nav; 

从“React”导入React；
从“react router”导入{IndexLink，Link}；
常量导航=（道具）=>(

家
BOMs

传入报价
传出报价


收到的请求
发送请求

上传BOM
联系人
我的个人资料
关于

);
导出默认导航；

您可以在spring security中添加以下配置

http.csrf().csrfTokenRepository(csrfTokenRepository().withHttpOnlyFalse())
                .and()
                .addFilterAfter(csrfHeaderFilter(), SessionManagementFilter.class)
                .addFilterAfter(new CsrfHeaderFilter(), CsrfFilter.class);

private Filter csrfHeaderFilter() {
        return new OncePerRequestFilter() {
            @Override
            protected void doFilterInternal(HttpServletRequest request,
                                            HttpServletResponse response, FilterChain filterChain)
                    throws ServletException, IOException {
                CsrfToken csrf = (CsrfToken) request.getAttribute(CsrfToken.class
                        .getName());
                if (csrf != null) {
                    Cookie cookie = WebUtils.getCookie(request, "XSRF-TOKEN");
                    String token = csrf.getToken();
                    if (cookie == null || token != null
                            && !token.equals(cookie.getValue())) {
                        cookie = new Cookie("XSRF-TOKEN", token);
                        cookie.setPath("/");
                        response.addCookie(cookie);
                    }
                }
                filterChain.doFilter(request, response);
            }
        };
    }

    private CsrfTokenRepository csrfTokenRepository() {
        HttpSessionCsrfTokenRepository repository = new HttpSessionCsrfTokenRepository();
        repository.setHeaderName("X-XSRF-TOKEN");
        return repository;
    }

csrfHeaderFilter会将csrf令牌添加到XSRF-token中的响应中，并发送到客户端的cookie。下次客户端读取Cookie中的XSRF-TOKEN令牌并将其与密钥X-XSRF-TOKEN一起放入http请求头时，spring将使用CsrfTokenRepository在客户端头中查找X-XSRF-TOKEN

withHttpOnlyFalse（）方法将httpOnly设置为false，这意味着js客户端可以读取客户端Cookie中的csrf令牌，如果没有，js客户端无法读取，可能是默认值WithTpOnlyFalse（）

---

您可以使用角度客户端查看csrftoken的sumit。但我认为如果使用react客户端，情况几乎相同。希望可以帮助您。

您可以在spring security中添加以下配置

http.csrf().csrfTokenRepository(csrfTokenRepository().withHttpOnlyFalse())
                .and()
                .addFilterAfter(csrfHeaderFilter(), SessionManagementFilter.class)
                .addFilterAfter(new CsrfHeaderFilter(), CsrfFilter.class);

private Filter csrfHeaderFilter() {
        return new OncePerRequestFilter() {
            @Override
            protected void doFilterInternal(HttpServletRequest request,
                                            HttpServletResponse response, FilterChain filterChain)
                    throws ServletException, IOException {
                CsrfToken csrf = (CsrfToken) request.getAttribute(CsrfToken.class
                        .getName());
                if (csrf != null) {
                    Cookie cookie = WebUtils.getCookie(request, "XSRF-TOKEN");
                    String token = csrf.getToken();
                    if (cookie == null || token != null
                            && !token.equals(cookie.getValue())) {
                        cookie = new Cookie("XSRF-TOKEN", token);
                        cookie.setPath("/");
                        response.addCookie(cookie);
                    }
                }
                filterChain.doFilter(request, response);
            }
        };
    }

    private CsrfTokenRepository csrfTokenRepository() {
        HttpSessionCsrfTokenRepository repository = new HttpSessionCsrfTokenRepository();
        repository.setHeaderName("X-XSRF-TOKEN");
        return repository;
    }

csrfHeaderFilter会将csrf令牌添加到XSRF-token中的响应中，并发送到客户端的cookie。下次客户端读取Cookie中的XSRF-TOKEN令牌并将其与密钥X-XSRF-TOKEN一起放入http请求头时，spring将使用CsrfTokenRepository在客户端头中查找X-XSRF-TOKEN

withHttpOnlyFalse（）方法将httpOnly设置为false，这意味着js客户端可以读取客户端Cookie中的csrf令牌，如果没有，js客户端无法读取，可能是默认值WithTpOnlyFalse（）

---

您可以使用角度客户端查看csrftoken的sumit。但我认为如果使用react客户端，情况几乎相同。希望可以帮助你。

我忘了分享我是如何使它工作的答案，所以它会帮助其他人。我做了以下几件事：

1） 我安装了cookie

2） 在我的react组件中，我导入了这个react cookie

从“反应Cookie”导入Cookie

3） 从cookie中提取XSRF-TOKEN，并作为表单中的隐藏字段传递

<form action="/perform-logout" method="post">
                  <input type="hidden" name="_csrf" value={Cookie.load('XSRF-TOKEN')}/>
                   <input type="submit" className="btn btn-primary btn-block" value="Sign Out"/>
                </form> 

---

它成功了。

我忘了告诉大家我是如何让它成功的，所以它会帮助其他人。我做了以下几件事：

1） 我安装了cookie

2） 在我的react组件中，我导入了这个react cookie

从“反应Cookie”导入Cookie

3） 从cookie中提取XSRF-TOKEN，并作为表单中的隐藏字段传递

<form action="/perform-logout" method="post">
                  <input type="hidden" name="_csrf" value={Cookie.load('XSRF-TOKEN')}/>
                   <input type="submit" className="btn btn-primary btn-block" value="Sign Out"/>
                </form> 

---

在SpringWeb安全配置中添加以下行

http.csrf().csrfTokenRepository(CookieCsrfTokenRepository.withHttpOnlyFalse());
http.addFilterAfter(new CsrfTokenResponseHeaderBindingFilter(), CsrfFilter.class);

您可以在此处找到过滤器：

---

我使用reactjs，您不必在UI端执行任何操作，它只需在SpringWeb安全配置中运行即可添加以下行

http.csrf().csrfTokenRepository(CookieCsrfTokenRepository.withHttpOnlyFalse());
http.addFilterAfter(new CsrfTokenResponseHeaderBindingFilter(), CsrfFilter.class);

您可以在此处找到过滤器：

---

我使用reactjs，您无需在UI端执行任何操作，它只起作用

我尝试过，但不起作用。未捕获引用获取此错误错误错误：未定义csrf我尝试了它，但它不起作用。未捕获引用获取此错误错误错误：未定义csrf我已在我的安全配置中添加了上述配置，但现在获取此异常是由以下原因引起的：groovy.lang.MissingMethodException:没有方法签名：org.springframework.security.config.annotation.web.builders.HttpSecurity.and（）适用于参数类型：（）值：[]这可能会导致spring安全版本问题。我使用spring安全4.0.1。我在安全配置中添加了上述配置，但现在出现此异常，原因是：groovy.lang.MissingMethodException:没有方法签名：org.springframework.security.config.annotation.web.builders.HttpSecurity.and（）适用于参数类型：（）值：[]可能是spring安全版本问题。我使用的是spring安全4.0.1。这不是完全违背了csrf令牌的目的吗？@aeid不是真的。恶意网页无法读取用Javascript连接到目标域的XSRF-token cookie，因此无法在表单字段中发送。浏览器仍将发送身份验证cookie+XSRF-TOKEN cookie访问目标应用程序，但攻击者无法从其他域访问XSRF值。（这有一些细微差别）我尝试使用最新版本-cookie@3.0.0不工作，但它与旧版本的工作良好-cookie@1.0.5.你知道为什么吗？这不是完全违背了csrf令牌的目的吗？@aeid不是真的。恶意网页无法读取用Javascript连接到目标域的XSRF-token cookie，因此无法在f中发送它orm字段。浏览器仍将向目标应用程序发送身份验证cookie+XSRF-TOKEN cookie，但攻击者无法从其他域访问XSRF值。（这有一些细微差别）我尝试使用最新版本-cookie@3.0.0不工作，但它与旧版本的工作良好-cookie@1.0.5.你知道为什么吗？