access-token을 react.js의 어디에 저장합니까?

access-token을 react.js의 어디에 저장합니까?

나는 Reactjs에서 앱을 만들고 있다.access_token을 확인한 후 가져오기 호출을 해야 합니다.등록 시 access_token은 백엔드 서버에서 취득됩니다.단, 이러한 access_token을 저장할 위치.이러한 access_token을 글로벌하게 하여 모든 컴포넌트가 액세스 할 수 있도록 하는 방법이 있습니까?로컬 스토리지, 캐시 및 세션 스토리지를 사용했지만 권장되지 않습니다.지난 며칠간 이 호에서 보류된 어떤 해결책도 있습니다.미리 알아둬야죠

사용 가능한 옵션 및 제한 사항:

토큰 저장에는 다음 두 가지 옵션이 있습니다.

1. Web Storage API: 다음 2가지 메커니즘을 제공합니다.sessionStorage ★★★★★★★★★★★★★★★★★」localStorage여기에 저장된 데이터는 항상 Javascript 코드로 사용할 수 있으며 백엔드에서 액세스할 수 없습니다.따라서 예를 들어 헤더 내의 요청에 수동으로 추가해야 합니다.이 저장소는 앱 도메인에서만 사용할 수 있으며 하위 도메인에서는 사용할 수 없습니다.이들 2가지 메커니즘의 주요 차이점은 데이터 유효기간입니다.

• sessionStorage: 세션에서만 사용할 수 있는 데이터(브라우저 또는 탭이 닫힐 때까지).
• localStorage: 없는 하고 JavaScript를 Data: 를

2. 쿠키:후속 요청과 함께 자동으로 백엔드로 전송됩니다.Javascript 코드의 유효기간 및 가시성을 제어할 수 있습니다.앱의 하위 도메인에서 사용할 수 있습니다.

인증 메커니즘을 설계할 때는 다음 2가지 측면을 고려해야 합니다.

• 보안:액세스 또는 ID 토큰은 중요한 정보입니다.항상 고려해야 할 공격의 주요 유형은 Cross Site Scripting(XSS; 사이트 간 스크립팅)과 Cross Site Request Formature(CSRF; 사이트 간 요청 위조)입니다.
• 기능 요건:브라우저가 닫힐 때 사용자가 로그인 상태를 유지해야 합니까?그의 세션은 얼마나 걸릴까요?기타

보안상의 문제로 OWASP는 기밀 데이터를 웹 스토리지에 저장하는 것을 권장하지 않습니다.CheetSheetSeries 페이지를 확인할 수 있습니다.상세한 것에 대하여는, 이 상세한 기사를 참조해 주세요.

원인은 주로 XSS의 취약성에 관련되어 있습니다.프런트엔드가 XSS 공격으로부터 100% 보호되지 않은 경우 웹 페이지에서 악성 코드가 실행되어 토큰에 액세스할 수 있습니다.사용하는 Javascript librairy 중 하나에 의해 발생할 수 있기 때문에 XSS에 대한 완전한 내성이 매우 어렵습니다.

, 가 Javascript로 할 수 .HttpOnly쿠키의 문제는 웹사이트를 CSRF에 쉽게 취약하게 만들 수 있다는 것입니다. SameSitecookie는 이러한 유형의 공격을 완화할 수 있습니다.그러나 이전 버전의 브라우저에서는 이러한 유형의 쿠키를 지원하지 않으므로 상태 변수 사용 등 다른 방법을 사용할 수 있습니다.상세한 것에 대하여는, 이 Auth0 메뉴얼을 참조해 주세요.

권장 솔루션:

토큰을 안전하게 저장하려면 다음과 같이 2개의 쿠키를 조합하여 사용할 것을 권장합니다.

는 다음과 같습니다.JWT 토음 、 JWT 토음 。header.payload.signature

일반적으로 사용자 역할과 같은 유용한 정보가 페이로드에 있습니다(UI의 일부를 조정/숨기기 위해 사용할 수 있습니다).따라서 해당 부품을 Javascript 코드에 계속 사용할 수 있도록 유지하는 것이 중요합니다.

인증 플로우가 완료되고 백엔드에서 JWT 토큰이 작성되면 다음과 같은 작업이 이루어집니다.

1. header.payloadSameSite SecureCookie(https), JS(JS)
2. signatureSameSite Secure HttpOnly★★★
3. 를 구현하여 .「 」 。「 」 2 。 JWT 。Authorization: Bearer your_token

쿠키의 만료를 앱의 요구 사항에 맞게 설정할 수 있습니다.

이 아이디어는 피터 로크에 의해 제안되었고 이 기사에서 매우 잘 묘사되었다.

파티에 늦었지만, 이 주제에 대한 제 생각을 공유하고 싶습니다.Anouar는 XSS에 대한 세이브로 간주되는 http 전용 쿠키를 포함하여 CSRF의 취약성을 지적하고 Peter Locke의 기사를 링크하는 등 좋은 답변을 했습니다.

다만, 제 경우는, 100% 스테이트리스인 애플리케이션이 필요합니다.즉, 쿠키를 사용할 수 없습니다.

보안 관점에서 액세스 토큰을 영구 위치(localStorage, window 등)에 저장하는 것은 잘못된 방법입니다.따라서 redex(또는 react.js built in state/context)를 사용하여 JWT를 변수에 저장할 수 있습니다.이렇게 하면 전술한 공격으로부터 토큰을 보호할 수 있지만 페이지가 새로 고쳐지면 토큰이 늘이 됩니다.

이 문제를 해결하려면 localStorage에 저장한 새로 고침 토큰을 사용합니다(원하는 경우 세션 저장소 등을 사용할 수 있습니다).이 리프레시 토큰의 유일한 목적은 새로운 액세스토큰을 취득하는 것입니다.백엔드는 리프레시 토큰이 도난당하지 않도록 합니다(예를 들어 체크 대상이 되는 카운터 구현).액세스 토큰을 캐시(앱 변수)에 보관하고 새로고침으로 인해 만료되거나 손실된 경우 새로 고침 토큰을 사용하여 새 액세스 토큰을 얻습니다.

이것은 백엔드를 빌드하는 경우(또는 적어도 백엔드가 리프레시 토큰을 실장하는 경우)에만 유효합니다.리프레시 토큰 등을 실장하지 않은 기존 API를 취급하고 있으며 액세스 토큰을 변수에 저장하는 것이 옵션이 아닌 경우(새로고침 시 null로 인해), localStorage(또는 세션 스토리지)에 저장하기 전에 애플리케이션 암호로 토큰을 암호화할 수도 있습니다.네, 알겠습니다.)토큰의 암호를 해독하는 데 시간이 걸리고 앱 속도가 느려질 수 있습니다.따라서 암호화된 토큰을 localStorage(또는...)에 저장하고 새로고침 후 한 번만 복호화하여 다시 새로고침/복호화할 때까지 상태/복호화 변수를 유지할 수 있습니다.

이 토픽에 대한 마지막 말:Auth는 앱의 중요한 인프라스트럭처입니다.재미있는 게임과 온라인 뱅크의 차이(게임에 대해 '관심'만 가지면서 '패러노이드'가 되고 싶을 수도 있습니다)가 분명히 있습니다만, 「로컬·스토리지는 전혀 문제가 없습니다」, 「최악의 경우 어떻게 되는 것입니까」라고 대답합니다.'1시간 후 만료'는 위험하고 단순히 잘못된 것입니다.기계는 몇 초 안에 많은 손상을 입힐 수 있으며, 당신은 그 틈을 열어두고 싶지 않을 것이다.만약 당신이 당신의 앱을 보호하는 것이 너무 귀찮다면, 당신은 아마도 당신만의 솔루션을 만드는 대신 기존의 솔루션을 사용하는 것을 원할 것이다.

JWT/token auth는 게임에서는 상당히 새로운 기술입니다(몇 년은 개발의 다른 주제만큼 성숙하지는 않습니다).동작하는 솔루션을 찾는 데는 시간과 노력이 필요하지만, 웹에 빠른 해킹이 쇄도하는 대신 안전한 소프트웨어를 계속 구축해야 합니다.

베스트 & 해피 코딩

마이클 워시번은 리덕스로 당신의 상태를 유지하는 방법에 대한 정말 좋은 기사를 그의 웹페이지에 실었습니다.

기사에서 그는 Redux의 공동 저자 중 한 명인 Dan Abramov가 만든 매우 설명적인 비디오 튜토리얼에 대한 링크를 가지고 있으며, 나는 그와 함께 그것을 내 프로젝트에 추가했다.동작시키기 위해 사용한 코드는 다음과 같습니다.

store.displaces를 설정합니다.

import { createStore, combineReducers } from "redux";
import { UserReducer, CopyReducer } from "../reducers";
import { loadState, saveState } from "../utils/localStorage";

export const giveMeStore = () => {
  const reducers = combineReducers({
    copy: CopyReducer,
    user: UserReducer
  });
  const persistedState = loadState();
  const store = createStore(reducers, persistedState);
  //user contains the TOKEN
  store.subscribe(() => {
    saveState({
      user: store.getState().user
    });
  });
  return store;
};

로컬 스토리지js

export const loadState = () => {
  try {
    const serializedState = localStorage.getItem("state");
    if (serializedState === null) {
      return undefined;
    }
    return JSON.parse(serializedState);
  } catch (err) {
    return undefined;
  }
};
export const saveState = state => {
  try {
    const serializedState = JSON.stringify(state);
    localStorage.setItem("state", serializedState);
  } catch (err) {
    //ignoring write erros
  }
};

스토어를 프로바이더에 추가합니다.

import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";

import { giveMeStore } from "./store.js";

const Root = () => {
  return (
    <Provider store={giveMeStore()}>
      //... your components
      //...
    </Provider>
  );
};

ReactDOM.render(<Root />, document.querySelector("#root"));

언급URL : https://stackoverflow.com/questions/48983708/where-to-store-access-token-in-react-js