响应路由器中的csrf令牌

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）在我的反应组分I进口此反应cookie的

进口曲奇从 '反应cookie的';

3）摘自cookie中的XSRF标志并且为隐藏字段的形式

<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

你可以在春季安全

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客户端无法读取它，可能默认是使用HttpOnlyFalse（） 。

你可以看看https://spring.io/guides/tutorials/spring-security-and-angular-js/.It用角度客户端来提交csrftoken。但是如果你使用反应客户端，我认为它几乎是一样的。希望可以帮助你。