Help us understand the problem. What is going on with this article?

Webアプリにおける値を画面遷移間で持ち回る手段集

はじめに

画面遷移をする際にデータを持ち回る手段にはいくつか手段がありますが、
一度それらを纏めてみたくなったのでメモしてみます。
編集リクエスト大歓迎です!

GET

// 一つのパラメータを送信する
https://hogehoge.test?sample1=123
// 複数のパラメータを送信する
https://hogehoge.test?sample1=123&sample2=456
// 配列のパラメータを送信する
https://hogehoge.test?array[]=123&array[]=456
// 連想配列のパラメータを送信する
https://hogehoge.test?array[key][]=123&array[key][]=456

送信するデータがURLに表示されます。

POST

https://hogehoge.test
HttpRequestBody
sample1: 123
sample2: ["John", "Pete", "Bob"]
sample3: {key, "value"}

送信するデータがURLに表示されません。
HttpRequestのBodyに「key, value」の組み合わせで格納されます。

GETとPOSTの使い分け

GETは検索・ソート条件等見えても構わない、寧ろ何の条件を渡しているのか明示的にしたい場合に使用します。
ログイン機能や登録・更新機能には適しません。

POSTは第三者の見知らぬ他人が盗み見たら不味いようなデータ送信時に使用します。
パスワード入力欄では「●●●」とマスキングしていたのでURLに表示されてしまったら意味がないですね。。
ログイン機能や登録・更新機能に適します。
※POSTデータはhttps等で暗号化していないと、リクエスト/レスポンスのパケットの中身を解析すれば簡単に確認できてしまうので要注意です。

Session

サーバ側のSessionの領域にデータを保存しておき、CookieのSession IDと紐づくデータを参照することができます。
「key, value」の組み合わせで格納されます。

ログイン後取得したユーザ情報、検索結果リスト等ログアウトするまでの間に保持しておきたい情報を格納するのに適しています。
Sessionが切断されてしまうと、保持していたデータは参照不可→消失してしまうので、永続化したいデータはDBやファイルに格納する必要があります。

大抵のWeb系言語でサポートされていますが、
ピュアでSessionを取り扱うのはセキュリティ面で考慮すべき点が多数あり面倒です。
その点、フレームワークを採用しているならば、優れたSession用のライブラリが入っているのでそれらを採用すべきです。
ただし、
・Sessionのタイムアウト設定
・Session IDが記述されているCookieの名前変更
等追加で設定しておくべきポイントはあるので抑えておくべきです。

また、好き勝手にSessionにデータを保存しておくと、エコではないので使用しなくなったデータは直ぐに削除すべきです。

Cookie/localStorage/sessionStorage

ブラウザの標準機能で、
Sessionがデータをサーバに保存するのに対して、
Cookie/localStorage/sessionStorageはクライアント側にデータを保存します。
「key, value」の組み合わせで格納されます。
フロント側で画面の状態を保持したい場合等に適しています。

また、Cookie/localStorage/sessionStorageの違いは以下の通りです。

ストレージのサイズ
Cookie→4KB
localStorage→5MB
sessionStorage→5MB

有効期限
Cookie→設定による
localStorage→消さない限り永続的
sessionStorage→Windowかタブを閉じると消える

アクセス権限
Cookie→クライアントとサーバどちらからもアクセス可能
localStorage→クライアントからアクセス可能
sessionStorage→クライアントからアクセス可能

各種ブラウザの設定画面から値を確認できてしまいますので、クレジットカード情報等大事な情報はなるべく保存しないようにすべきです。
特にCookieはサーバからもアクセスできてしまいます!!
どうしても大事な情報を扱う必要がある場合は適時暗号化が不可欠となります。
参考サイト

最後に

保存しているデータの見える範囲とセキュリティを意識して使いまわしていきたいですね。

yuta-matsumoto
どうも、初めまして。 インターノウス株式会社という会社で自社開発に携わっている者です。 今までGoogle先生に助けてもらってきたばかりなので、少しばかり役に立ちたいと思っています。 よろしくお願いします。 何かありましたらこちらにご一報ください。 y.matsumoto@internous.co.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away