[추천 컬렉션] 2020 년 최신 쿠키 인터뷰 질문 요약, 지속적으로 업데이트 ~

쿠키는 프런트 엔드 엔지니어가 매일 다루는 콘텐츠이므로 거의 모든 프런트 엔드 인터뷰에서 쿠키 관련 지식에 대해 질문합니다. 이 기사에서는 프런트 엔드와 관련된 쿠키 지식을 모든 인터뷰 상황을 다루는 18 개의 질문으로 구성합니다.

과거와 현재 : 쿠키 및 세션 시스템

HTTP는 Stateless 프로토콜이라는 것을 알고 있습니다. Stateless는 클라이언트가 보낸 모든 요청을 서버에서 새 요청으로 간주하고 이전 세션과 다음 세션 사이에 연결이 없음을 의미합니다. 그러나 많은 시나리오에서 다음 세션과 이전 세션의 관계를 알아야합니다 (예 : 로그인 후 로그인 상태를 기억해야 함). 이때 쿠키 및 세션 시스템 이 도입되었습니다 .

쿠키 : 클라이언트가 서버를 요청할 때 서버가 사용자의 상태를 기록해야하는 경우 응답 헤더를 통해 클라이언트 브라우저에 쿠키를 발행하고 클라이언트 브라우저는 쿠키를 저장합니다. 브라우저가 서버를 다시 요청하면 브라우저는 요청 된 URL을 쿠키와 함께 서버에 제출합니다. 서버는 쿠키를 확인하여 사용자 상태를 얻습니다.

세션 : 서버가 요청을 받으면 서버에 저장된 수많은 세션 정보에서 클라이언트가 가져온 쿠키의 상태를 조회합니다. 서버에 이러한 세션 정보가 없으면 세션 정보를 추가하십시오.

일반적으로 쿠키에 저장된 세션 정보의 고유 ID (sessionId)가 계산됩니다.

쿠키의 18 가지 문제점

1. 쿠키는 어디에 저장됩니까?

쿠키는 일반적으로 브라우저가 읽고 쓸 수 있도록 브라우저에 의해 컴퓨터의 하드 디스크에 txt 형태로 저장됩니다.

2. 쿠키는 어떻게 작동합니까?

의뢰

브라우저가 요청을 시작하면 브라우저는 해당 쿠키가 있는지 자동으로 확인하고 쿠키가있는 경우 요청 헤더의 쿠키 필드에 추가됩니다 (쿠키 필드는 이름 = 값으로 구분 된 문자열입니다. 세미콜론으로).

[외부 링크 이미지 전송에 실패했습니다. 원본 사이트에 안티 리치 링크 메커니즘이있을 수 있습니다. 이미지를 저장하고 직접 업로드하는 것이 좋습니다. (img-0T3A7rcj-1610629444364) (https://upload-images.jianshu.io/ upload_images / 24944724-e2b3b665b6c39afb.image? imageMogr2 / auto-orient / strip % 7CimageView2 / 2 / w / 1240)]

응답

서버가 쿠키를 시드해야 할 때 http 요청의 응답 헤더에 Set-Cookie 필드를 추가하면 브라우저가 자동으로 쿠키를 분석 및 식별하고 쿠키를 시드합니다.

3. 쿠키와 세션의 차이점은 무엇입니까?

저장 위치가 다릅니다. 쿠키 데이터는 클라이언트의 브라우저에 저장되고 세션 데이터는 서버에 저장됩니다.
다른 저장 크기 : 일반적으로 단일 쿠키로 저장되는 데이터는 4k를 초과 할 수 없으며 단일 도메인 이름은 최대 30 개의 쿠키를 저장할 수 있습니다 (브라우저마다 다를 수 있음). 세션 크기 및 수에는 제한이 없습니다.

4. 세션 레벨 쿠키 란 무엇입니까?

세션 수준 쿠키는 현재 세션에 대해서만 존재하며 세션이 종료되면 쿠키가 사라집니다.
설정되지 않은 쿠키가 만료되면 웹 페이지 세션 중에 만 쿠키가 존재하며 브라우저가 종료되면 쿠키가 사라집니다.

브라우저에서 Expires / Max-Age의 내용은 Session입니다.

5. 누가 쿠키를 조작 할 수 있습니까?

서버와 js 모두 쿠키를 읽고 쓸 수 있습니다.

6. 쿠키 속성에 대한 자세한 설명

이름 : 쿠키 名
값 : 쿠키 值。
도메인 : 쿠키의 도메인 이름입니다. .example.com으로 설정되면 하위 도메인 a.example.com 및 b.example.com 모두 .example.com의 쿠키를 사용할 수 있으며 그렇지 않으면 사용할 수 없습니다.
경로 : 쿠키를 읽을 수있는 URL 경로이며 일반적으로 /로 설정됩니다.
만료 : 쿠키 만료 시간. 설정되지 않은 경우 세션 기간이며 페이지 종료시 쿠키가 무효화됩니다.
HttpOnly : true로 설정하면 http 만 읽을 수 있습니다. Node.js는 HttpOnly가 설정되지 않은 쿠키 만 읽을 수 있습니다.
Secure : Secure 로 표시된 쿠키, https 요청 만 전달할 수 있습니다.
SameSite : 제 3 자 URL이 쿠키를 전달할 수 있는지 여부를 제한합니다. Strict / Lax (기본값) / None의 3 가지 값이 있습니다. (chrome80 +에 의해 시행되는 chrome51의 새로운 속성)
- 엄격 : 동일한 사이트에서 요청한 쿠키 만 전송 허용
- Lax : 일부 타사 요청이 쿠키를 전달하도록 허용합니다. 즉, 대상 URL로 이동하는 요청을 가져옵니다. 하이퍼 링크 포함 , 쿠키를 보내기위한 양식 미리로드 및 가져 오기
- None : 임의로 쿠키 전송, None으로 설정, (Secure와 동시에 설정해야하므로 웹 사이트에서 https를 사용해야 함)
우선 순위 : 우선 순위, 크롬의 제안 (firefox는 지원하지 않음)은 세 가지 우선 순위 레벨 인 낮음 / 중간 / 높음을 정의하며, 쿠키 수가 초과되면 우선 순위가 낮은 쿠키가 먼저 삭제됩니다.

7. 쿠키에 대한 js와 서버 측 작업의 차이점은 무엇입니까?

쿠키에는 HttpOnly 속성이 있습니다. HttpOnly가 설정되면 쿠키는 http 요청에서만 읽을 수 있지만 js에서는 읽을 수 없음을 나타냅니다. 구체적인 표현은 다음과 같습니다. document.cookie에서 읽은 콘텐츠에는 HttpOnly가있는 쿠키가 포함되지 않습니다. 세트.

8. js는 쿠키를 어떻게 조작합니까?

쿠키를 읽고 쓰기위한 js 작업의 API는 document.cookie 입니다.

쿠키 읽기

document.cookie。

console.log(document.cookie); 
// cna=8fDUF573wEQCAWoLI8izIL6X; xlly_s=1; t=4a2bcb7ef27d32dad6872f9124694e19; 
_tb_token_=e3e11308ee6fe; hng=CN%7Czh-CN%7CCNY%7C156; thw=cn;  v=0;

읽기 쿠키는 모든 쿠키의 이름과 값 (세미콜론으로 구분)이 포함 된 문자열이며, 쿠키를 직접 구문 분석해야합니다.

쿠키 작성

document.cookie = 'uid=123;expires=Mon Jan 04 2022 17:42:40 GMT;path=/;secure;'
document.cookie = 'uid=123;expires=Mon Jan 04 2022 17:42:40 GMT;path=/caikuai;domain=edu.360.cn;secure;samesite=lax'

한 번에 하나의 쿠키 만 작성할 수 있으며 여러 개의 쿠키를 작성하려면 여러 번 작동해야합니다.

1. expires默认为session级别。
2. path默认为当前url的路径。
3. domain默认为当前访问域名。
4. samesite默认为Lax。
5. secure默认为false（即http）。

쿠키 삭제

기존 쿠키 이름의 만료 시간을 과거 시간으로 설정하기 만하면됩니다.

document.cookie = 'uid=dkfywqkrhkwehf23;expires=' + new Date(0) + ';path=/;secure;'

쿠키 수정

값을 다시 할당하면 이전 값이 새 값을 덮어 씁니다.

참고 : 경로와 도메인의 두 값이 변경되지 않았는지 확인해야합니다. 그렇지 않으면 새 쿠키가 추가됩니다.

Q : 여러 개의 쿠키를 설정하려면 어떻게해야합니까?
A : document.cookie는 한 번에 하나의 쿠키 만 설정할 수 있으며 document.cookie는 여러 번 작동해야합니다.

9. 서버가 쿠키를 읽고 쓰는 방법

섹션 2 "쿠키의 작동 원리"는 서버가 쿠키를 읽고 쓸 수 있음을 알려줍니다. 그림에서 쿠키가 작성 될 때 Set-Cookie가 쿠키를 작성 함을 알 수 있습니다. 쿠키를 읽을 때 모든 쿠키 정보가 쿠키 필드에 입력됩니다.

Express를 예로 들어 보겠습니다.

쿠키 작성

res.setHeader('Set-Cookie', ['uid=123;maxAge: 900000; httpOnly: true']);
// 或者
res.cookie("uid",'123',{maxAge: 900000, httpOnly: true});

쿠키 읽기

console.log(req.getHeader('Cookie')); // 拿到所有cookie
// 或者
console.log(req.cookie.name);

10. 쿠키 크기 및 수에 대한 제한

브라우저마다 쿠키의 크기와 개수에 대한 제한이 다릅니다. 일반적으로 단일 도메인 이름으로 설정되는 쿠키의 개수는 30 개를 초과하지 않아야하며 각 쿠키의 크기는 4KB를 초과하지 않아야합니다. 초과하면 쿠키는 무시됩니다. 설정됩니다.

제한된 공간으로 인해 인터뷰 질문의 일부만 공유 할 수 있으며, 더 많은 프론트 엔드 인터뷰 질문과 답변은 [click me]를 통해 읽고 다운로드 할 수 있습니다 ~ 무료로 모든 사람과 공유 하세요 . 감사 한 피드백입니다.

11. 브라우저에서 쿠키 기능이 켜져 있는지 확인

window.navigator.cookieEnabled // true

12. 쿠키 공유 전략은 무엇입니까

도메인과 경로는 함께 쿠키에 액세스 할 수있는 URL을 결정합니다.

URL에 접근 할 때 URL의 호스트가 도메인의 도메인 또는 하위 도메인과 동일하고 URL의 경로가 경로 부분과 일치하면 쿠키를 읽을 수 있습니다.

쿠키가 위 그림과 같은 경우 URL과 읽을 수있는 쿠키 간의 해당 관계는 다음과 같습니다.

URL	uid1	uid2	uid3
edu.360.cn/caikuai/	√	√	√
edu.360.cn/	√	√	×
360.cn/article/123…	√	×	×

13. 교차 도메인 요청 (CORS)의 쿠키

먼저 쿠키의 SameSite를 없음으로 설정해야합니다. 둘째, Access-Control-Allow-Credentials가 true로 설정된 인터페이스 (쿠키 전송이 허용됨을 나타냄)의 경우 ajax 요청을 보낼 때 withCredentials 속성을 true로 설정해야합니다.

14. 쿠키 인코딩

document.cookie = 'uid=123;expires=Mon Jan 04 2022 17:42:40 GMT;path=/caikuai;domain=edu.360.cn;secure;samesite=lax'

document.cookie 할당을 통해 등호, 콜론, 세미콜론, 공백, 쉼표, 슬래시 와 같은 특수 문자 가 있음을 알 수 있습니다 . 따라서 이러한 유형의 기호가 쿠키의 키와 값에 존재하면 Encoding이어야합니다. 일반적으로 작업을 위해 encodeURIComponent / decodeURIComponent를 사용합니다.

Q : 인코딩에 escape 및 encodeURI를 사용하지 않는 이유는 무엇입니까?
A :이 두 API에 비해 encodeURIComponent는 "/"와 같은 더 많은 문자를 인코딩 할 수 있습니다.

15. 쿠키 및 웹 보안

1. 쿠키가 XSS 취약점을 처리하는 방법 *

XSS 취약점의 원칙은 사용자가 제출 한 양식 데이터 또는 URL 매개 변수가 처리없이 페이지에 표시되어 사용자가 제출 한 콘텐츠가 페이지에서 구문 분석되고 html로 실행되는 것입니다.

기존 방식 : "<"및 ">"등과 같은 특수 문자를 이스케이프 처리합니다.

쿠키 대응 계획 : 사용자가 스크립트를 사용하여 쿠키 정보를 수집 할 수 있도록 중요한 쿠키 정보를 HttpOnly로 설정하여 js가 쿠키를 수집하지 못하도록 할 수 있습니다.

2. 쿠키가 CSRF 공격에 대응하는 방법

CSRF, 중국어 이름은 교차 사이트 요청 위조입니다. 원칙은 사용자가 웹 사이트 A에 로그인 한 다음 리디렉션 등의 이유로 웹 사이트 B를 방문하는 것입니다. 웹 사이트 B는 웹 사이트 A에 대한 요청을 직접 보냅니다. 웹 사이트가 로그인 상태에 있고 CSRF 공격이 발생합니다 (핵심은 쿠키 정보를 사용하여 사이트간에 전달되는 것입니다)!

기존 방식 : 인증 코드 또는 토큰 등 사용

쿠키 대응 계획 : CSRF 공격의 핵심은 쿠키 정보를 사용하여 사이트간에 전달되는 것이므로 핵심 쿠키의 SameSite를 Strict 또는 Lax로 설정하여이를 방지 할 수 있습니다.

16. 다른 브라우저가 쿠키를 공유합니까?

다른 브라우저는 서로 통신하지 않으며 독립적 인 쿠키입니다. 따라서 한 브라우저에서 특정 웹 사이트에 로그인 할 때 다른 브라우저로 전환 할 때 다시 로그인해야합니다.

17. 쿠키와 localStorage / sessionStorage의 차이점

특성	쿠키	localStorage	sessionStorage
운영자	서버 및 js	js	js
데이터 수명	만료 시간 설정	삭제하지 않는 한 영원히 저장	현재 세션에서만 유효하며 페이지 또는 브라우저를 닫은 후 지워집니다.
저장 데이터 크기	약 4K	일반적으로 5M	일반적으로 5M
서버와 통신	HTTP 헤더에서 전달 될 때마다 HTTP 헤더에서 전달 될 때마다	서버와 통신하지 않음	서버와 통신하지 않음
사용의 용이성	기본 쿠키 인터페이스는 친숙하지 않으며 캡슐화해야합니다.	사용하기 쉬운 인터페이스	사용하기 쉬운 인터페이스

18. 쿠키에 저장하기에 적합한 정보

쿠키의 증가는 의심 할 여지없이 네트워크 요청의 오버 헤드를 증가시키고 각 요청은 쿠키를 그대로 가져 오므로 "각 요청에 전달되어야하는 정보 (예 : ID 정보, A / B 버킷 정보 등)" , 쿠키에 배치하는 것이 적합하며 다른 유형의 데이터는 localStorage에 배치하는 것이 좋습니다.

쿠키 인터뷰 질문 외에도 일련의 프런트 엔드 인터뷰 질문을 만들었습니다. 도움이 필요한 친구는 아래 파란색 글자를 클릭하여 읽을 수 있습니다.