JS ] HTML 5 : Cookie의 한계점 보안을 위한 Web storage

Javascript

JS ] HTML 5 : Cookie의 한계점 보안을 위한 Web storage

여유로운 집순이 2021. 12. 22. 23:03

HTTP 프로토콜의 특징

기본적으로 HTTP 프로토콜은 클라이언트가 요청을 한 후, 응답을 받으면 그 연결을 끊어 버리는 특징을 가집니다.(connectionless).

그리고 통신이 끝나면 상태를 유지하지 않는 특징도 가지고 있습니다.(stateless).

이런 특징 때문에 웹페이지에서 페이지를 이동하면 로그인 정보가 사라지는 일 등이 발생하기 때문에

브라우저에 인증 정보를 저장해 놓는 등, 브라우저와 서버간 통신에 필요한 정보를 저장해 놓을 공간이 필요하게 되었습니다.

쿠키(cookie)

1) 쿠키의 용도와 특징

쿠키는 본래 서버 측 스크립트에 의해 저장되는 작은 크기의 데이터를 보관하기 위한 의도로 설계되었습니다.

>>> 쿠키 생성

HTTP 요청을 수신할 때, 서버는 응답과 함께 Set-Cookie 속성을 넣어 헤더를 전송할 수 있습니다.

아래의 서버 헤더는 클라이언트에게 쿠키를 저장하라고 전달합니다.

만료일 혹은 지속시간도 명시될 수 있고, 만료된 쿠키는 더이상 보내지지 않습니다.

HTTP/1.0 200 OK
Content-type: text/html
Set-Cookie: yummy_cookie=choco
Set-Cookie: tasty_cookie=strawberry Expires=Wed, 21 Oct 2019 07:28:00 GMT;

[page content]

전송된 쿠키는 보통 브라우저에 의해 저장되며, 사용자가 따로 요청하지 않아도 서버로 전송되는 모든 요청에 브라우저는 Cookie 헤더를 사용하여 이전에 저장했던 모든 쿠키들을 회신할 것입니다.

GET /sample_page.html HTTP/1.1
Host: www.example.org
Cookie: yummy_cookie=choco; tasty_cookie=strawberry

>>> 쿠키의 스코프

Domain 과 Path 속성으로 정의 합니다.

Domain 속성이 명시되면 해당 쿠키는 서브 도메인에도 포함되고, 명시되지 않을 경우에는 현재 문서 위치의 호스트 일부를 기본 값으로 합니다.

Domain=mozilla.org

// 쿠키가 포함되는 서브도메인의 예
// - developer.mozilla.org
// - m.mozilla.org

Path 속성이 명시되면 해당 쿠키는 명시된 path가 포함된 서브 디렉토리에 포함됩니다.

Path=/docs

// 서브디렉토리 예시
// /docs
// /docs/Web/
// /docs/Web/HTTP

>>> 쿠키의 라이프타임

Expires(명시된 날짜) 또는 Max-Age(명시된 기간) 속성으로 정의합니다.

해당 속성을 정의하지 않은 쿠키는 세션 쿠키로 간주되어 브라우저가 닫힐때 브라우저에 의해 삭제 됩니다.

Expires나 Max-Age 속성이 있는 쿠키는 브라우저를 닫아도 삭제되지 않고, 명시된 날짜나 시간에 삭제 됩니다.

2) 쿠키의 한계점

위와같이 보내지는 쿠키들의 이름과 값은 일반적으로 4KB의 크기로 제한하고 있어 작은 단위의 데이터를 주고 받을 수 있습니다.

그리고, 관련 URL(Uniform Resource Locator) 이 요청될 때마다 함께 전송되기 때문에 성능이 떨어지는 원인이 될 수 있습니다.

보안적으로도 문제가 있는데, 이는 아래의 블로그에 설명이 잘되어 있습니다.

https://velog.io/@alang/XSS-%EA%B3%B5%EA%B2%A9%EA%B3%BC-%EC%BF%A0%ED%82%A4%EC%9D%98-HttpOnly

XSS 공격과 쿠키의 HttpOnly

서버 측에서 제공되는 Script가 아닌 권한이 없는 사용자(이하 해커)가 웹사이트에 Script를 삽입하여 의도치 않은 동작을 일으키는 공격주로 JavaScript로 작성된 Script를 통해 공격이 가해진다.XSS 방

velog.io

Web Storage

쿠키의 한계점을 보안하기 위해 HTML5에서 제공하는 기능으로 로컬 스토리지(local Storage)와 세션 스토리지(session Storage)가 있습니다.

1) 쿠키와 다른점

쿠키와 다르게 웹 스토리지 객체는 네트워크 요청 시 서버로 전송되지 않습니다. 이런 특징 때문에 쿠키보다 더 많은 자료를 보관할 수 있습니다. 대부분의 브라우저가 최소 2MB 혹은 그 이상의 웹 스토리지 객체를 저장할 수 있도록 해줍니다. 또한 개발자는 브라우저 내 웹 스토리지 구성 방식을 설정할 수 있습니다.
쿠키와 또 다른 점은 서버가 HTTP 헤더를 통해 스토리지 객체를 조작할 수 없다는 것입니다. 웹 스토리지 객체 조작은 모두 자바스크립트 내에서 수행됩니다.
웹 스토리지 객체는 도메인·프로토콜·포트로 정의되는 오리진(origin)에 묶여있습니다. 따라서 프로토콜과 서브 도메인이 다르면 데이터에 접근할 수 없습니다.

2) 로컬 스토리지 & 세션 스토리지

로컬 스토리지와 세션 스토리지는 데이터를 얼마나 오래 보관할지 결정하는 생명주기와 접근 가능 대상을 지정하는 범위에 차이가 있습니다.

>>> 로컬스토리지와 세션스토리지의 생성

두 스토리지 객체는 동일한 메서드와 프로퍼티를 제공합니다.

setItem(key, value) – 키-값 쌍을 보관합니다.
getItem(key) – 키에 해당하는 값을 받아옵니다.
removeItem(key) – 키와 해당 값을 삭제합니다.
clear() – 모든 것을 삭제합니다.
key(index) – 인덱스(index)에 해당하는 키를 받아옵니다.
length – 저장된 항목의 개수를 얻습니다.

>>> 로컬 스토리지의 스코프

오리진(protocol/domain/port)만 같다면 url 경로는 달라도 동일한 결과를 볼 수 있습니다.

같은 브라우저의 모든 창과 모든 탭을 통해 데이터가 공유됩니다.

// 오리진 예제
// 프로토콜: http, 도메인: www.example.com, 포트: 8080
http://www.example.com:8080  

https://www.example.com:8080  // 프로토콜 다름
http://m.example.com:8080  // 도메인 다름
http://www.example.com:3000  // 포트 다름

>>> 세션 스토리지의 스코프

현재 떠 있는 탭 내에서만 유지됩니다. 같은 페이지라도 다른 탭에 있으면 다른 곳에 저장됩니다.

하나의 탭에 여러 개의 iframe이 있는 경우엔 동일한 오리진에서 왔다고 취급됩니다.

>>> 로컬 스토리지의 라이프타임

브라우저를 껐다 켜도 남아있고, 삭제하기 전에는 데이터가 사라지지 않습니다.

>>> 세션 스토리지의 라이프타임

해당 탭을 닫으면 데이터가 사라집니다. 페이지를 새로고침할 때는 사라지지 않습니다.

저작자표시 (새창열림)