[풀스택] 에어비앤비 클론코딩 Front-end 14 - post 요청시 CSRF, js-cookie

star_is_mine·2023년 1월 23일
0

📌소개

강의링크 바로가기

📌배운내용 정리

JavaScript Cookie (js-cookie) Link

  • JavaScript Cookie (js-cookie) 를 설치 및 사용하는 이유는 "CSRF" 문제해결을 위해서다.

  • CSRF(Cross Site Request Forgery) - "교차 사이트 요청 위조"를 말한다.

django 는 CSRF 해킹 때문에 모든 post 요청을 차단하는 보안 기능을 제공합니다.
이 때문에 우리는 JavaScript Cookie (js-cookie) 를 설치해서 django server에 post 요청을 보낼 때 csrf token 을 함께 보내서 django 에게 우리가 보낸 post 요청은 안심해도 된다는 것을 알려줘야 합니다.

  • "즉 js-cookie 는 django server에 post 요청을 보낼 때 token 값을 함께 보내기 위함입니다."
npm i @types/js-cookie // installation 
// 파일이름 : api.ts
import Cookie from "js-cookie";

// ...중략

// 변경전 코드
export const logOut = () =>
    instance.post(`users/log-out`).then((response) => response.data);

// 변경후 코드
export const logOut = () =>
    instance.post(`users/log-out`, null, {
        headers: {"X-CSRFToken": Cookie.get("csrftoken") || "", },
        }).then((response) => response.data);
// 파일이름 : Header.tsx
import { logOut } from "../api";
// ...중략

// onLogOut 함수정의
const onLogOut = async () => {
  await logOut();
}
// ...중략

<MenuList>
  <MenuItem onClick={onLogOut}>Log out</MenuItem>
</MenuList>
  • 위와 같이 코드를 작성하면 로그아웃 기능은 작동합니다.
  • 수업에서는 단순히 로그아웃 기능만 구현하는 것이 아쉬워서 chakra 의 toast 기능을 함께 연습해본 것일 뿐입니다. 실질적인 로그아웃 기능만 구현할 경우 코드는 매우 간단합니다.

📌Grab a Keyword

📌Grab a Key Concept

📌Git

profile
i have a dream and I will make my dreams come true.

0개의 댓글