Cookie Error in Safari due to encoding

쇼핑몰의 웹페이지 완성 후 크로스브라우저를 확인하던 중 사파리에서 다음과 같은 에러가 발생했다.

 

 

해당 에러가 발생한 기능의 서비스는 다음과 같다.


1. 비회원 접속

2. 상품 선택 후 장바구니 담기 선택

3.해당 상품에 대한 정보를 로컬에 저장(서버저장X)

4-1. 장바구니 페이지 접속 시 로컬에 저장되어 있던 데이터 로드

4-2. 로그인 시 비회원 접속 상태에서 저장한 데이터를 서버를 회원의 장바구니 데이터에 추가


 

Chrome에서는 정상적으로 동작하던 기능이 Safari에서는 에러를 발생시켰다.

해당 플로우 중 4-1에서 로컬에 저장된 데이터를 로드할 때 에러가 발생한 것이다.

이를 확인하기 위해 Safari와 Chrome에 저장된 데이터를 확인해보았다.

 

[Safari의 Cookie에 저장된 값]

 

[Chrome의 Cookie에 저장된 값]

 

정상적으로 동작하는  Chrome과 에러를 일으키는  Safari의 Cookie에 저장된 값을 비교해보니, Safari에서는 product_name 이후의 부분이 잘려있었다. 해당 product_name은 한글로 작성된 값을 저장하지 못해 발생하는 이슈였다.

(Chrome에서는 비정상적인 형태의 언어로 보여지지만, 데이터를 갖고와 다시 사용되는 과정에서 원래의 한글명으로 표기되었다.)

 

해당 이슈를 해소하기 위해 Cookie에 데이터 저장/읽을 때, encodeURI/decodeURI를  사용해주었다.

그랬더니 아래와 같이 encoding된 값이 Cookie에 저장되었고, deconding한 값을 정상적으로 사용할 수 있었다.

%7B%22'222:75:1'%22:%7B%22product_id%22:222,%22option_id%22:75,%22is_individual_delivery%22:false,%22thumbnail%22:%222016/12/01/222_shop1_357073.jpg%22,%22product_name%22:%22%EB%93%9C%EB%9D%BC%EC%9D%B4%EB%AF%B8%ED%81%AC%EB%A0%88%EC%9D%B4%EC%A7%80%20%EA%B0%90%EA%B7%A4%EB%A7%90%EB%9E%AD%EC%9D%B4%22,%22option_name%22:%22%EA%B8%B0%EB%B3%B8%22,%22total_price%22:2900,%22quantity%22:1,%22is_sell%22:true,%22min_order_limit%22:1,%22max_order_limit%22:0,%22order_unit%22:1%7D%7D

 

Cookie의 저장과 불러오기를 위해 사용한, encodeURI와 decodeURI를 추가한 함수는 아래와 같다.

 

Leave a Reply

Your email address will not be published. Required fields are marked *