이 페이지는 Cloud Translation API를 통해 번역되었습니다.

SameSite 쿠키 레시피

Rowan Merewood

</ph> 참고: 이 페이지는 다음을 포함하는 SameSite 쿠키 속성 변경사항 시리즈의 일부입니다. <ph type="x-smartling-placeholder">

Chrome Firefox, Edge, 및 기타 기능은 IETF 관련 표준에 따라 기본 동작을 변경하고 있습니다 제안하고 점진적으로 향상된 쿠키 다음과 같이 하세요.

SameSite 속성이 없는 쿠키는 SameSite=Lax로 취급됩니다. 즉, 기본 동작은 사이트에서 퍼스트 파티 쿠키만 사용하도록 전혀 사용할 수 없습니다.
크로스 사이트 사용용 쿠키는 다음과 같이 SameSite=None; Secure를 지정해야 합니다. 제3자 문맥에 포함할 수 있도록 합니다.

아직 업데이트하지 않은 경우 향후 차단되지 않습니다.

브라우저 지원

<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">

소스

크로스 사이트 또는 서드 파티 쿠키 사용 사례

쿠키가 필요한 여러 일반적인 사용 사례와 패턴이 있습니다. 전송됩니다 이러한 용도 중 하나를 제공하거나 사용하는 경우 귀하 또는 제공업체가 쿠키를 다음과 같이 업데이트해야 합니다. 서비스가 올바르게 작동하도록 합니다

`<iframe>` 내의 콘텐츠

<iframe>에 표시되는 다른 사이트의 콘텐츠는 서드 파티에서 제공합니다. 있습니다. 표준 사용 사례는 다음과 같습니다.

다른 사이트에서 공유한 삽입된 콘텐츠(예: 동영상, 지도, 코드 샘플, 소셜 게시물 등이 포함됩니다
결제, 캘린더, 예약, 결제와 같은 외부 서비스의 위젯 예약 기능을 제공합니다
눈에 잘 띄지 않는 소셜 버튼 또는 사기 방지 서비스 등의 위젯 <iframes>

쿠키는 무엇보다도 세션 상태를 유지하고, 정보를 저장하고, 통계를 사용 설정하거나 사용자 대상 콘텐츠를 맞춤설정할 수 있습니다. 새 계정을 만들 수 있습니다.

삽입된 콘텐츠의 URL이 페이지의 URL과 일치하지 않는 브라우저 창의 다이어그램 — </ph> 삽입된 콘텐츠가 최상위 수준의 콘텐츠와 같은 사이트에서 오지 않는 경우 제3자 콘텐츠입니다

웹은 본질적으로 구성 가능하므로 <iframes>를 사용하여 최상위 또는 퍼스트 파티 맥락에서 조회된 콘텐츠 사이트의 모든 쿠키 쿠키는 서드 파티 쿠키로 간주됩니다. 만약 다른 사이트에서 삽입하도록 허용하고 싶은 사이트를 만들 수 있으며, 해당 사이트를 만들려면 쿠키가 필요합니다. 크로스 사이트 사용이 가능하도록 하거나 그것 없이 우아하게 돌아갈 수 있습니다.

'안전하지 않음' 사이트 전체의 요청 수

'안전하지 않음' 걱정이 될 수 있지만 그것은 당신이 할 수있는 모든 요청을 의미합니다 사용하여 상태를 변경할 수 있습니다. 웹에서는 주로 POST 요청입니다. 쿠키 SameSite=Lax로 표시된 알림은 안전한 최상위 탐색(예: 링크를 클릭하면 다른 사이트로 이동할 수 있습니다. 그러나 <form> 제출과 같은 POST를 사용하는 다른 사이트는 쿠키를 포함하지 않습니다.

한 페이지에서 다른 페이지로 이동하는 요청의 다이어그램 — </ph> 수신되는 요청에서 'safe' 해당 페이지에서 쿠키를 전송합니다.

이 패턴은 사용자를 원격 사이트로 리디렉션할 수 있는 사이트에 (예: 서드 파티 ID 공급업체에 대한 액세스를 제공합니다 쿠키는 사용자가 사이트를 떠나기 전에 이 토큰이 사용될 수 있을 것으로 예상하는 일회용 토큰이 포함된 반환 요청을 확인하여 교차 사이트 요청 위조 (CSRF) 있습니다. 해당 반환 요청이 POST를 통해 오면 쿠키를 SameSite=None; Secure로 설정합니다.

원격 리소스

페이지의 모든 원격 리소스(예: <img> 태그 또는 <script> 태그) 요청과 함께 전송되는 쿠키를 사용할 수 있습니다 일반적인 사용 사례는 다음과 같습니다. 콘텐츠 맞춤설정이 포함됩니다.

이는 fetch 또는 XMLHttpRequest fetch()가 credentials: 'include' 옵션, 이러한 요청에는 쿠키가 포함될 가능성이 높습니다. XMLHttpRequest의 경우 예상 쿠키는 일반적으로 withCredentials 값 true. 이러한 쿠키는 교차 사이트 요청입니다

WebView 내의 콘텐츠

플랫폼별 앱의 WebView는 브라우저에서 구동됩니다. 개발자는 앱에 영향을 미치는 제한사항이나 문제가 앱에도 적용되는지 앱의 WebView를 활용할 수 있습니다.

또한 Android에서는 자체 플랫폼별 앱이 CookieManager API 헤더나 자바스크립트를 사용하여 설정된 쿠키와 마찬가지로 SameSite=None; Secure(크로스 사이트용인 경우)

현재 `SameSite`를 구현하는 방법

퍼스트 파티 맥락에서만 필요한 쿠키를 SameSite=Lax로 표시합니다. 또는 SameSite=Strict를 사용하세요. 이러한 쿠키를 대신 기본 브라우저 동작에 의존하여 이러한 이벤트를 처리하므로 브라우저 간에 일관되지 않아 각 페이지마다 콘솔 경고가 트리거될 수 있습니다 쿠키.

Set-Cookie: first_party_var=value; SameSite=Lax

서드 파티 컨텍스트에 필요한 쿠키는 SameSite=None; Secure 두 속성 모두 필수입니다. kubectl 명령어만 지정하면 Secure 없이 None이면 쿠키가 거부됩니다. 차이를 고려하기 위해 브라우저 구현에서는 이러한 문제를 해결하기 위해 호환되지 않는 클라이언트 처리에 설명된 전략을 참조하세요.

Set-Cookie: third_party_var=value; SameSite=None; Secure

호환되지 않는 클라이언트 처리

None를 포함하고 기본 동작을 업데이트하기 위한 이러한 변경사항은 여전히 브라우저마다 이러한 특성을 서로 다른 방식으로 처리합니다. 다음을 참조할 수 있습니다. chromium.org의 업데이트 페이지 를 참조하세요. 하지만 이 목록은 전체 목록이 아닐 수도 있습니다.

한 가지 가능한 해결 방법은 각 쿠키를 새 스타일과 이전 스타일로 설정하는 것입니다.

Set-cookie: 3pcookie=value; SameSite=None; Secure
Set-cookie: 3pcookie-legacy=value; Secure

최신 동작을 구현하는 브라우저는 SameSite를 사용하여 쿠키를 설정합니다. 값으로 사용됩니다. 새 동작을 구현하지 않는 브라우저는 해당 값을 무시하고 3pcookie-legacy 쿠키. 포함된 쿠키를 처리할 때 사이트는 다음을 준수해야 합니다. 먼저 새로운 스타일의 쿠키가 있는지 확인한 다음 새 쿠키를 찾을 수 없는 경우 기존 쿠키를 삭제합니다.

다음 예시에서는 Node.js에서 Express 프레임워크 및 cookie-parser 미들웨어:

const express = require('express');
const cp = require('cookie-parser');
const app = express();
app.use(cp());

app.get('/set', (req, res) => {
  // Set the new style cookie
  res.cookie('3pcookie', 'value', { sameSite: 'none', secure: true });
  // And set the same value in the legacy cookie
  res.cookie('3pcookie-legacy', 'value', { secure: true });
  res.end();
});

app.get('/', (req, res) => {
  let cookieVal = null;

  if (req.cookies['3pcookie']) {
    // check the new style cookie first
    cookieVal = req.cookies['3pcookie'];
  } else if (req.cookies['3pcookie-legacy']) {
    // otherwise fall back to the legacy cookie
    cookieVal = req.cookies['3pcookie-legacy'];
  }

  res.end();
});

app.listen(process.env.PORT);

이 방법을 사용하려면 추가 작업을 하여 중복 쿠키를 설정하고 쿠키를 설정하고 읽는 시점에 모두 변경될 수 있습니다. 하지만 동작과 관계없이 모든 브라우저를 커버하고, 서드 파티 쿠키를 작동한다는 것입니다.

또는 다음과 같은 경우 사용자 에이전트 문자열을 사용하여 클라이언트를 감지할 수 있습니다. Set-Cookie 헤더가 전송됩니다. 자세한 내용은 호환되지 않는 클라이언트 목록 플랫폼에 적합한 사용자 에이전트 감지 라이브러리 예를 들어 ua-parser-js 라이브러리는 살펴봤습니다 이 접근 방식에서는 한 번만 변경하면 되지만 사용자 에이전트는 스니핑으로 인해 영향을 받는 모든 사용자를 포착할 수는 없습니다.

언어, 라이브러리, 프레임워크에서 `SameSite=None` 지원

대부분의 언어와 라이브러리는 SameSite 속성을 지원합니다. 쿠키. 그러나 SameSite=None를 추가하는 것이 여전히 상대적으로 지금은 몇 가지 표준 동작을 해결해야 할 수도 있습니다. 이러한 동작은 GitHub의 SameSite 예시 저장소

도움 받기

쿠키는 웹의 모든 곳에서 사용되며 개발팀에서 거의 사용하지 않는 편임 특히 해당 사이트가 위치 및 사용되는 위치를 완벽하게 파악할 수 있어야 합니다. 크로스 사이트 사용 사례에 도움이 될 수 있습니다 문제가 발생한 것이 처음이라면 이 문제에 직면한 적이 있으므로 언제든지 문의해 주세요.

다음에서 문제 제기: GitHub의 SameSite 예시 저장소
질문하기: 'samesite' 태그 지정을 참조하세요.
Chromium 동작 관련 문제는 Chromium Issue Tracker.
다음에서 Chrome의 진행 상황을 SameSite 업데이트 페이지.