🍪 Web API・Cookie観察室

← トップに戻る
Request / Response / Browser Storage

ブラウザとサーバーは、何を話している？

自サイトの実験APIへリクエストを送り、メソッド・ヘッダー・本文・Cookieがサーバーからどう見えるか観察できます。

ブラウザHTTP Request →Flask API← JSON Responseブラウザ

1. APIへ文字を送ってみる

下の文字を、2通りの方法でサーバーへ送れます。まずはどちらかのボタンを押すだけで大丈夫です。

GETURLの末尾に情報を付けて「これを見せて」と頼む方法。検索やページ取得でよく使います。
POSTリクエストの本文に情報を入れて渡す方法。フォーム送信や新規登録でよく使います。
まだ送信していません。
詳しいリクエストを自分で作る（上級者向け）

2. サーバーにはこう見えた

左のボタンを押すと、
サーバーが受け取った内容を項目別に表示します。

3. CookieとWeb Storageを比べる

Cookie期限を設定でき、同じサイトへのHTTPリクエストに自動で添付されます。容量は小さめです。
localStorageブラウザ内へ保存され、消すまで残ります。HTTPには自動送信されません。
sessionStorageこのタブの間だけ残ります。別タブとは共有されず、HTTPにも送信されません。

document.cookieから見えるもの

JavaScriptで読めるCookie。HttpOnlyはここには現れません。

localStorage

同じオリジンで共有され、ブラウザを閉じても残ります。

sessionStorage

このタブ内だけで利用でき、タブを閉じると消えます。

サーバーへ自動送信されたCookie

CookieだけがHTTPリクエストに付きます。「サーバーから確認」で比較できます。HttpOnly CookieはJavaScriptから見えませんが、ここには届きます。

未確認
🔐 実験名は browser_lab_ で始まるものに限定しています。ログイン用session Cookieは名前だけ表示し、値は表示しません。この実験APIは受信内容をファイルへ保存しません。