Day 15, 16, 17, 18 : CORS맨이 쓰러지지 않아, 브라우저에서 CSRF 토큰이 안 날라가면 봐야한다 ㄹㅇ

 

Day 14 : 사공이 많으면 배가 산으로 간다, Lambda + Express 에서 CORS 처리하는 법

위 글을 보고 오시는 것을 추천드립니다!

---

1. 오늘의 주제

aㅏ,,, CSRF 토큰 관련 이슈는 첫 배포 이전까지 끊이지가 않는 다..

ㅁㄴㅇㄹㅁㄴ라ㅓㅗ제대ㅕㅑㄹ;

 

각설하고 문제는 다음과 같습니다.

app.use(csrf({cookie : true}))

csrf({cookie: true}) 설정에서 cookie: true는 서버가 CSRF 토큰을 쿠키에 저장하도록 지시하고,

그런 다음 클라이언트는 서버에 요청을 보낼 때 이 쿠키를 포함하게 만들었습니다.

만약 CSRF 토큰이 없거나 유효하지 않으면, 서버는 요청을 거부하고 403 에러를 반환하게 만들었습니다.

 

이전 글에서도 나왔지만 저는 Lambda 를 사용하기 때문에 session 을 사용할 수 없습니다.

따라서 cookie 를 2번 발행받아 하나는 localStorage, 나머지 하나는 Cookie 에다가 저장을 했습니다.

추후 백엔드와의 통신시에 localStorage 와 Cookie 의 담긴 값들을 다 보내면 

백엔드의 csrf 미들웨어가 이 2가지를 비교해서 토큰의 유효성을 검증하게 되죠.

하지만 서버에 POST 요청을 보낼 때마다 403: invalid access token 라는 에러가,,,

2. 원인 알아보기

헤더를 열어보니 localStorage 에 담긴 토큰은 헤더에 잘 담겨서 갑니다.

하지만 Cookie 필드는 어디에도 없다,,,

 

최근에 하도 CORS 에 대해 연구를 하다 보니

설마 이것도 도메인이 달라서 쿠키를 뭐 안 보내고 그런건가?

라는 생각이 문득 들어갓 MDN 을 찾아봤다.

aㅏ.... 결국 정리하자면 다음과 같다.

쿠키를 담은, 하지만 도메인이 다른 프론트엔드의 요청을 받아들이기 위해서는 
프론트엔드와 백엔드 둘다 설정을 해야 한다.

프론트는 fetch 에, 백엔드는 cors() 에.

3. 코드로 실제 구현해보기

프론트엔드

const fetchCountryData = async (toCountry) => {
    try {
        const response = await fetch(endPoint + "/countries", {
            method: "POST",
            credentials: "include", // 이 부분을 추가해야 쿠키를 담아서 보내게 된다!
            headers: {
                "Content-Type": "application/json",
                "CSRF-Token": localStorage.getItem("csrfToken"),
            },
            body: JSON.stringify({
                toCountry: toCountry,
            }),
        })

        const data = await response.json()
    } catch (err) {
        console.error(`Error fetching country data: ${err}`)
    }
}

백엔드

app.use(cors({
    origin: ["http://127.0.0.1"], // 여기에 S3 경로
    credentials: true // 이걸 넣어야 쿠키를 담은 request를 허용!
}));

4. 참고

Access-Control-Allow-Credentials - HTTP | MDN

마무리

언제나 피드백은 환영입니다!

GitHub - xpmxf4/ISL_FrontEnd

 

GitHub - xpmxf4/ISL_BackEnd

만약 보신다면 스타도...! ㅎㅎ