Indexed DB & 프론트엔드 (ts)

Indexed DB의 경우 기존의 Local Storage, Session Storage와 같은 Web storage와 비슷하지만 저장해야 하는 데이터의 양이 커질 때는 IndexedDB를 사용한다. 

내가 만든 프론트의 경우 메타마스크 기반의 서명 + 세션 스토리지를 사용한 JWT발급 관리를 했었는데

내가 새로 인수받는 코드의 경우에는 JWT관리에 있어서 IndexedDB라는 것을 사용하고 있었다.

IndexedDB 란?

웹 표준 인터페이스의 하나로 색인이 포함된 JSON 객체가 모여있는 트랜잭셔널 로컬 데이터베이스이며, 이를 이용해 웹사이트는 데이터베이스에서 영속적인 데이터를 모아서 저장한다. Index dbsms Transaction Model을 따르기 때문에 모든 변경은 Transaction안에서 일어나며 문제가 생기면 모든 변경사항을 폐기하고 이전 상태로 돌아간다. Indexed DB 데이터는 영속적이지만 특정 상황에 따라 삭제도 가능하다.

IndexedDB 사용법

import { openDB } from "idb";

위와 같이 패키지를 받아서 사용이 가능하며,

최초로 설정할 때 openDB명령어를 통해서  DB의 이름과 Version을 넣어주어야 한다.

DB = await openDB(DB_NAME, VERSION, {
    upgrade(db

 

db를 최초로 오픈한 후에는 upgrade 명령어를 사용하여서 최초 세팅을 해준다.

    /**
     * Called if this version of the database has never been opened before. Use it to specify the
     * schema for the database.
     *
     * @param database A database instance that you can use to add/remove stores and indexes.
     * @param oldVersion Last version of the database opened by the user.
     * @param newVersion Whatever new version you provided.
     * @param transaction The transaction for this upgrade.
     * This is useful if you need to get data from other stores as part of a migration.
     * @param event The event object for the associated 'upgradeneeded' event.
     */
    upgrade?

최초세팅시에는 createObjectStore를 통해 데이터를 담는 공간을 설정해주는데. keypath를 설정하여 내부 key를 설정시켜줄 수도 잇다.

db.createObjectStore(store.NAMEOFSTORE, {
    keyPath: store.ID_PATH_OF_STORE,
});

해당 명령어로 미리 정의해둔 Object Storage를 생성할 수 있다. Object Storage는 키 벨류값으로 저장되며 해당 내용이 테이블의 양식처럼 작용하여 해당 형태의 데이터가 indexed db에 저장이 되게 된다.

이후 생성한 DB객체를 함수로 initDB()로 정의하고 아래와 같이 트랜잭션으로 상호작용을 하면 indexed DB상의 데이터를 저장하거나 업데이트, 삭제 할 수 있다.

await initDB();
const tx = DB.transaction(storeName, "readonly");
const allItems = await tx.store.getAll();
await tx.done;
return allItems;

 

JWT & Indexed DB

https://community.auth0.com/t/should-i-store-jwt-tokens-in-indexeddb/63100/3

Should I store JWT tokens in IndexedDB?

해당 조합은 사실 세션 스토리지 조합과 동일한 보안수준을 가진다고 한다. XSS 공격이라는 크로스 사이트 스크립팅 공격은 브라우저의 정보값을 탈취할 수 있기 때문에 해당 부분을 유의해야 한다. 나는 애초에 ALB와 보안그룹으로 접근이 막힌 백오피스였기 때문에 해당 부분은 패스하였다.

https://jopemachine.github.io/2021/10/07/Cookie-Session-Local-Storage-Session-Storage-Jwt/

Cookie, Session, Web Storage, JWT, IndexedDB - jopemachine. dev blog

https://pks2974.medium.com/indexeddb-%EA%B0%84%EB%8B%A8-%EC%A0%95%EB%A6%AC%ED%95%98%EA%B8%B0-ca9be4add614

IndexedDB 간단 정리하기