SessionStorageとLocalStorageとCookiesの理解について

未分類

本記事では、中々理解出来ていなかった、SessionStorageとLocalStorageとCookiesの違いについて色々調査したので、そのまとめと備忘録を残しておきます。

現在、frontendとbackendを別アプリで作成しており、今までは当たり前のようにLocalStorageに保存していましたが、LocalStorageは危険だとかCookiesがセキュアだとか色々とあるみたいなので、それぞれの違いについて調べてみました!

そもそも、どういう機能か?

そもそもこれらがどういう機能か改めてまとめてみます。これらは、webブラウザに情報を保存しておく機能で、ログイン情報などを保存しておく際などに使用されます。

ログインしたサイトを閉じて、次開いた時にログイン状態が維持されてる時がありますよね。これは、ログイン時にブラウザにログイン情報が保存されており、次回のリクエスト時にログイン情報をリクエストに載せてサーバーに送信することで、サーバー側でログインしているユーザーかを判別することができます。これこそstorage機能の核となる機能になります。

保管情報の確認方法

ちなみに、それぞれのデータの保管場所はデベロッパツール>ApplicationのStorageというところで確認することができます。

SessionStorageとLocalStorageとcookieの違い

それでは、SessionStorageとLocalStorageとcookieの違いについて解説します。

一般的に下記のサイトのような説明がされていると思われます。

【JavaScript】Cookie , localStorage, sessionStorageの違い - Qiita
はじめにブラウザで保存出来る情報、以下3点の違いについて簡単にまとめました。CookielocalStoragesessionStorage環境OS: macOS Catalina 10…

大きく分けると、LocalStorageとSessionStorage(webストレージと呼ばれるもの)とCookieとで分かれます。

まずLocalStorageとSessionStorageの違いについて

LocalStorageとSessionStorageは保存方法は同じjavascriptで、保存期間と保存部分が限定的になります。

  • SessionStorageはタブを閉じたらstorageが消える。LocalStorageは消えない。
  • SessionStorageは同じタブ内ではstorageが共有できない。LocalStorageは同じブラウザ内であればどのタブでもstorageが使用できる。

まとめると、LocalStorageはデータに永続性があるが、SessionStorageでは、storageが使えるのはサイトをその画面で操作しているときだけというイメージです。

ということで、SessionStorageではタブを消したらまたログインし直さなければいけなくなります。ただし、毎回セッションデータが作り替えられるため、LocalStorageよりはセキュアであるといえます。

SessionStorageもLocalStorageもwebブラウザにはjavascriptを使用指定保存されます。よってjavascriptを使用したサイバー攻撃(XSS)を受ける可能性があります。

以上より、webStorageを利用するのは多少、セキュリティに問題があります。そこで、よりセキュアなのがCookieになります。Cookieでは「http only属性」を付与することができ、javascriptからアクセスできないようにすることができ、XSS攻撃を受けるリスクを減らすことができます。

webStorageとCookieのまとめ

以上、webStorageとCookieの違いについてまとめました。

webStorageを使用するよりCookieを利用する方がXSS攻撃を受けるリスクを減らすことができ、よりセキュアであることが分かりました。

今まで、バックエンドからの情報はLocalStorageで保存していましたが、セキュリティを向上させるため、今後はCookieでの実装を挑戦してみようと思います!

コメント

タイトルとURLをコピーしました