자바스크립트의 쿠키

쿠키는 서버 측과 클라이언트 측 간에 전송되는 소량의 정보입니다. 웹 브라우저는 브라우징 시 이 정보를 저장합니다. 쿠키에는 일반적으로 콜론으로 구분된 이름-값 쌍 형식의 문자열로 정보가 포함되어 있습니다reference.

쿠키가 동일한 도메인에 있지 않으면 쿠키가 도메인을 넘을 수 없기 때문에 쿠키가 전송되지 않습니다. 이것이 쿠키를 안전하게 만드는 것입니다.

개발 중,


> 서버가 localhost에 있음: 3500
> 프런트 엔드 웹 앱은 localhost: 3000에 있습니다.


CORS에서는 서로 다른 호스트로 간주됩니다. 따라서 서버에 대한 모든 요청에는 CORS 보안 규칙이 적용됩니다.

프런트엔드

자바스크립트에서 가져오기
javascript에서 기본 가져오기를 사용하는 경우{Credentials: include}는 서버에 쿠키를 보내는 데 사용할 수 있는 옵션입니다.

악시오스
axios에서 {withCredentials: true}는 서버로 보낼 쿠키를 포함하도록 설정할 수 있는 옵션입니다.

백엔드

res.header("Access-Control-Allow-Credentials", true)

서버의 응답에 이 헤더를 설정해야 합니다. 이 헤더는 프런트 엔드에서 설정한 옵션과 함께 작동합니다.

이것은 요청이 자격 증명으로 이루어진 경우 프런트 엔드 자바 스크립트 코드에 대한 서버의 응답을 노출하도록 브라우저에 지시합니다. 자격 증명이란 무엇입니까?, 자격 증명은 쿠키, 인증 헤더 등입니다.

따라서 자격 증명이 포함된 서버에 대한 리소스 요청이 이루어지고 이 헤더가 리소스와 함께 반환되지 않으면 서버의 응답이 웹 브라우저에서 무시되고 웹 콘텐츠로 반환되지 않습니다.

쿠키 생성

기본 언어는 Node.js이므로 Node.js에서 쿠키를 생성하려면

const myCountry = "Antarctica"

// saving information in a cookie
res.cookie('jwt', myCountry, { httpOnly: true, sameSite: "None", secure: true, maxAge: 24 * 60 * 60 * 1000 });

jwt , 이것은 쿠키의 이름입니다.myCountry , 쿠키에 저장할 정보입니다.

옵션
쿠키에 대한 추가 정보를 설명하는 옵션을 전달할 수 있습니다.

httpOnly: true, this makes the cookie not accessible by javascript, which prevents a malicious actor from getting a hold of it.
sameSite: "None", this makes the cookie work across site.
secure: true, this makes the cookie work in a secure connection example "https" in browsers.
maxAge: 24 * 60 * 60 * 1000, is the expiration set for the cookie, this cookie has been set to expire in one day.

프런트엔드
프런트 엔드(웹 브라우저)에서 쿠키에 액세스하려면 브라우저 콘솔CTRL+SHIFT+I을 열고 입력하십시오.
document.cookie
우리 쿠키는 httpOnly이므로 볼 수 없습니다.

감사합니다, 팔로우해주세요