session storage

세션 스토리지를 이용하여 상태 관리하기

세션 스토리지를 이용하여 상태를 관리해야겠다고 생각을 한 이유는 다음과 같습니다.

전역 상태 관리가 필요하다고 생각하게 된 계기

로그인 -> 투표 참여를 한 후 -> 마이 페이지로 이동 -> 이 후 다시 투표 창으로 이동 -> 이 경우 사용자의 데이터는 

위의 시나리오와 같이 사용자가 개발자가 정해둔 시나리오에서 벗어났을 경우 어떻게 하면 다시 서버에 새로운 데이터를 전송하지 않고 사용자를 다시 기존의 데이터를 포함한 곳으로 이동 시킬 수 있을 지에 대한 고민으로 전역 상태가 필요하다고 생각 했습니다.

필요한 데이터

user : {
	roomId,
	role,
	nickname,
	isPlaceBet,
  placeBetAmount,
}

bettingPool {
  option1: {
    totalAmount,
    participants
  };
  option2: {
    totalAmount,
    participants
  };
}

하지만 세션 스토리지에 데이터는 보안에 취약하다

이러한 이유로 세션 스토리지를 사용하기 위해서는 데이터의 무결성을 검증하는 과정이 필요 했습니다.

window.addEventListener('storage', (e) => {
  if (e.storageArea === sessionStorage) {
    // 변경 감지
    const originalValue = getOriginalValue(e.key); // 서버나 안전한 곳에 저장된 원본값
    const currentValue = sessionStorage.getItem(e.key);
    
    if (originalValue !== currentValue) {
      handleTampering();
    }
  }
});

그래서 위와 같이 storage에서 값이 변경 되었을 경우 해당 값이 실제로 서버에서 전송되는 데이터와 일치하는 지를 확인하는 작업이 필요했고 일치 하지 않을 경우에는 해당 데이터를 폐기하거나 서버의 데이터로 업데이트 시켜줬어야 했습니다.

  const setSessionItem = async (key: string, value: string) => {
    try {
      const data = {
        value,
        timestamp: new Date().getTime(),
        checksum: await generateChecksum(value),
      };
      const encodedData = safeEncode(JSON.stringify(data));
      sessionStorage.setItem(key, encodedData);
    } catch (error) {
      console.error("Error setting session item:", error);
    }
  };

또한 사용자가 어떤 데이터인지 정확하게 알 수 없게 만들고 수정할 수 없게 만들기 위해서 세션 스토리지에 저장할 데이터를 암호화하고 난 후의 데이터를 실제 세션 스토리지에 저장하는 과정을 가져야 했다.

이러한 방법을 겪고 난 후 깨달은 단점

• 백엔드분들에게 API 요청을 하지 않고 서버와 연관이 있는 데이터를 관리한 다는 것은 너무 많은 관리를 필요로 한다.
• 세션 스토리지를 사용하기 위해서 너무

많은 작업을 하는 것 같고 이러한 데이터를 서버와의 데이터와 일치하게 하기 위해서는 결국 서버 통신이 필요하다는 점

이와 같은 상태 관리에 대한 멘토링 내용

• 위와 같이 세션을 관리하는 것은 나쁘지 않으나 너무 불필요한 작업들이 많이 일어난다는 단점이 있다.
• 악용이 될 만한 접근을 한 사용자의 경우 굳이 서버의 데이터를 확인해서 다시 복구 시키지 않고 페이지를 이용하지 못하게 막아도 되지 않을까?
• 이 단점이란 백엔드 개발자 분에게 위와 같이 전체 상태가 필요한 데이터들을 쿠키로 관리 할 수 있게 API요청을 할 경우 위와 같이 복잡한 로직을 수행하지 않아도 된다.
• 또한 신경 써서 전송하지 않아도 포함되어 전송되기 때문에 위와 같이 세션 스토리지에서 데이터를 꺼내고 복호화 해서 다시 전송하는 과정을 거치지 않아도 된다.
• 백엔드 개발자 분에게 요청하여 더 안전하고 쉬운 방법으로 상태를 관리할 수 있다면 주저하지 말고 백엔드 개발자 분에게 요청을 하자

서버와의 시간을 맞추는 일

우리 서비스는 서버와 함께 타이머를 돌리는 작업으로 인해서 시간의 타이밍을 맞출 일이 있었는데 이 부분에 대한 문제를 완벽하게 해결하지 못했다.