Cross-Session Contamination

localStorage 및 sessionStorage 사이의 값을 이동하면 모르는 사이에 민감한 정보가 노출될 수 있습니다.

HTML5는 개발자가 프로그램 값을 유지할 수 있도록 localStorage 및 sessionStorage 맵을 제공합니다. sessionStorage 맵은 페이지를 호출하기 위한 저장소를 제공하며 페이지 인스턴스 및 즉각적인 브라우저 세션 동안에만 지속됩니다. 그러나, localStorage 맵은 여러 페이지 인스턴스 및 브라우저 인스턴스에 대해 액세스할 수 있는 저장소를 제공합니다. 이 기능을 통해 응용 프로그램은 여러 브라우저 탭 또는 창에서 동일한 정보를 유지하고 활용할 수 있습니다.

예를 들어, 개발자는 사용자 원래의 검색 조건을 유지하는 동시에, 사용자가 여러 탭을 열어 숙박 시설을 비교할 수 있게 하는 여행 응용 프로그램에서 여러 브라우저 탭 또는 인스턴스를 활용하고자 할 수 있습니다. 기존의 HTTP 저장 시나리오에서 사용자는 한 탭에서 구매 및 의사 결정에 대한 위험이 있었으며(세션 또는 쿠키에 저장됨) 이 위험은 다른 탭에서의 구매를 방해했습니다.

여러 브라우저 탭에서 사용자 값을 활용할 수 있는 기능을 사용할 경우, 개발자는 sessionStorage 범위에서 localStorage 또는 그 반대로 민감한 정보를 이동시키지 않도록 주의해야 합니다.

예제: 다음 예제에서는 세션에 신용 카드 CCV 정보를 저장하여 구입 시 사이트에서 파일에 있는 카드로 요금을 청구하도록 사용자가 이미 허가했음을 나타냅니다. 브라우저 탭의 컨텍스트 내에서 구입할 때마다 신용 카드 승인이 필요합니다. CCV가 다시 입력되는 것을 방지하기 위해 정보가 sessionStorage 개체에 저장됩니다. 그러나, 개발자도 localStorage 개체 내에 정보를 저장합니다.

...
try {
    sessionStorage.setItem("userCCV", currentCCV);
} catch (e) {
    if (e == QUOTA_EXCEEDED_ERR) {
        alert('Quota exceeded.');
    }
    }

    ...
    ...

    var retrieveObject = sessionStorage.getItem("userCCV");
try {
     localStorage.setItem("userCCV",retrieveObject);
} catch (e) {
     if (e == QUOTA_EXCEEDED_ERR) {
        alert('Quota exceeded.');
	}
     ...

     var userCCV = localStorage.getItem("userCCV");
...
}
...

CCV 정보를 localStorage 개체로 되돌려 놓으면, 이제 CCV 정보는 다른 브라우저 탭에서 이용할 수 있으며 브라우저의 새 호출 시에도 이용 가능합니다. 그러면 의도한 워크플로우에 대한 응용 프로그램 로직은 무시됩니다.