反応ルータのcsrfトークン

Question

私は反応と春のセキュリティを使用しており、ユーザーがログアウトボタンをクリックするとcsrfトークンを渡したいと考えています。反応にcsrfトークンを含める方法。私はGoogleで解決策を探していますが、解決策は得られていません。

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）反応クッキーをインストールしました。私は

2）は、私が「反応-クッキー」から、この反応-クッキーを

輸入クッキーをインポートしたコンポーネントを反応させます。

3）は、クッキーから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

あなたは春のセキュリティに

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はXSRF-TOKENでの応答にCSRFトークンを追加し、クライアントのクッキーに送信されます。次回クライアントがクッキー内のXSRF-TOKENトークンを読み取ってX-XSRF-TOKENキーでhttp要求ヘッダーに入れると、CsrfTokenRepositoryを使用してクライアントヘッダー内のX-XSRF-TOKENを検索します。

withHttpOnlyFalse（）メソッドは、httpsnlyをfalseに設定します。これは、jsクライアントがクライアントのクッキー内のcsrfトークンを読み取ることができることを意味します。そうでない場合、jsクライアントは読み取れません。デフォルトはwithHttpOnlyFalse 。

角度クライアントでhttps://spring.io/guides/tutorials/spring-security-and-angular-js/.Itを見れば、csrftokenが分かります。しかし、私はあなたが反応クライアントを使用する場合、それはほぼ同じだと思います。希望はあなたを助けることができます。