クッキーをブラウザで覗いてみる/JQuaryで設定

5548 ワード
cookie Java jQuery Java テキストリンク

前提として

この記事ではクッキーに入れる情報を、クライアント側で設定していますが、
セキュリティ上、基本的には「クッキーに入れる情報はサーバー側で用意したものをフロントで保管するだけ」であるべきという考えが現在は主流となっているそうです。

ーーーーーーーー

クッキー情報の取得方法などを学習がてらまとめて書いてみます。
クッキーの仕組みをまとめた記事はこちらがとてもわかりやすかったです。こちらを読んだ上or理解された上でお気軽にお読みいただければ幸いです！

ブラウザ

Chromeでは標準でクッキーを情報を見ることができます。
Chromeで検証モードに切り替え、Applicationタブを選び、その中のクッキーのアイコンの場所に、今見ているサイトのurlが表示されています。
こちらをクリックすると、そのサイト持たせているクッキー情報が、キーとバリューで表示されています。
サイトにより持たせている情報も異なりますので、いろんなサイトを見てみると面白いかも。
Twitterの場合

jsで設定する

jsではクッキー情報は複数繋がっており、sliceとか出力するのがなかなか大変なので、
jquaryのプラグイン「jquery-cookie」でコントロールしてみます。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--jqueryとjquery-cookieを読み込み-->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

    <title>クッキーテスト</title>
</head>
<body>
    <div class="yourname">
        あなたの名前は
        <div class="js-cookie-yourname"></div>
        です
    </div>

    <script>
        //cookieのyournameに「太郎くん」を設定
        $.cookie('yourname','太郎くん',{ secure: "None"});
        //html内にクッキーの情報を挿入
        $('.js-cookie-yourname').html($.cookie('yourname'));
    </script>

</body>
</html>

この方法で、firefoxだとクッキーを値を出力できました。
[サイト表示]

（背景白サイトだからわかりづらい）

Chromeではうまくいかない

ただ、上記の処理を単純にローカルのURLでやった場合、Frefoxだとうまく行きますが、Chromeだと出力されません。
最近のChromeは、セキュリティ上基本的にhttpsのurlじゃないとクッキーの送信が行えなくなったようです。

https://developer.mozilla.org/ja/docs/Web/API/Document/cookie
;secure https の通信を使用しているときだけ、クッキーが送信されます。 Chrome 52 以前では、このフラグは http ドメインからのクッキーに設定することができました。

とのこと。
サードパーティクッキー（別ドメインから発行されてるクッキー）も厳しくなったので、それと同じような感じなのだろうか。。
https://news.yahoo.co.jp/articles/2d58d3425a3a6f8b045350c88ae14162b2b5839b
（いつか調べるかも）