2019-09-06この記事は約7分で読めます。こんばんわ、hisayukiです。直近のやり取りでCookieの話が出てなかなか面白かったので、CookieとWebStorageについて改めてまとめる事にしました。仕組み的にも使い方も割と単純ですが、その分計画的なご利用が必要な仕組みです。僕自身、ちゃんと調べたことなかったのですが通信プロトコルになるんですね💦またはそのプロトコルで通信される情報もこれにあたるとのこと。データの一時保存や送信等を行うのでStorageの一種かと思ってました。用途は上記に書いたとおり、データの一時保管、記憶、そのデータをServerと通信するために使われます。発行元はアクセス先のWebServerがほとんどです。場合によっては、アクセス先の広告を発行しているServerの場合もあります。使われるのはこの値で、ユーザ情報やアクセス回数、訪問回数やブラウザ情報など各端末に記録しておいて、次のアクセスでServerが受け取ることで本人特定が出来るような情報を埋めることが多い。Cookieが発行されるドメイン特定のドメイン下でのみ発行する場合に指定。Cookieが発行されるパス。特定のパス下のみでCookieを発行する場合に指定。HTTP経由でのみアクセスできるようにするための設定。JSなどでの利用を制限する。ドメインを跨いだRequest時の情報自動送信を制御する。Strictは一切送らない、LaxはGETは許すけどPOSTは制御、NONEは制御なし。Cookieがあります。違いは発行元になります。Cookie実際に訪れたドメインのサイトが発行しているCookieになります。ユーザーにブロックされにくいという特徴があります。Cookieに比べてユーザーをトラッキングしやすいです。該当ドメインからの発行のみとなるので、サイトを横断したCookieの付与はできません。Cookie訪れているサイト以外のドメインから発行されているCookieになります。サイトドメインにかかわらずに付与できるので、横断的な対応が可能です。具体的には、バナー広告やリスティング広告等になります。Cookieとなります。Cookieと違いサイトを横断したCookieの付与が可能ですが、近年は訪れてるサイトのドメイン以外からのCookieをブロックするブラウザが増えているため、効果測定の面で精度が低くなって来ています。有効期限これ結構大事で設定しなきゃセッション切れたタイミングで消えてしまいます。自動削除は事故に繋がる確率は減りますが、設定するならどのくらい持ちづつけるかをセキュリティとユーザビリティとの兼ね合いで考えましょう。無期限に設定することはできないので、Cookieを長く有効にしたい場合は数年単位で有効期間を設定できます。WebStorageとは?WebStorageはクライアントからアクセスできるデータベースのような役割をします。javascriptを用いてクライアント側にデータを保存、取得、削除が行えます。JavascriptのみCookieと違い、Serverへ値を勝手に送信しないことと容量が圧倒的に大きいです。Serverへ値を飛ばしたい時はPOSTで送ったり、リクエストヘッダの項目に埋め込むことで可能です。WebStorageはLocalStorageとSessionStoragの2種類あります。違いはLocalStorageだと保存期間が半永久的に消えずでSessionStorageだとタブやブラウザを閉じた時点で消されるという点です。SessionStorageは消し忘れても勝手に消してくれますが、LocalStorageだと意図的に消さないとブラウザに残ってしまいます。Cookieのように有効期限も設けられません。極端なことを言えば、一度訪れただけでそれ以降訪れないサービスだった場合はLocalStorageに何かを残すと消すタイミングがなくなることもあります。WebStorageは良くも悪くもJavaScriptによる意図的な操作でデータを残せるので、JavaScriptが発火するタイミングが無ければ追加も削除も出来ないことに注意しましょう。Cookie利用の有効・無効はクライアント側で設定します。システム側は決して、ブラウザ側が無効にしてるCookieの設定を有効にする事は出来ません。一度登録されるとリクエスヘッダにCookieという項目で送信されるようになります。対象ドメインの制御やそもそも値を消すことは出来ますが、送信を止めることは出来ません。Cookieによって個人が特定され、その行動はトラッキングできるようになりました。そのおかげで広告のターゲティングやリターゲティングができているのですが、これって行動監視されてる状態です。プライバシー保護の観点で問題視されます。EU圏ではこのことが問題視され、GDPR(EU一般データ保護規則)というCookieを個人情報として取り扱い、勝手に取得してはいけないという法律まで制定されました。ユーザーに向けての試みとしては、プライバシーポリシーでCookieについて触れる、不必要に長期間のCookie保存を行わない等の対策が考えられます。長期間有効にしたい場合は数年単位で有効期間を設定できますが、あまりおすすめされません。漏れないようににするのではなく、漏れても大丈夫な設計をしましょう。平文のパスワードやログインIDとか入れてたらCookieでもWebStorageでも危険。これが暗号化されたパスワードなら少しましになります。IDとパスワードを合わせた文字列をバイナリデータに変えたら更に危険度は減ります。加えてログイン時にだけその文字列を送り、以降サイト内ではログイン時にServerから発行されるログインセッションのみ持っていればいいようにすれば更に安全性が増します。すれば、Server側のログインセッションとクライアント側のログインセッションが一致していればログイン済みとかに出来ます。これに加えて期限を1週間とかにしちゃうとか、クライアント側で漏れたらServer側のログインセッション消しちゃえばいいのでシステム側で状態制御が出来ます。必要なのは違いを理解して用途を変えることです。基本設定がなければ無条件で自動通信してしまう事を考慮して、大丈夫なデータだけCookieに入れておけばいいですし、不安なものは期限付きにしたり時間で無効になる情報にしたり、SessionStoragに入れればいいですね。まとめまぁ、どれを使うにしても設計段階で何をやりたいかによります。ステートフルにするためにCookie使っとけって頭は思考停止だと思います。本当にCookieである必要ある?SessionStorageでも実装できるんじゃね?ってところは考慮が必要かなと。個人的には一番セキュアなのはSessionStorageでCookieよりはLocalStorageのがセキュアかなぁって気がします。前項でも書きましたがそもそも保持するデータ次第です。LocalStorageだけはどう頑張ってもシステム側から消せなくなる可能性を考慮しなければならないのでご利用は計画的に。今日はさらっと勉強会のフィードバックを書こうと思います。いつもお世話になっている鈴木さん主催の、RailsとLaravelの違いを初学者向けに伝える勉強会に...技術ネタconcrete5のローカル環境を立ち上げるhisayukiです。久しぶりにconcrete5を触ってローカル環境を作ったので残しておきます。今使ってるconcrete5で作られたアプリケーションを刷新することになったので、環境まるごと新しくすることにしました。...技術ネタ敗北者のTypeScriptを見てこんばんわ、hisayukiです。先日、Qiitaで非常に良記事を見つけました。コメントをキャンセルメールアドレスが公開されることはありません。