사파리 브라우저 쿠키(Cookie) 이슈

쿠키란?

쿠키, 스토리지 비교

 

 

쿠키 사용의 예시

/**
 * 쿠키 세팅
 * @param {string} value 쿠키 저장할 name
 * @param {string | number} days 쿠키 저장 날짜
 * @example
 * this._setCookie('레이어팝업123', 7);
 */
_setCookie(value, days){
  const date = new Date();

  date.setDate(date.getDate() + Number(days));
  document.cookie = this.uniqueName + "=" + escape(value) + "; path=/; expires=" + date.toUTCString() + ";"
}

/**
 * 저장한 쿠키 가져오기
 * @param {string} name 쿠키 이름 
 * @return 쿠키 값
 * @throws 쿠키 값이 없으면 null 리턴
 * @example
 * this._getCookie('레이어팝업123')
 */
_getCookie(name){
  const value = document.cookie.match('(^|;) ?' + name + '=([^;]*)(;|$)');
  return value ? value[2] : null;
}

 

 

평소와 같이 쿠키로 '-일동안 보지않기' 기능을 구현하다가

사파리 브라우저에서 적용이 되지 않는 점을 알게되어 조사해본 결과를 공유합니다.

 

(저는 '30일 동안 보지않기', '앞으로 보지않기' 기능을 구현하였는데, 7일 뒤까지만 만료일 지정이 되길래 당황했습니다.)

 

 

2019년 3월 apple 사파리 브라우저의 쿠키 정책이 변경되었습니다.

변경 사항은...

개인정보, 보안 및 성능의 이슈로 [인증서 없이 저장하는 클라이언트 측 쿠키의 최대 값을 7일로 제한한다..입니다.

 

[보안 및 성능 이슈]

• 클라이언트 쿠키로 저장한 정보는 도난의 위험이 있다고합니다.

• XSS(Cross-site Scriptiong) 공격에 취약합니다.

• 쿠키의 증가는 페이지의 성능 저하에도 영향이 있다고 합니다. 

• 쿠키는 저장되는 정보가 불확실함의 정도가 높아 효율적인 압축할 수 없다고 합니다.

• 쿠키는 브라우저 요청이 있을 경우 Request Header에 넣어서 자동으로 서버에 전송합니다. 

• 쿠키는 최대 저장되는 값이 정해져있기 때문에 (클라이언트 300개, 도메인당 20개) 트래커가 많은 쿠키를 추가하게 될 경우 해당 사이트의 쿠키를 밀어낼 수 있다고합니다.

• 중요한 정보는 http응답으로 인증 쿠키를 설정하고 보안 및 httpOnly로 표시해야한다고 합니다. 

• document.cookie는 httpOnly가 될 수 없다고 합니다.

 

[정리]

• 클라이언트 측 쿠키는 document.cookie를 통해 생성하는 쿠키이며 이 쿠키만 영향이 있습니다.

• context, iframe에서 생성된 쿠키도 포함된다고 합니다.

• 세션쿠키는 만료기간이 없으므로 영향을 받지 않습니다. (브라우저 종료 시 정보 손실) 

• 최대가 7일이고 최대를 넘기지 않는다면 설정된 기간 값으로 유지됩니다.

 

보통 쿠키를 사용할 때에는 보안상 로그인과 같이 중요한 정보를 저장하는데 사용하지 않으며

스토리지와 다르게 서버 공간없이도 사용이 가능했기 때문에 '하루동안 보지않기' 기능같은 곳에서는 대중적으로 사용하고 있었습니다.

 

하지만 앞으로는 사파리 브라우저에 대한 크로스브라우징과 함께 7일 이후는 어떻게 개발을 해야할 지 고려해야할 것 같습니다.

 

참고 :  https://webkit.org/blog/8613/intelligent-tracking-prevention-2-1/