월간 크롬 이슈 리포트 2024년 4월호

들어가며

프런트엔드 개발에 가장 많은 영향을 주는 크롬 브라우저의 버전별 변경 예정 항목을 정리 및 공유한다.

💡 각 항목은 Chrome Platform Status의 Roadmap과 한 달간의 blink-dev 활동 요약을 바탕으로 정리했다.

💡 각 항목의 ⚠️는 지원 중단(Deprecated), ✅는 새로운 기능(Enabled by default), 🧪는 미리 보기(Developer Trial, Origin Trial)를 의미한다.

💡 각 항목 중 기존 서비스에 미치는 영향이 크다고 판단한 항목은 소제목 뒤에 📌 표시를 했다.

💡 지원 중단(⚠️) 외의 항목은 공유 가치가 있다고 판단한 경우에만 포함했다.

💡 미리 보기(🧪)는 chrome://flags 페이지에서 Experimental Web Platform features를 활성화(Developer Trial) 또는 출처 미리 보기(Origin Trial)를 신청해 사용할 수 있다.

💡 각 항목에 대한 주요 브라우저 및 웹 개발자의 의견은 Chrome Platform Status를 그대로 인용했다.

목차

1. Chrome 125

   • ⚠️ enable-new-base-url-inheritance-behavior 기본값 Disabled로 변경
   • ⚠️ Permissions-Policy "window-placement" 별칭 제거
   • ✅ WebSocket에서 http(s)를 허용하도록 변경
   • ✅ Compute Pressure API
   • ✅ CSS Anchor 배치
   • ✅ CSS round(), mod(), rem()
   • ✅ mousemove 이벤트 취소 시 동작 변경 📌
   • 🧪 HTMLVideoElement 전체 화면 접두사 API 제거 미리 보기
   • 🧪 폴더블 기기 API 미리 보기
   • 🗓️ 배포 예정일

2. Chrome 127

   • ⚠️ Mutation 이벤트 제거 📌
   • ✅ 공개 사이트에서 내부망에 하위 자원 요청 시 보안 컨텍스트 강제 📌
   • 🗓️ 배포 예정일

3. Chrome NEXT

   • ⚠️ [Chrome 129] DOMParser.parseFromString()의 includeShadowRoots 옵션 지원 중단
   • ✅ [Chrome 130] 내부망 페이지 이동 시 사전 요청 발송 - 경고 모드
   • ⚠️ unload 이벤트 지원 중단 📌
   • ⚠️ CSS 구형 사용자 지정 상태 문법 지원 중단
   • ⚠️ 제3자 쿠키 지원 중단 📌

1. Chrome 125

⚠️ enable-new-base-url-inheritance-behavior 설정 제거

chrome://flags#enable-new-base-url-inheritance-behavior 설정을 제거한다.

위 설정은 자식 창에서 srcdoc을 사용하거나 about:blank 페이지를 렌더링할 때 부모의 <base> 속성을 명세에서 정의한 대로 상속받지 않는 버그의 임시 조치를 위해 추가한 속성이다. Chrome 118부터 기본값이 Enabled였으며, 해당 버그를 수정해 임시 추가했던 설정을 제거한다.

이 항목에 대한 주요 브라우저 및 웹 개발자의 의견은 다음과 같다.

• Firefox: 의견 없음
• Safari: 의견 없음
• 웹 개발자: 의견 없음

참조

• Feature: deprecate enterprise policy NewBaseUrlInheritanceBehaviorAllowed

⚠️ Permissions-Policy "window-placement" 별칭 제거

window-management는 브라우저 창을 제어하는 Window Management API를 사용하기 위한 권한이다.

처음에 이 API는 하위 창(window.open)의 위치를 제어하는 기능에만 초점을 두었다. 권한의 이름도 window-placement였으나, API가 창의 크기 등 위치 말고도 많은 기능을 지원하도록 바뀌면서 보다 넓은 의미의 window-management로 명세를 수정했다.

비표준 API인 만큼 Chrome 팀은 따로 지원 중단 기간 없이 이번 업데이트에서 바로 window-placement를 제거할 예정이다. Chrome 111부터 window-management를 사용할 수 있으니 업데이트 전에 미리 변경하기를 권장한다.

이 항목에 대한 주요 브라우저 및 웹 개발자의 의견은 다음과 같다.

• Firefox: 의견 없음
• Safari: 해당 없음
• 웹 개발자: 의견 없음

참조

• Feature: Remove "window-placement" alias for permission and permission policy "window-management"
• Feature: Add "window-management" as an alias for permission and permission policy "window-placement"
• Window Management

✅ WebSocket에서 http(s)를 허용하도록 변경

WebSocket 생성자가 http 또는 https를 허용하도록 변경한다. 기존에는 ws나 wss을 사용하는 절대 경로의 URL만 허용해 WebSocket 사용 시 불편함이 있었다. 업데이트 이후에는 http, https 프로토콜과 상대 경로 URL을 모두 사용할 수 있어 WebSocket 개발이 좀 더 쉬워질 예정이다.

// 현재는 상대 경로 사용 시 오류가 발생한다.
// Failed to construct 'WebSocket': The URL '/channel' is invalid.
const socket = new WebSocket('/channel');

WebSocket 생성자는 첫 번째 인자가 http(s) 프로토콜이나 상대 경로일 경우, URL을 대응하는 ws(s)로 바꾸어 요청한다.

이 항목에 대한 주요 브라우저 및 웹 개발자의 의견은 다음과 같다.

• Firefox: 검토 중
• Safari: 배포 완료
• 웹 개발자: 의견 없음

참조

• Feature: Accept HTTP(S) URLs when constructing WebSocket
• WebSocket

✅ Compute Pressure API

Compute Pressure API를 추가한다. 시스템의 부하 정도에 대한 정보를 실시간으로 제공하는 API로, 화상 회의나 게임 등 무거운 웹 앱에서 최적화를 위해 사용할 수 있다.

if ('PressureObserver' in globalThis) {
  const observer = new PressureObserver(
    (records) => {
      records.forEach((record) => {
        if (record.source === 'cpu') {
          console.log(`CPU 부하 상태(time: ${record.time}): ${record.state}`);
          // 예시) CPU 부하 상태(time: 1708051909444): critical

          if (record.state === 'critical') {
            setResolution(360);
          } else if (record.state === 'serious') {
            setResolution(720);
          }
        }
      });
    },
    {
      sampleInterval: 2000, // 단위: 밀리초(ms)
    }
  );

  await observer.observe('cpu');

  buttonElement.onclick = () => {
    observer.disconnect();
  };
}

이번 업데이트에서는 CPU 상태만 지원하나, 나중에는 온도나 배터리 상태 등의 정보도 포함할 예정이다. 다만 Safari는 해당 기능에 부정적인 입장이다. 실시간으로 변하는 부하 정보를 정확히 전달하기 어렵고, 시스템 정보를 사용하는 만큼 보안 문제가 있을 수 있다는 의견이다.

Chrome은 Safari의 의견을 받아들여 일단 부하 상태를 간략하게만 제공하는 것으로 명세를 수정했다. 아직 제안 중인 API인 만큼 명세가 바뀔 수 있으니 참고하자.

이 항목에 대한 주요 브라우저 및 웹 개발자의 의견은 다음과 같다.

• Firefox: 의견 없음
• Safari: 부정적
• 웹 개발자: 긍정적

참조

• Feature: Compute Pressure
• Compute Pressure Level 1
• Chrome Developers - Compute Pressure API

✅ CSS Anchor 배치

특정 요소에 기반해 현재 요소를 배치할 수 있는 Anchor 배치 모듈을 추가한다. 특히 툴팁 등을 구현할 때 유용한데, absolute 배치와 비슷하나 DOM 구조에 구애받지 않고 툴팁을 구현할 수 있다는 점이 다르다.

.anchor {
  anchor-name: --tooltip;
}

.tooltip {
  position: fixed;
  position-anchor: --tooltip;
  inset-area: top right;
  position-try: flip-block;
  min-width: anchor-size(width);
}

예제처럼 코드를 작성하면 .tooltip은 .anchor 요소의 오른쪽 위에 나타난다. 만약 .tooltip이 브라우저 화면을 벗어난다면 position-try: flip-block에 의해 .anchor 요소의 아래에 배치된다.

anchor-name에는 해당 Anchor의 이름을 선언하며, 해당 Anchor에 배치할 요소에서 이 이름으로 해당 요소의 위치나 크기 등에 접근할 수 있다. anchor() 함수는 해당 Anchor의 위치값을, anchor-size()는 해당 Anchor의 크기값을 반환하는 함수로, 기본적으로 아래처럼 Anchor의 이름을 인자로 받는다.

.tooltip {
  bottom: anchor(--tooltip top);
  max-width: anchor-size(--tooltip width);
}

만약 해당 요소에 position-anchor를 설정했다면 첫 번째 인자를 생략할 수 있다.

.tooltip {
  position-anchor: --tooltip;
  bottom: anchor(top);
  max-width: anchor-size(width);
}

@position-try 규칙을 선언하면 해당 요소가 브라우저 화면을 벗어날 경우에 대한 스타일을 정의할 수 있다.

@position-try --tooltip-position {
  @try {
    top: anchor(--tooltip bottom);
    left: anchor(--tooltip left);
  }

  @try {
    bottom: anchor(--tooltip top);
    left: anchor(--tooltip left);
  }

  @try {
    top: anchor(--tooltip bottom);
    right: anchor(--tooltip right);
  }
}

#tooltip {
  position: fixed;
  position-try-options: --tooltip-position;
}

위 코드는 먼저 Anchor의 왼쪽 아래에 배치를 시도하며, 만약 화면을 벗어나면 Anchor의 왼쪽 위, 마지막으로 Anchor에 오른쪽 아래에 #tooltip을 배치하라는 의미이다.

이 기능은 아직 초안으로 명세나 동작이 바뀔 수 있음에 주의하자.

이 항목에 대한 주요 브라우저 및 웹 개발자의 의견은 다음과 같다.

• Firefox: 긍정적
• Safari: 의견 없음
• 웹 개발자: 매우 긍정적

참조

• Feature: CSS Anchor Positioning
• CSS Anchor Positioning

✅ CSS round(), mod(), rem()

값을 연산할 때 사용할 수 있는 round(), mod(), rem() CSS 함수를 추가한다.

round()는 첫 번째 인자의 값에 따라 두 번째 값을 연산한 결과를 반환한다.

width: round(nearest, var(--height), 50px);

round()의 첫 번째 인자로는 up, down, to-zero, nearest를 쓸 수 있다. 이들은 각각 올림, 내림, 버림, 반올림을 세 번째 인자를 기준으로 수행하며, 기본값은 nearest이다.

width: round(up, 101px, 50px); /* 150px */
width: round(down, -101px, 10px); /* -110px */
width: round(to-zero, -101px, 10px); /* -100px */
width: round(27px, 5px); /* 25px, 첫 번째 인자를 생략하면 기본값인 nearest를 사용한다. */

mod()와 rem()은 나머지를 반환하는 함수로 자바스크립트의 % 연산자와 기능적으로 유사하다. 두 함수는 부호를 가져오는 방식이 다른데, mod()는 부호를 두 번째 인자에서 가져오며, rem()은 첫 번째 인자에서 부호를 가져온다.

rotate: mod(-90deg, 20deg); /* 10deg */
rotate: mod(90deg, -20deg); /* -10deg */
rotate: rem(-90deg, 20deg); /* -10deg */
rotate: rem(90deg, -20deg); /* 10deg */

이 항목에 대한 주요 브라우저 및 웹 개발자의 의견은 다음과 같다.

• Firefox: 배포 완료
• Safari: 배포 완료
• 웹 개발자: 긍정적

참조

• Feature: CSS Stepped Value Functions
• CSS Values and Units Module Level 4 - Stepped Value Functions: round(), mod(), and rem()

✅ mousemove 이벤트 취소 시 동작 변경 📌

명세에 따라 mousemove 이벤트를 취소(event.preventDefault())했을 때 텍스트 선택, 드래그 앤 드롭을 취소하지 않도록 변경한다. 텍스트 선택과 드래그 앤 드롭을 mousemove 이벤트의 기본 동작에서 제외하는 것으로, Safari와 Firefox는 작년 하반기에 해당 기능을 반영했다.

기존처럼 텍스트 선택은 selectstart 이벤트를, 드래그 앤 드롭은 dragstart 이벤트를 취소하는 것으로 기본 동작을 막을 수 있다. 만약 mousemove 이벤트를 취소하는 것으로 위 기능을 막았다면 selectstart와 dragstart 이벤트를 취소하는 것으로 변경해야 한다.

element.addEventListener('selectstart', (event) => {
  event.preventDefault();
});
element.addEventListener('dragstart', (event) => {
  event.preventDefault();
});

이 항목에 대한 주요 브라우저 및 웹 개발자의 의견은 다음과 같다.

• Firefox: 배포 완료
• Safari: 배포 완료
• 웹 개발자: 긍정적

참조

• Feature: Interoperable mousemove default action
• UI Events - mousemove
• Element: mousemove event
• Node: selectstart event
• HTMLElement: dragstart event

🧪 HTMLVideoElement 전체 화면 접두사 API 제거 미리 보기

<video> 요소의 일부 접두사 API 제거 미리 보기를 추가한다.

지금은 대부분의 브라우저가 Element.requestFullscreen() 메서드를 사용해 <video> 요소가 아니라도 특정 요소를 전체 화면으로 띄울 수 있다. 제거 예정인 API는 과거 <video> 요소의 전체 화면 지원을 위해 접두사(webkit)를 붙여 추가했던 속성으로, Chrome 38 버전부터 지원 중단되었다.

Chrome도 71 버전부터 Fullscreen API를 지원하니 아직 이전 API를 사용한다면 해당 API로 전환해야 한다. 이번에 제거되는 속성은 다음과 같다.

- boolean webkitSupportsFullscreen;
- boolean webkitDisplayingFullscreen;
- void webkitEnterFullscreen();
- void webkitExitFullscreen();
- void webkitEnterFullScreen();
- void webkitExitFullScreen();

이 항목에 대한 주요 브라우저 및 웹 개발자의 의견은 다음과 같다.

• Firefox: 해당 없음
• Safari: 의견 없음
• 웹 개발자: 의견 없음

참조

• Feature: Remove Prefixed HTMLVideoElement Fullscreen APIs
• Fullscreen API

🧪 폴더블 기기 API 미리 보기

폴더블 기기의 접음/펼침 상태를 알 수 있는 Device Posture API와 화면 분할 개수에 따른 미디어 쿼리를 작성할 수 있는 Viewport Segments Enumeration API의 출처 미리 보기를 추가한다. 두 API를 사용하면 폴더블 기기의 상태에 따라 맞춤 UI를 구성할 수 있다.

navigator.devicePosture.addEventListener('change', () => {
  const postureType = navigator.devicePosture.type; // "continuous" 또는 "folded"

  console.log(postureType === 'folded' ? '접힘' : '펼침');
});

@media (device-posture: folded) and (horizontal-viewport-segments: 2) and (vertical-viewport-segments: 1) {
  .main {
    grid-template-columns: repeat(3, 200px);
  }
}

horizontal-viewport-segments와 vertical-viewport-segments는 각각 힌지 등으로 나누어진 가로, 세로 논리적 화면의 개수를 말한다. 이 API는 아직 초안으로 명세가 바뀔 수 있으니 참고하자.

이 항목에 대한 주요 브라우저 및 웹 개발자의 의견은 다음과 같다.

• Firefox: 의견 없음
• Safari: 의견 없음
• 웹 개발자: 의견 없음

참조

• Feature: Foldable APIs
• Device Posture API
• Media Queries Level 5 - Viewport Segments

🗓️ 배포 예정일

Chrome 125는 2024년 5월 8일에 정식 배포 예정이다.

2. Chrome 127

⚠️ Mutation 이벤트 제거 📌

MutationEvent는 DOM 요소에 변경이 있을 때 발생하는 이벤트로, DOMSubtreeModified, DOMNodeInserted, DOMNodeRemoved 등이 있다.

element.addEventListener(
  'DOMNodeInserted',
  (event) => {
    console.log('새로운 요소를 감지했습니다.', event.srcElement);
  },
  false
);

element.append(document.createElement('span'));

// 새로운 요소를 감지했습니다. <span></span>

이 이벤트를 사용하면 DOM 변경을 추적할 수 있으나, 설계상 결함과 치명적인 성능 문제를 이유로 2011년에 표준에서 퇴출되었다.

2012년에 더 안정적인 MutationObserver가 등장하여 현재 대부분의 브라우저에서 이 이벤트 사용 시 콘솔에 경고를 노출한다. 업데이트 후에는 해당 이벤트를 사용할 수 없기에 아직 MutationEvent를 사용한다면 MutationObserver로 전환해야 한다.

const observer = new MutationObserver((mutations) => {
  for (const mutation of mutations) {
    if (mutation.type === 'childList') {
      console.log('새로운 요소를 감지했습니다.', ...mutation.addedNodes);
    }
  }
});

observer.observe(element, { childList: true });
element.append(document.createElement('span'));

// 새로운 요소를 감지했습니다. <span></span>

만약 좀 더 MutationEvent를 사용해야만 한다면 출처 미리 보기를 신청해 Chrome 134(2025년 3월 배포 예정) 버전까지 MutationEvent를 사용할 수 있다.

이 항목에 대한 주요 브라우저 및 웹 개발자의 의견은 다음과 같다.

• Firefox: 긍정적
• Safari: 의견 없음
• 웹 개발자: 의견 없음

참조

• Feature: Mutation Events (Deprecated)
• UI Events
• MutationEvent
• MutationObserver

✅ 공개 사이트에서 내부망에 하위 자원 요청 시 보안 컨텍스트 강제 📌

공개 웹 사이트에서 내부망에 하위 자원(.js, .css 등) 요청 시 보안 컨텍스트(TLS)를 사용하도록 강제한다. Private Network Access 적용의 일부로, 사용자의 기기 등 내부망에 자원을 요청할 때는 반드시 보안 연결을 사용해야 한다.

브라우저는 요청을 보내기 연결이 보안 컨텍스트를 사용하는지 확인하며, 보안 연결을 사용하지 않는 경우 요청을 실패 처리한다. Chrome 124에서 해당 규칙의 완화 기능을 해당 규칙의 완화 기능을 적용했으니 참고하자.

이 항목에 대한 주요 브라우저 및 웹 개발자의 의견은 다음과 같다.

• Firefox: 긍정적
• Safari: 긍정적
• 웹 개발자: 복합적

참조

• Feature: Restrict "private network requests" for subresources from public websites to secure contexts.
• Private Network Access: Secure Context Restriction
• Private Network Access: Permission to relax mixed content
• Private Network Access

배포 예정일

Chrome 127는 2024년 7월 17일에 정식 배포 예정이다.

3. Chrome NEXT

⚠️ [Chrome 129] DOMParser.parseFromString()의 includeShadowRoots 옵션 지원 중단

DOMParser.parseFromString()의 includeShadowRoots 옵션을 지원 중단한다. DOMParser.parseFromString()은 인자로 받은 HTML을 파싱해 문서 객체를 반환하는 메서드이다.

const html = `
    <div>
      <template shadowroot="open"></template>
    </div>
  `;
const fragment = new DOMParser().parseFromString(html, 'text/html', {
  includeShadowRoots: true,
});

// output: <html>...<template>#document-fragment</template>...</html>

이 ShadowRoot API의 초안에서는 includeShadowRoots를 사용해 섀도 DOM의 포함 여부를 결정했다. 하지만 논의 과정에서 명세가 바뀌어 parseHTMLUnsafe()를 쓰는 것으로 변경했다.

이번 업데이트에서는 includeShadowRoots 옵션 제거 미리 보기를 추가한다. 만약 이 옵션을 사용한다면 업데이트 전에 Chrome 124에서 배포된 parseHTMLUnsafe()를 사용하도록 변경해야 한다.

이 항목에 대한 주요 브라우저 및 웹 개발자의 의견은 다음과 같다.

• Firefox: 의견 없음
• Safari: 의견 없음
• 웹 개발자: 의견 없음

참조

• Feature: Deprecate the includeShadowRoots argument on DOMParser
• DOMParser: parseFromString() method
• ShadowRoot

✅ [Chrome 130] 내부망 페이지 이동 시 사전 요청 발송 - 경고 모드

내부망 보안 강화를 위한 내부망 접근 규칙(Private Network Access)의 일부를 적용한다. 내부망에서 페이지 이동 시 접근 가능 여부를 먼저 확인하며, 실패 시 개발자 도구에 경고를 노출한다.

내부망에서 페이지를 이동하면 브라우저는 서버가 보안 컨텍스트를 사용하는지 확인한다. 그리고 사전 요청을 보내 서버가 내부망 접근을 허용하는지 확인한다.

Access-Control-Allow-Origin: https://example.com
Access-Control-Allow-Methods: GET
Access-Control-Allow-Credentials: true
Access-Control-Allow-Private-Network: true

서버가 위처럼 접근을 허용하면 요청을 그대로 진행하며, 거부하면 개발자 도구에 경고를 노출한다. Chrome은 보안 강화를 위해 점차 경고 노출 대신 요청을 실패 처리할 예정이다. Chrome 104에서 하위 리소스(.js, .css 등)에는 미리 같은 기능을 적용했으니 참고하자.

이 항목에 대한 주요 브라우저 및 웹 개발자의 의견은 다음과 같다.

• Firefox: 긍정적
• Safari: 긍정적
• 웹 개발자: 복합적

참조

• Feature: Private network access checks for navigation requests: warning-only mode
• Private Network Access

⚠️ unload 이벤트 지원 중단 📌

unload 이벤트는 해당 문서를 떠나거나 하위 자원(.js, .css 등)을 메모리에서 해제할 때 발생하는 이벤트다. 이 이벤트를 이용하면 사용자가 페이지를 종료하기 전에 특정 동작을 실행할 수 있다.

window.addEventListener('unload', (event) => {
  navigator.sendBeacon('/api/log', 'unload!');
});

하지만 unload 이벤트는 beforeunload 이벤트와 달리 기본 동작을 취소(event.preventDefault())할 수 없어 이벤트가 아예 발생하지 않기도 한다. W3C의 통계에 따르면 unload 이벤트가 제대로 발생하는 경우가 Chrome 데스크탑에서는 95%, 모바일에서는 57% ~ 68% 정도로, 이는 모바일 환경의 특성상 브라우저가 아닌 다른 앱을 보다가 브라우저 자체를 종료하는 경우가 빈번하기 때문이다.

영향도가 큰 만큼, Chrome은 점진적으로 unload 이벤트를 제거할 계획이다. 먼저 Permissions-Policy를 추가해 사용 여부 허용을 결정할 수 있도록 하고, 나중에는 해당 권한의 기본 값을 deny로 바꿀 예정이다. Chrome 117에서 unload 이벤트의 허용 여부를 결정하는 Permissions-Policy의 미리 보기를 추가했으니 참고하자.

이 항목에 대한 주요 브라우저 및 웹 개발자의 의견은 다음과 같다.

• Firefox: 의견 없음
• Safari: 의견 없음
• 웹 개발자: 긍정적

참조

• Feature: Deprecate unload event
• add unload permissions-policy feature
• Window: unload event

⚠️ CSS 구형 사용자 지정 상태 문법 지원 중단

CSS의 사용자 지정 상태 문법은 사용자가 직접 요소의 상태를 지정해 가상 선택자 등으로 사용할 수 있는 기능으로, 아직 표준이 아닌 초안 상태다.

// MyCustomElement.js
class MyCustomElement extends HTMLElement {
  set checked(flag) {
    if (flag) {
      this._internals.states.add('--foo');
    } else {
      this._internals.states.delete('--foo');
    }

    console.log(this._internals.states.has('--foo'));
  }
}

/* styles.css */
.custom:--foo {
  color: red;
}

기존에는 예시처럼 --foo와 같은 문법을 사용했으나, 이 문법이 현재 제안 중인 @custom-selectors 문법과 겹쳐 :state(foo)로 명세를 변경했다.

/* styles.css */
.custom:state(foo) {
  color: red;
}

현재 Chrome 90에서 구현한 구형 문법을 사용하는 사이트는 약 0.03%으로, Chrome 팀은 구형 문법을 지원 중단하기 위한 일정을 논의 중이다. Chrome 122 이상에서 미리 보기로 새 문법을 사용해 볼 수 있으니 참고하자.

이 항목에 대한 주요 브라우저 및 웹 개발자의 의견은 다음과 같다.

• Firefox: 의견 없음
• Safari: 의견 없음
• 웹 개발자: 의견 없음

참조

• Feature: Deprecate old CSS custom state syntax
• [selectors] Custom state pseudo class proposal
• CustomStateSet
• CSS Extensions - Custom Selectors

⚠️ 제3자 쿠키 지원 중단 📌

제3자 쿠키(Third-Party Cookies)는 현재 도메인과 다른 도메인에서 발행한 쿠키를 말한다. 제3자 쿠키를 활용하면 사용자의 취향, 활동 정보 등을 파악할 수 있어 광고 마케팅 분야에서 자주 사용했으나, 원하지 않는 개인정보까지 유출될 수 있다는 큰 단점이 있다.

크롬은 이미 관련 법 준수를 위해 2020년 1월부터 제3자 쿠키의 중단을 예고했다. 그동안 영향이 큰 점을 고려해 지원 중단을 계속 미뤄왔으나, 2024년에는 점진적으로 제3자 쿠키를 지원 중단할 예정이다.

구글이 대안으로 사용자의 개인정보는 보호하되, 기존의 제3자 쿠키가 하던 역할을 대체할 수 있는 Privacy Sandbox를 개발 중이니 참고하자.

이 항목에 대한 주요 브라우저 및 웹 개발자의 의견은 다음과 같다.

• Firefox: 배포 완료
• Safari: 배포 완료
• 웹 개발자: 복합적

참조

• Feature: Deprecate Third-Party Cookies
• The Privacy Sandbox