POSTでキャッシュクリアする方法がわからない

実現したいこと

キャッシュをユーザー側で消してもらうのではなく、iframeとPOSTリクエストを使った方法で、運営者側によって消したい。

発生している問題・分からないこと

よくSEO目的で301リダイレクトを使うことがあったが、以前の質問へのコメントで301リダイレクトは無期限キャッシュと教わったので誤ってキャッシュされるリスクを考え302を使うようにしている。

しかしhtaccessで誤って301リダイレクトしてしまった場合に備えて対処方法を調べていたら参考記事：iframeとPOSTを使ったキャッシュクリア方法を見つけた。この参考記事によると「POST リクエストはそのURLのキャッシュされたコンテンツを無効にします。」「FORMをiframeに投げこみ、そこで POST を実行してみましょう。」とのこと。実施してみたがうまく効かない。

＜現状の流れ＞
1：「old.html」から「new1.html」に「.htaccess」で301リダイレクト
↓
2：「old.html」にアクセスすると「new1.html」へ転送
↓
3：転送先を間違えたと想定し「old.html」から「new2.html」に「.htaccess」で301リダイレクト記述を修正
↓
4：「old.html」にアクセスするとキャッシュが効いて「new2.html」ではなく「new1.html」へ転送される。
↓
5：「new2.html」に転送したいので下記該当ソースコードを「new1.html」内にscriptタグとして設置。
↓
6：「old.html」にアクセスすると「new1.html」へ転送される状況は変わらず。

該当のソースコードver01

javascript
1//参考記事より引用
2const ifr = document.createElement('iframe');
3ifr.name = ifr.id = 'ifr_'+Date.now();
4document.body.appendChild(ifr);
5const form = document.createElement('form');
6form.method = "POST";
7form.target = ifr.name;
8form.action = '/thing/stuck/in/cache';
9document.body.appendChild(form);
10form.submit();

javascript
1//参考記事を元に変更した物(ver01。下から三行目のみ変更)
2const ifr = document.createElement('iframe');
3ifr.name = ifr.id = 'ifr_' + Date.now();
4document.body.appendChild(ifr);
5const form = document.createElement('form');
6form.method = "POST";
7form.target = ifr.name;
8form.action = 'https://example.com/old.html';
9document.body.appendChild(form);
10form.submit();

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

日本語以外にも「cache clear post iframe」などでgoogle検索。
該当のソースコードを記述するファイルを「new1.html」ではなく「old.html」に変更しても結果変わらず。

補足

参考記事：https://postd.cc/clearing-cache-in-the-browser/
実施環境：macのchrome。バージョン133.0.6943.55

該当のソースコードver02

参考記事のiframeを使う意図がわからなくて、iframe無しverにしてみました。これで当環境では「old.html」から「new2.html」に飛べましたが、これでは「new1.html」に直接アクセスできなくなってしまいました。

javascript
1//参考記事を元に変更した物(ver02)
2const form = document.createElement('form');
3form.method = "POST";
4form.target = "_top";
5form.action = 'https://example.com/old.html';
6document.body.appendChild(form);
7form.submit();

該当のソースコードver03

参考記事２によるとリダイレクト回数を取得できるようだったので、下記該当ソースコードを「new1.html」内にscriptタグとして設置しました。これでどこかからリダイレクトしてnew1.htmlに来た場合はPOST送信でcacheをクリアしold.htmlにアクセスさせnew2.htmlに飛ぶという流れになりました。

javascript
1//参考記事2を元に変更した物(ver03)
2const entries = performance.getEntriesByType("navigation");
3entries.forEach((entry) => {
4    const name = entry.name;
5    const redirectCount = entry.redirectCount;
6    if (name === 'https://example.com/new1.html' && redirectCount > 0) {
7        //new1.htmlが1回以上リダイレクトされた
8        const form = document.createElement('form');
9        form.method = "POST";
10        form.target = "_top";
11        form.action = 'https://example.com/old.html';
12        document.body.appendChild(form);
13        form.submit();
14    } else if (name === 'https://example.com/new1.html' && redirectCount === 0) {
15        //new1.htmlが0回リダイレクトされた
16    }
17});

欠点は「new1.html」のリダイレクト元が「old.html」以外でも作動してしまうことですが汗。欠点を補うためリダイレクトから判断するのではなくキャッシュかどうかで判断しようと思い参考記事3：transferSizeとdecodedBodySizeでのキャッシュ判別を見ましたを試したが、非SSL環境でテストしたためかうまくいかずもう一度チャレンジします。

行動規範の内容に同意します

回答2件

参考ページをちゃんと読んでないので、iframeを使う意図は分かりません。ぱっと見ではそのページの趣旨は301リダイレクトのキャッシュの話じゃなくて、サーバーから返されるコンテンツのキャッシュの話なので、前提が違うのかも知れません。

本題に戻ると、ver2を使うと、
1：「old.html」から「new1.html」に「.htaccess」で301リダイレクトする記述
2：「old.html」にアクセスすると「new1.html」へ転送
（ここまでは実施済みで、今さら時間を遡っての変更は出来ない前提）
3：転送先を間違えたと想定し「old.html」から「new2.html」に「.htaccess」で301リダイレクト記述を修正
4：「old.html」にアクセスするとキャッシュが効いて「new2.html」ではなく「new1.html」へ転送される。
5：「new2.html」に転送したいのでver2ソースコードを「new1.html」内にscriptタグとして設置。
6：「old.html」にアクセスすると、キャッシュが書き直されて、「new2.html」へ転送される
は、実現できると思います。

それに追加して、「直接new1.htmlにアクセスしたらnew2.htmlにリダイレクトされないようにしたい」という要件が実はあると言うことかと思います。
「new1.htmlにアクセスすると、常にold.htmlにPOSTする」というコードになっているので、追加要件が満たされないのは当然です。

追加要件を実現するためには、new1.htmlへのアクセスが「old.htmlからリダイレクトされて」なのか「リダイレクトを経由せず直接リクエストされたのか」を判断して処理を分岐する必要がありますが、判断付かないと思います。

解決策としては、「new1.htmlへの直接アクセスというのが、サイト内のどこかのページのリンクをクリックして」という前提を置いて良いのであれば、そういうリンクにnew1.html?Xやnew1.html#Xのようにクエリーやフラグメントを付けることにすれば、そういうのが無い場合だけold.html経由と判断してPOSTするようにする事は出来ます。
リンクを踏んで後ろに何か付いていれば元のnew1.htmlが表示されます。

JavaScript
1// (ver02改)
2if(location.hash==""){
3  const form = document.createElement('form');
4  form.method = "POST";
5  form.target = "_top";
6  form.action = "/old.html";
7  document.body.appendChild(form);
8  form.submit();
9}

他ページからnew1.htmlへのリンクは、<a href="/new1.html#A">など。

投稿2025/02/18 11:25

otn

総合スコア86160

kjshdfiuasye

2025/02/18 19:04

ご回答ありがとうございます。ソースコードまで書いてくださり感謝です。確かにブックマークを意識せず特定のページに設置されたnew1.htmlへの発リンクのみを対象にする場合は、クエリーやフラグメントを付けることにすればよさそうですね！ちなみにご記入いただいた「リダイレクトを経由せず」についてですがredirectCountで取得できたので質問内容に見出し「該当のソースコードver03」として追記してみました。

otn

2025/02/19 13:15

なるほど。redirectCount というのは知りませんでした。 > 欠点を補うためリダイレクトから判断するのではなくキャッシュかどうかで判断しようと思い参考記事3：transferSizeとdecodedBodySizeでのキャッシュ判別を見ましたを試したが、斜め読みですが、これって、「new1.html自体がキャッシュからかサーバーからか」しか分からないのではないでしょうか？

kjshdfiuasye

2025/02/20 08:00

コメントありがとうございます！「new1.html自体がキャッシュからかサーバーからか」しか分からないのではないかとのことですが、検証してみたところ「new1.html自体ではなく、new1.html内で読み込まれているリソース」のみキャッシュ判別をできるようです。つまり「new1.htmlにリダイレクトされる前のold.htmlがキャッシュかどうか」の判別には向いてなかったようです。ブラウザ検証ツール上ではその判別ができるのですが、その情報をjavascriptから取得するのは難しそうです。

otn

2025/02/20 14:17

なるほど。さらに限定的だったのですね。 redirectCount で足りないのであれば、「そもそも何故区別したいのか」という所まで戻って、動線全体の見直しですかね。

行動規範の内容に同意します