반응 라우터의 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 토큰을 추출 및 형태

<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

당신은 csrfHeaderFilter이 XSRF 토큰의 반응에 CSRF 토큰을 추가하고 클라이언트의 쿠키를 보내드립니다 봄 보안

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; 
    } 

에서 추적의 설정을 추가 할 수 있습니다. 다음에 클라이언트가 쿠키에서 XSRF-TOKEN 토큰을 읽고 X-XSRF-TOKEN 키로 HTTP 요청 헤더에 넣으면 CsrfTokenRepository를 사용하여 클라이언트 헤더에서 X-XSRF-TOKEN을 찾습니다.

withHttpOnlyFalse() 메소드는 httpOnly를 false로 설정합니다. js 클라이언트가 클라이언트의 쿠키에서 csrf 토큰을 읽을 수 있음을 나타내며 그렇지 않으면 js 클라이언트는 읽을 수 없습니다. 기본값은 withHttpOnlyFalse()입니다. .

각도 클라이언트로 https://spring.io/guides/tutorials/spring-security-and-angular-js/.It을 보면 csrftoken을 볼 수 있습니다. 하지만 당신이 반응 클라이언트를 사용한다면 거의 같아 보입니다. 희망이 당신을 도울 수 있습니다.