エンジニア歴1年弱の新米エンジニアです。
普段の業務ではフロントエンドはReact、バックエンドはPHPを使用しています。
ググって調べて出てきたコードをコピペすれば問題自体は解決しますが、それだと身につかないと思ったので今回も備忘録として残したいと思います。
起きていた問題
顧客管理システムをローカル環境でメンテナンス中 ユーザーA のアカウントでログインログアウトし、今度は ユーザーB でログインしたところ前回ログインしたユーザーの情報 （ユーザーA） の情報が引っ張られてしまう
試したこと
ログイン処理を行っているPHPファイルに対して様々な記事を参考に
header( 'Cache-Control: no-store, no-cache, must-revalidate' );
header( 'Cache-Control: post-check=0, pre-check=0', FALSE );
header('Pragma:no-cache');
を追記しましたが変わらず…
解決策
header( 'Cache-Control: no-store, no-cache, must-revalidate' );//削除
header( 'Cache-Control: post-check=0, pre-check=0', FALSE );//削除
header('Pragma:no-cache');
上記の二行を削除し、
header('Cache-Control: no-cache');
に書き換えたところキャッシュを無効化にすることが出来ました。
ですが、このコードがどこまでキャッシュの制御ができるのか、どのように作用しているのか気になったので自分なりに調べてみました。
あくまで自己満ですので、興味ある方がいたら最後まで見て頂けると嬉しいです。
私個人で調べた情報ですので誤った情報を記載しているかもしれません。
参考程度に見て頂けると幸いです。
コード解説
header( 'Cache-Control: no-store, no-cache, must-revalidate' );//一行目
no-store
ブラウザに対してレスポンスをキャッシュに保存しないようにします。
特にパーソナルデータを扱うときに追記します。
no-cache
ブラウザに対してキャッシュされたレスポンスを使用する前にオリジンサーバーに確認します。
これを記載することによって、古い情報または期限切れの情報が表示されるのを防ぎます。
must-revalidate
キャッシュされたレスポンスが期限切れになった時にブラウザ日大してオリジンサーバーに再確認するようにします。
これらの設定は、HTMLがブラウザに既に送信されて解析されてからでは遅すぎるためHTMLのメタタグで上記を記載することはできません。
必ずサーバーサイドで行いましょう。
header( 'Cache-Control: post-check=0, pre-check=0', FALSE );//二行目
pre-check=0、post-check=0
キャッシュされたレスポンスが期限切れになった場合、ブラウザが再確認せずにキャッシュを使用することを許可します。
FALSE
ヘッダーがすでに送信された後、このヘッダーを上書きすることを許可します。
このコードはページのパフォーマンスを向上させられますが、古い情報が表示される可能性があります。
header('Pragma:no-cache');//三行目
Pragma:no-cache
HTTP/1.0互換の古いブラウザに対して、キャッシュされたレスポンスを使用する前に、必ずオリジンサーバーに再確認するようにします。
現在のブラウザは HTTP/1.1 を使用しているため Cache-Control:no-cache が推奨されています。
おそらく三行目の記載が間違っていたのでうまく制御ができなかったのかなあと自分では思っております。
かなり初歩的な内容ですが、改めてキャッシュについて理解を深められたので良かったです。