Question

我正在使用react和spring安全性，并希望在用户单击注销按钮时传递csrf令牌。任何建议如何在反应中包含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;

Answer 1

我忘了分享我是如何工作的答案，所以它会帮助别人。我做了以下事情：

1）我安装了react-cookie。

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

从＆＃39; react-cookie＆＃39;;

导入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>

它有效。

Answer 2

您可以在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客户端无法读取它，可能默认是withHttpOnlyFalse（）。

您可以查看https://spring.io/guides/tutorials/spring-security-and-angular-js/.It使用角客户端汇总csrftoken。但是我觉得如果你使用react客户端几乎一样。希望可以帮到你。

Answer 3

在您的spring Web安全配置中，添加以下行

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

您可以在此处找到过滤器： https://github.com/aditzel/spring-security-csrf-filter

我使用reactjs，您无需在UI端做任何事情，它就可以工作

反应路由器中的csrf令牌

3 个答案: