Webストレージに保管する情報

Webストレージの使用方法

最近のブラウザではCookieより高機能なストレージとして、Webストレージが使われています。
ただし使い方によってはセキュリティインシデント発生の可能性を孕んでいるため注意が必要です。

Cookie

• 期限の設定
  javascriptのexpiresで設定が可能

document.cookie = 'dummy'; 
expires=Mon, 30 Nove 2022 00:00:00 GMT';

• javascriptからのアクセス
  HttpOnly属性で制御可能

Webストレージ＿localStorage

• 期限の設定
  設定はできず、無期限に保存される

• javascriptからのアクセス
  常にアクセスが可能で、制御できない

Webストレージ＿sessionStorage

• 期限の設定
  設定はできず、タブを閉じるまで継続する

• javascriptからのアクセス
  常にアクセスが可能で、制御できない

保管に適した情報の種類

以上のように、Webストレージは任意の有効期限も設定できず、javascriptからのアクセスを制御することが出来ません。
XSS（クロスサイトスクリプティング）攻撃を受けた際は、情報を奪取されてしまうため保存する情報には注意を払う必要があります。

• Webストレージに保存してはならない情報
  • アクセストークン
  • パスワード
  • 個人情報

まとめ

XSSされる時点でより危険な情報が攻撃者に奪取されるのだから、別に気にする必要はない。といった意見もありますが個人的な意見としては、抑えられるリスクは少ないに越したことはないのでWebストレージには漏洩しても構わない情報しか入れない方が良いのではないかと考えています。
アクセストークン等を保存することでUXを高めるのは間違いないので、そういった情報はjavascriptからのアクセスを禁止できるCookieで保持することをお勧めします。