Third-Party Cookies Blocking과 Storage Access API

iOS와 iPadOS 13.4부터 시작된 Intelligent Tracking Prevention(ITP)에 대해서 먼저 알아봅시다.

웹사이트는 자체 도메인이 아닌 다른 도메인에서 이미지 및 스크립트 리소스를 가져올 수 있는데 이를 Cross origin, Cross-Site loading 이라고 한다. 그러나 이런 로딩은 사이트 간 추적을 가능하게 만듭니다.

example-products.com과 example-recipies.com이 있다. 두 사이트 모두 example-tracker.com에서 리소스를 로드하고 example-tracker.com에 사용자의 쿠키가 저장되어 있는 경우 example-tracker.com에서 두 사이트의 정보를 추적할 수 있는데, 이를 교차 사이트 추적이라고 하며 example-tracker.com에서 사용하는 쿠키를 타사 쿠키 라고 합니다.

이러한 cross-site resouces에 대한 쿠키가 2020년을 기준으로 기본적으로 차단되었습니다. 이 변화는 개인 정보 보호에 중요합니다. 2017년 최초 release 후, ITP에 대한 많은 제한 사항들을 추가했기 때문에 현재 대부분의 타사 쿠키가 Safari에서 이미 차단된 상태입니다. 이것은 2020년 공식 발표 이후 Chrome에서도 마찬가지입니다.(실제로 아이패드 앱에서 사파리 같은 경우에는 고급 설정을 통해 ITP 관련 설정을 활성화/비활성화 할 수 있었지만 크롬은 불가능했습니다. iOS 기본 브라우저가 사파라이기 때문에 제공해주는 기능인 것으로 보이나 크롬에서는 기본값이 타사 쿠키 차단으로 아이패드 설정이나 앱 설정으로 변경할 수 없었습니다.)

Cross-origin integration을 계속 지원하기 위해서 Storage Access API를 출시하여 쿠키 액세스 권한을 얻을 수 있는 수단을 제공하기 시작했습니다. 물론 아이패드 내에서 사파리 고급 설정 시 이를 활성화/비활성화 하는 기능이 있지만 사용자가 매번 이렇게 번거롭게 활성/비활성을 해줘야한다면 불편하겠죠?
때문에 third-party cookie access가 필요한 경우 Storage Access API를 사용해야 합니다.
(+❗️아직 크롬에서는 지원하지 않는 API 입니다... 왜... 지원해줘... 제발...)

사용자가 쿠키와 상호작용할 때 타사 액세스가 들어올 경우 자사 쿠키에 대한 액세스에 요청할 수 있도록 하는 것입니다.
document.hasStorageAccess()와 document.requestStoargeAccess() 두 가지가 있습니다. iframe embedding 시에는 sandbox 토큰인 allow-storage-access-by-activation을 제공해야합니다.

액세스 확인 시에는 document.hasStorageAccess()를 호출하여 자사 쿠키에 대한 액세스 권한이 있는지 여부를 확인합니다. 리턴은 boolean 타입입니다. 액세스가 있을 경우 true를 반환합니다.

var promise = document.hasStorageAccess();
promise.then(
  function (hasAccess) {
    // Boolean hasAccess says whether the document has access or not.
  },
  function (reason) {
    // Promise was rejected for some reason.
  }
);

만약 여기서 false를 반환한다면, 즉 액세스가 없다면 액세스를 요청해야합니다.
이 떄는 document.requestStorageAccess()를 사용해줍니다. 이 호출로 액세스가 허용된다면 사용자들은 정상적으로 기능을 사용할 수 있으며 만약 거부되는 경우에는 promise를 반환합니다.

  var promise = document.requestStorageAccess();
  promise.then(
    function () {
      // Storage access was granted.
    },
    function () {
      // Storage access was denied.
    }
  );

이 두가지를 활용해서 액세스를 확인하고 없다면 액세스를 요청하고 있다면 허가된 액세스로 브라우저를 리로드 합니다.

    let promise = document.hasStorageAccess(); // 액세스 확인
    promise
      .then((hasAccess) => {
      	// 액세스가 없다면
        if (!hasAccess) return document.requestStorageAccess();
      })
      .then(() => {
      	// 액세스가 있다면
        document
          .hasStorageAccess()
          .then((hasAccess) => {
            window.location.reload();
          })
          .catch((err) => {
          	// 에러 캐치
            console.log(err);
          });
      });

보안 정책을 위해 추가된 기능인 만큼 남용한다면 보안 상 문제가 생기겠지만 불가피한 경우 사용자 편의를 위해 사용하는 것도 좋을 것 같습니다!

+) 추가적인 정보 있으시면 댓글로 공유해주세요!