はじめに

今回は、ブログで使ってみたかったので勉強した、Cookieとsessionの違いについてまとめてみました。

Cookieとは

Cookie（クッキー）は、webブラウザに保存される小さなテキストファイルのことです。Webサイトにアクセスした際に記録されます。

訪問者が訪れたサイトの履歴、入力したデータ、ID、利用環境などの情報が入っています。webサイトがユーザーのブラウザにCookieを送信することで、再度アクセスしたときに情報を再入力しなくてもサービスが利用できます。

サイト運営者も、ユーザーの情報や履歴の判別でき、各々に合わせた情報を提供することが可能です。

デメリットとしては、第三者に勝手に入力情報を利用されないよう注意が必要なこと、意図しない形でプライバシーを侵害される可能性があることだと思います。

sessionとは

セッションとは、通信の始まりから終わりまでのこと、あるいはその単位のことを指します。一連のリクエストとレスポンスを通じてユーザーとウェブサーバーの間で確立される一時的な接続です。

HTTPのサイトでは、セッションにIDを振ることで同一のセッションを管理することができます。これにより、ショッピングカートの内容の保持、ログイン状態の維持、ページ間での情報の引き継ぎなどが可能になります。

デメリットとしては、格納データが増えるとメモリが枯渇したり、タイムアウトしてしまうと再びデータを入力しなくてはいけないことです。同一処理の画面を複数立ち上げると、データの整合性が保てなくなることもあります。

２つの違い：データの保存場所

この２つには大きな違いが２つあります。

１つ目は、データの保存場所です。Cookieのデータは直接ブラウザに保存されますが、それに対しセッションはサーバーに送られて保存されます。

これにより、ブラウザ上に保存されるCookieはマルウェアや不正なスクリプトによる改ざんのリスクが考えられます。万一に暗号化されていなかったら、データを勝手に覗き込まれる可能性があります。

sessionはサーバー側で保存されるので直接の改ざんや盗み読みの可能性は低いです。しかし、セッションを識別するセッションIDが盗まれた場合、IDを使ってセッションハイジャックを試みられる可能性もあります。これにより、不正ユーザーが正当なユーザーとしてシステムを使用ができるリスクが生じます。セッションIDはhttps接続を使用して送受信し、定期的に変更を行えば、セキュリティを高められます。

２つの違い：有効期限

２つ目の違いは、有効期限です。

Cookieはユーザーによって有効期限を決めることが可能です。有効期限が設定されていない場合、セッションCookieと呼ばれ、ユーザーがブラウザを閉じるときに削除されます。

それに対しsessionはブラウザが閉じられたら終了します。サーバー設定やアプリケーションの設定によって、無活動の時間は変更可能です。しかしセキュリティの観点から、インターネットバンキングでは、短い時間の無活動の後にセッションが終了する方がいいと思います。

ブログでの活用

このサイトではsessionが使われています。どこに使われているかというと、ローディング画面です。
私は画面遷移で何度もローディング画面が表示されるのは気が散るので苦手です。しかも、このブログサイトはそんなにロードに時間がかからないので、ローディング画面はサイトに入った１回目だけ表示させることにしました。

WordPressの拡張機能でローディング画面が作れましたが、画面遷移で何度も表示されてしまうので使いませんでした。サイトに入った１回目だけ表示し、サイトから出るまでローディング画面は表示しない設定にしたかったので、有効期限に着目しCookieではなくsessionにしました。

セッションからストレージを取得し保存されていなければフラグがないので、クラス名（active）を付与し、ローディング画面が表示されます。
保存されていればフラグが立ち、クラス名（hidden）が付与され、表示されなくなります。

ほとんどネット上で見つけたコードを流用してしまったので、次からは自分で組めるようになりたいです。

// セッションストレージからフラグを取得
const isFirstLoad = sessionStorage.getItem('isFirstLoad');

// ページの読み込みが完了したときに実行される関数
window.addEventListener('load', function () {
    // フラグが 'true' でない場合（初回アクセス時またはフラグが削除された場合）
    if (isFirstLoad !== 'true') {
        // ローディング画面を表示
        const loadingElement = document.querySelector('.loading');
        loadingElement.classList.add('active');

        // 2秒後にローディング画面を非表示にする
        setTimeout(function () {
            // ローディング画面を非表示にする
            loadingElement.classList.remove('active');
            // コンテンツ要素を表示
            const contentsElement = document.querySelector('.contents.hidden');
            console.log(contentsElement);
            contentsElement.classList.remove('hidden'); // hiddenクラスを取り除くことでコンテンツを表示
            // セッションストレージにフラグを保存
            sessionStorage.setItem('isFirstLoad', 'true');
        }, 2000);
        setTimeout(function () {
            loadingElement.style.display = 'none'; // 非表示にする
        }, 2500);
    } else {
        // 2回目以降のアクセス時の処理を記述
        // コンテンツ要素を表示
        const contentsElement = document.querySelector('.contents.hidden');
        contentsElement.classList.remove('hidden'); // hiddenクラスを取り除くことでコンテンツを表示
    }
});

まとめ

2022年に施行された改正個人情報保護法により、Cookieを第三者に提供して個人情報を紐づける場合には、ユーザー本人の同意を得ることが義務化されましたね。

高校でCookieについては学びましたが、用語が出てきた程度だったので、今回詳しく調べることができたのでよかったです。

また、このサイト内でリロードをしてみてください。ローディング画面は表示されないと思います。難しかったけど、実装できて良かったです。