브라우저 저장소란?

클라이언트 측에서 데이터를 저장하고 관리하는 방식
서버와 통신이 없어도 데이터 유지
DombasedXSS에 사용됨

종류

Local Storage

정의

브라우저에 로컬로 데이터를 저장하는 방식
데이터는 브라우저를 닫아도 재부팅해도 유지

사용법

//저장
localStorage.setItem('key','value');

//조회
let a = localStorage.getItem('key');

//console로 확인
console.log(a);

//DOM에 삽입
document.getElementById('dataDisplay').innerHTML = a;

DOMbasedXSS 취약점이 존재할 때 적용

localstorage저장

//저장
'localStorage.setItem('data','<script>alert("XSS")</script>');

조회 과정을 안해도 되는 이유는 이미 innerHTML이 적용되고 있기 때문이다.

//조회
let a = localStorage.getItem('key');

//DOM에 삽입 
document.getElementById('dataDisplay').innerHTML = a;

Session Storage

현재 세션에서만 데이터를 저장
브라우저를 탭이나 창을 닫으면 데이터를 삭제

사용법

//저장
sessionStorage.setItem('key','value');

//조회
let a = sessionStorage.getItem('key');

//console로 확인
console.log(a);

////DOM에 삽입 
document.getElementById('dataDisplay').innerHTML = a;

DOMbasedXSS 취약점이 존재할 때 적용

session 저장

'sessionStorage.setItem('data','<script>alert("XSS")</script>');

조회 과정을 안해도 되는 이유는 이미 innerHTML이 적용되고 있기 때문이다.

//조회
let a = sessionStorage.getItem('key');

//DOM에 삽입 
document.getElementById('dataDisplay').innerHTML = a;

Cookie Storage

서버와 클라이언트 간의 상태 정보를 저장
만료시간 설정가능

사용법

쿠키 저장

document.cookie = "data=Hello";

조회 과정

    <script>
        // 쿠키 설정(쿠기 저장)
        document.cookie = "data=Hello";

        // 쿠키 값을 읽어오는 함수
        function getCookie(name) {
            let value = "; " + document.cookie;
            let parts = value.split("; " + name + "=");
            if (parts.length === 2) return parts.pop().split(";").shift();
        }

        // 'data' 쿠키의 값을 읽어옴
        let data = getCookie('data');
        console.log(data); // 출력: Hello

        // 쿠키 값을 DOM에 삽입 
        document.getElementById('output').innerHTML = data;
    </script>

DOMbasedXSS 취약점이 존재할 때 적용

쿠키 저장

document.cookie = "data=<script>alert('XSS')</script>";

조회 과정

    <script>
        // 쿠키 설정(쿠기 저장)
        document.cookie = "data=<script>alert('XSS')</script>";

        // 쿠키 값을 읽어오는 함수
        function getCookie(name) {
            let value = "; " + document.cookie;
            let parts = value.split("; " + name + "=");
            if (parts.length === 2) return parts.pop().split(";").shift();
        }

        // 'data' 쿠키의 값을 읽어옴
        let data = getCookie('data');
        console.log(data); // 출력: <script>alert('XSS')</script>

        // 쿠키 값을 DOM에 삽입 
        document.getElementById('output').innerHTML = data;
    </script>