API를 사용하여 개인 경로 인증

Question

개인 경로를 인증하려고합니다. 액세스를 허용하기 전에 쿠키를 확인하여 작동하도록했습니다. 그러나 쿠키를 스푸핑하여 쿠키를 허용하고 유효한지 여부를 반환하는 API 끝점을 가질 수 있습니다. API없이

작업 버전 :

const PrivateRoute = ({ component: Component, ...rest }) => (
    <Route {...rest} render={props => (
    cookies.get('sessionid') ? (
     <Component {...props}/> 
    ) : (
     <Redirect to={{ 
     pathname: '/', 
     state: { from: props.location } 
     }}/> 
    ) 
)}/> 
) 

ReactDOM.render((
    <Router> 
     <Switch> 
      <Route exact path="/" component={Login}/> 
      <PrivateRoute exact path="/home" component={Home} /> 
      <PrivateRoute exact path="/upload" component={Upload}/> 
      <PrivateRoute exact path="/logout" component={Logout}/> 
      <PrivateRoute exact path="/review" component={Review}/> 
      <Route component={ NotFound } /> 
     </Switch> 
    </Router> 
), document.getElementById('root')) 

추가 코드 API 호출에 대한 :

axios.post(process.env.REACT_APP_API_URL+'/account/validate-session', { 
    t1_session_id: cookies.get('sessionid') 
    }) 
    .then(function (response) { 
    if(response.data.status === "OK"){ 
     console.log('authenticated go to private route'); 
    } else { 
     console.log('not valid, redirect to index'); 
    } 
    }.bind(this)) 
    .catch(function (error) { 
    console.log('not valid, redirect to index'); 
    }.bind(this)); 

문제는 내가 주요 도로 구간에 코드의 API 섹션을 통합하는 방법을 모르겠습니다.

감사합니다.

Answer 1

모든 사용자는 자신의 쿠키만을 스푸핑 할 수 있습니다. 마찬가지로 사용자는 브라우저에서 실행되는 전체 JS 코드를 스푸핑 할 수 있습니다. 따라서 쿠키를 확인하기 위해 서버를 호출해도 취약점이 크게 완화되지는 않습니다.

대신 JS 코드의 쿠키를 신뢰해야하며 로그인이 필요한 서버의 모든 작업에서 쿠키를 확인해야합니다.

쿠키는 CSRF 공격의 대상이므로 사용자를 식별하는 가장 안전한 방법은 아닙니다. JWT을 사용하거나 referer을 확인하십시오.

어쨌든 쿠키가 유효한지 서버에 묻는 아이디어를 고수하기를 원하면 auth = true, auth = false 및 auth = null의 세 가지 경우를 처리해야한다는 것을 제외하고는 arikanmstf의 대답을 채택 할 것입니다. 아직 서버에서 응답을 얻으려면 요소를 숨기고 싶습니다. 그러나 부정적인 응답이 있으면 사용자를 리디렉션하고 싶습니다.

constructor(props) { 
    super(props); 
    this.state = { 
     isAuth: null 
    }; 
    } 

render() { 
    if(this.state.isAuth === null) return null; 

    return (this.state.isAuth ? <YourComponent /> : <Redirect ... /> 
    } 

Answer 2

글쎄, 당신은 그것에 대한 래퍼 구성 요소를 작성해야 겠군.

import React, { Component } from 'react'; 
import PropTypes from 'prop-types'; 
import axios from 'axios'; 

import YourComponent from './path/to/YourComponent'; 

class WrapperComponent extends Component { 

    constructor(props) { 
    super(props); 
    this.state = { 
     isAuth: false 
    }; 
    } 

    componentDidMount() { 
    axios.post(process.env.REACT_APP_API_URL+'/account/validate-session', { 
    t1_session_id: cookies.get('sessionid') 
    }) 
    .then(function (response) { 
     if(response.data.status === "OK"){ 
      this.setState({isAuth: true}) 
     } else { 
      this.setState({isAuth: false}) 
     } 
    }.bind(this)) 
    .catch(function (error) { 
     console.log('not valid, redirect to index'); 
    }.bind(this)); 
    } 

    render() { 
    return (this.state.isAuth ? <YourComponent /> : null); 
    } 
} 

export default WrapperComponent; 

을 이제 경로는 WrapperComponent로 리디렉션해야합니다 :의 시도하자

const PrivateRoute = ({ component: WrapperComponent, ...rest }) => (
    <Route {...rest} render={props => (
    <WrapperComponent {...props}/> 
)}/> 
)