Cookie 의 전단 에서 의 실천
환경 설정
우 리 는 파일
main.js 을 새로 만 들 고 main.js 에 다음 코드 를 기록 합 니 다.const express = require('express')
const app = express()
app.listen(3000, err => {
if (err) {
return console.log(err)
}
console.log('---- http://localhost:3000 ----')
})
app.get('/', (req, res) => {
res.send('hello world!')
})
node main.js
// ， http://localhost:3000
// hello world!쿠키 는 어떻게 작 동 합 니까?
쿠키 가 무엇 인지 소개 하기 전에 쿠키 가 어떻게 작 동 하 는 지 살 펴 보 겠 습 니 다.
1. ， Cookie
2. ， （ Cookie ）
3. Cookie （ ）
4. Cookie
5. ， ， Cookie， 검증 하 다.
검증 을 해 보도 록 하 겠 습 니 다.
// main.js
app.get('/', (req, res) => {
// ， Cookie
// Cookie name testName
// value testValue
res.cookie('testName', 'testValue')
res.send('hello world!')
})
// ，
// node main.js
지금 열기
http://localhost:3000Request Headers 쿠키 라 는 필드 가 없어 요 Response Headers 이 필드 Set-Cookie 가 생 겼 어 요.이제 페이지 를 새로 고침 하면
http://localhost:3000/ 이 주소 에 다시 요청 한 것 과 같 습 니 다.지금 우 리 는 쿠키 필드 가 이미 가지 고 있 는 것 을 볼 수 있 습 니 다. 다시 몇 번 갱신 해도 쿠키 가 있 습 니 다.
document.cookie
JS 는 쿠키 를 얻 는 방법 을 제공 했다.
document.cookie 우 리 는 먼저 여러 개의 쿠키 를 설정 했다.app.get('/', (req, res) => {
res.cookie('testName0', 'testValue0')
res.cookie('testName1', 'testValue1')
res.cookie('testName2', 'testValue2')
res.cookie('testName3', 'testValue3')
res.send('hello world!')
})
우 리 는 쿠키 가 문자열 이라는 것 을 볼 수 있다.그러나 이 문자열 은 키 쌍
key=value 으로 구성 되 어 있 으 며, 키 쌍 사 이 는 과 로 분리 되 어 있 습 니 다.쿠키 란 무엇 인가
이렇게 많아정리 해 보면 다음 과 같은 몇 가지 점 이 있다.
모든 쿠키 는 일정한 속성 을 가지 고 있 습 니 다. 예 를 들 어 언제 효력 을 잃 을 지, 어느 도 메 인 이름, 어느 경로 로 보 낼 지 등 입 니 다.모든 쿠키 를 설정 할 때 관련 속성 을 설정 할 수 있 습 니 다. 물론 설정 하지 않 아 도 됩 니 다. 이 때 는 이 속성의 기본 값 을 사용 합 니 다.
expires / max-age
expires / max-age 모두 쿠키 를 제어 하 는 옵션 이다.이 두 옵션 이 설정 되 어 있 지 않 으 면 기본 유효기간 은 session, 즉 세 션 쿠키 입 니 다.이런 쿠키 는 브 라 우 저 를 닫 은 후 사 라 졌 다.expires
expires 옵션 은 쿠키 가 언제 유효 하 는 지 설정 하 는 데 사 용 됩 니 다. expires 사실은 쿠키 의 실효 날짜 입 니 다.expires GMT 형식의 시간 이 어야 합 니 다 new Date().toGMTString() 또는 new Date().toUTCString() 을 통 해 얻 을 수 있 습 니 다)app.get('/', (req, res) => {
// Cookie
res.cookie('testName0', 'testValue0', {
expires: new Date(Date.now() + 10000)
})
// Cookie
res.cookie('testName1', 'testValue1')
res.send('hello world!')
})
위의 코드 서버 는 두 개의 Cookie 를 설 정 했 습 니 다. 하 나 는 실효 각 을 설 정 했 고 다른 하 나 는 설정 되 지 않 았 습 니 다. 즉, 기본 적 인 실효 시간 session 입 니 다.지금 우 리 는 서 비 스 를 다시 시작 하고 페이지 를 새로 고 칩 니 다.
현재 응답 머리 에 응답 하 는 실효 시간 설정 필드 가 추가 되 었 습 니 다.콘 솔 에 아래 코드 를 입력 하 십시오.
console.log(` cookie ：${document.cookie}`)
setTimeout(() => {
console.log(`5 cookie ：${document.cookie}`)
}, 5000)
setTimeout(() => {
console.log(`10 cookie ：${document.cookie}`)
}, 10000)따라서 쿠키 의 실효 시간 이 되면 document. cookie 를 통 해 이 쿠키 를 방문 할 수 없습니다. 물론 앞으로 요청 을 보 내 도 이 실효 쿠키 를 가 져 오지 않 습 니 다.
max-age
expires 는 http / 1.0 프로 토 콜 의 옵션 으로 새로운 http / 1.1 프로 토 콜 expires 에서 max-age 옵션 으로 대체 되 었 고 이들 의 역할 은 모두 Cookie 의 유효 시간 을 제한 하 는 것 이다.expires 의 값 은 한 시간 대 Cookie = expires 이 고 max-age 의 값 은 단위 시간 대 Cookie = + max-age 이다.// max-age， cookie
// cookie
app.get('/', (req, res) => {
res.cookie('testName0', 'testValue0', {
// express
//
//
maxAge: 10000
})
res.cookie('testName1', 'testValue1')
res.send('hello world!')
})
우선 순위
max - age 와 expires 를 동시에 설정 하면 max - age 의 시간 을 기준 으로 합 니 다.
app.get('/', (req, res) => {
res.cookie('name0', 'value0')
res.cookie('name1', 'value1', {
expires: new Date(Date.now() + 30 * 1000),
maxAge: 60 * 1000
})
res.cookie('name2', 'value2', {
maxAge: 60 * 1000
})
res.send('hello world!')
})
domain 과 path
name, domain 와 path 는 유일한 쿠키 를 표시 할 수 있다.domain 와 path 두 가지 옵션 은 쿠키 가 요청 머리 에 브 라 우 저 에 자동 으로 추 가 될 지 를 결정 합 니 다.구체 적 으로 어떤 원리 인지 쿠키 의 역할 영역 과 역할 경로 라 는 장 을 보십시오.이 두 옵션 이 설정 되 어 있 지 않 으 면 기본 값 을 사용 합 니 다.
domain 의 기본 값 은 해당 쿠키 의 웹 페이지 가 있 는 도 메 인 이름 을 설정 하 는 것 이 며, path 기본 값 은 해당 쿠키 의 웹 페이지 가 있 는 디 렉 터 리 를 설정 하 는 것 입 니 다.secure
secure 옵션 은 쿠키 를 설정 할 때 안전 한 요청 에서 만 보 냅 니 다.요청 이 HTTPS 또는 기타 보안 프로 토 콜 일 때 secure 옵션 을 포함 하 는 쿠키 가 브 라 우 저 에 저장 되 거나 서버 에 전 송 될 수 있 습 니 다.
기본적으로 쿠키 는 secure 옵션 (즉 비어 있 음) 을 가지 고 있 지 않 습 니 다.따라서 기본적으로 HTTPS 프로 토 콜 이 든 HTTP 프로 토 콜 의 요청 이 든 쿠키 는 서버 로 전 송 됩 니 다.
httpOnly
이 옵션 은 Cookie 가 js 를 통 해 접근 할 수 있 는 지 설정 하 는 데 사 용 됩 니 다.기본적으로 쿠키 는
httpOnly 옵션 (즉 비어 있 음) 을 가지 고 있 지 않 으 며 클 라 이언 트 는 js 코드 를 통 해 이 쿠키 에 접근 할 수 있 습 니 다 (읽 기, 수정, 삭제 등 포함).쿠키 테이프 httpOnly 옵션 을 선택 하면 클 라 이언 트 는 js 코드 를 통 해 이 쿠키 에 접근 할 수 없습니다 (읽 기, 수정, 삭제 등 포함).코드 를 보 세 요. main. js 를 수정 하고 재 부팅 서 비 스 를 저장 하 며 페이지 를 새로 고 칩 니 다.
app.get('/', (req, res) => {
res.cookie('notHttpOnly', 'testValue')
res.cookie('httpOnlyTest', 'testValue', {
httpOnly: true
})
res.send('hello world!')
})
그림 을 보면
httpOnly 설 치 된 쿠키 에 체크 가 하나 더 생 겼 다.그리고 document.cookie 을 통 해 그 쿠키 에 접근 할 수 없습니다.클 라 이언 트 에서 js 코드 를 통 해 하나의
httpOnly 유형의 쿠키 를 설정 할 수 없습니다. 이런 유형의 쿠키 는 서버 를 통 해서 만 설정 할 수 있 습 니 다. 요청 을 보 낼 때 우 리 는 요청 헤더 에 이 설정 httpOnly 의 쿠키 를 가 져 옵 니 다. 다음 그림 입 니 다.쿠키 설정
명확 한 점: Cookie 는 서버 에서 설정 할 수도 있 고 클 라 이언 트 에서 설정 할 수도 있 습 니 다.여기 보시 면 다 들 이해 하 실 거 라 고 믿 습 니 다.
서버 설정 쿠키
방금 그 그림 을 보고 우 리 는 많은 쿠키 를 설치 했다.
웹 페이지 즉 클 라 이언 트 에서 도 js 코드 를 통 해 Cookie 를 설정 할 수 있 습 니 다.
설치 하 다.
document.cookie = 'name=value'쿠키 를 설정 할 수 있 는 다음 옵션: expires, domain, path, 각 키 쌍 사 이 를
; 과 로 구분 합 니 다.document.cookie='name=value; expires=Thu, 26 Feb 2116 11:50:25 GMT; domain=sankuai.com; path=/';secure
https 프로 토 콜 의 웹 페이지 에서 만 클 라 이언 트 가 secure 형식의 Cookie 를 설정 할 수 있 습 니 다.
HttpOnly
클 라 이언 트 에서 HttpOnly 옵션 을 설정 할 수 없습니다.
쿠키 삭제
쿠키 의 name, path, domain 은 유일 하 게 쿠키 를 표시 합 니 다.쿠키 의 max - age 를 0 으로 설정 하면 쿠키 를 삭제 할 수 있 습 니 다.
let removeCookie = (name, path, domain) => {
document.cookie = `${name}=; path=${path}; domain=${domain}; max-age=0`
}Cookie 의 역할 영역 과 역할 경로
역할 영역
이 역할 영역 을 말 하기 전에 도 메 인 이름 에 대해 간단 한 이 해 를 합 시다.
하위 도 메 인 은 부모 도 메 인 에 비해 도 메 인 이름 의 모든 단락 을 말 합 니 다.각 자 역 사 이 를 소수점 으로 구분한다.도 메 인 이름 의 마지막 부분 에 놓 인 부분 을 최고급 부분 이 라 고 부 르 거나 1 급 도 메 인 이 라 고 부 르 며 앞 에 있 는 부분 을 2 급 도 메 인 이 라 고 부 릅 니 다.
아래 그림 의 경우
news.163.com 와 sports.163.com 는 자 역 이 고 163.com 은 부 역 이다.쿠키 의 domain 이
news.163.com 이면 방문 news.163.com 할 때 쿠키 를 가 져 옵 니 다.쿠키 의 domain 이 163.com 이면 방문 news.163.com 과 sports.163.com 에 쿠키 를 가 져 옵 니 다.역할 경로
쿠키 의 domain 이 같은 경우 에 도 쿠키 를 가 져 올 지 여부 에 도 규칙 이 있다.
하위 경로 내 에서 부모 경로 에 접근 하 는 Cookie 에 접근 할 수 있 으 며, 반대로 접근 하면 안 됩 니 다.
예 를 들 어 먼저 수정 하 는 것 이 좋 겠 습 니 다
main.jsapp.get('/parent', (req, res) => {
res.cookie('parent-name', 'parent-value', {
path: '/parent'
})
res.send(' !')
})
app.get('/parent/childA', (req, res) => {
res.cookie('child-name-A', 'child-value-A', {
path: '/parent/childA'
})
res.send(' A!')
})
app.get('/parent/childB', (req, res) => {
res.cookie('child-name-B', 'child-value-B', {
path: '/parent/childB'
})
res.send(' B!')
})
아래 의 "도 메 인" 은 경로 로 바 꿔 야 합 니 다.
참고 문장
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Express + AWS S3 이미지 업로드하기웹 사이트 및 모바일 애플리케이션 등에서 원하는 양의 데이터를 저장하고 보호할 수 있다. 데이터에 대한 액세스를 최적화, 구조화 및 구성할 수 있는 관리 기능을 제공한다. AWS S3 에 저장된 객체에 대한 컨테이너...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
