響應路由器中的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。但是如果你使用反應客戶端，我認爲它幾乎是一樣的。希望可以幫助你。