はりをきば

そこにピカマンがいる限り 私はテイッハットウッをやめない

Chromeでこのブログが正常に表示できない問題を修正した

¯注意
この記事はを最後に更新されていない。
更新日が1年以上前の記事はリンク切れしていたり、情報としては役に立たなくなっている可能性あり。
ˆMixed Contentについて
この記事は投稿日が古い為、記事中の画像は非SSL(http://)で貼られている。(※投稿画像以外は全てSSL)
この件に関して詳しくはこちらを参照。

あけおめことよろ!
結局2020年もロクに記事を書かなかった。多分今年もそんな感じだと思う(諦め)




それはそうと、去年10月頃からChromeだけ当ブログが正常に表示されない事態になってた*らしい*ので修正した。
(*この問題に気付いたのがつい数日前なので正確な発生時期がわからん😎)

原因

原因は、Chromeが10月辺りからデフォルトのリファラーポリシーを変えた事に起因するCSSの読み込み失敗によるもの。

A new default Referrer-Policy for Chrome: strict-origin-when-cross-origin

https://developers.google.com/web/updates/2020/07/referrer-policy-new-chrome-default


当ブログはまずはてなブログ側のCSSを読み込み、そこから@importでfile.gutyan.jpにあるPC用CSSをチェーンロードしている。
この時、file.gutyan.jpにはこれまでhttps://usercss.blog.st-hatena.com/blog_style/{blog-uuid}/{hash}というリファラーが送信されていた。
hashは定期的に変わるがuuidはブログ毎に固定された値(このブログなら12704346814673858219)である為、file.gutyan.jpのプロキシーでは/^https:\/\/usercss\.blog\.st-hatena\.com\/blog_style\/12704346814673858219\//という感じで、uuidまで含めた先頭一致でアクセス制御を行っていた。


しかしChromeの仕様変更によりfile.gutyan.jp側ではオリジンまでしか取得できなくなった為に、正規表現ミスマッチでアクセス拒否されるという事態に陥った。

対処

とりあえず応急処置として、file.gutyan.jpのプロキシを弄りパターンマッチからパスを消しオリジン(usercss.blog.st-hatena.com)だけ見るようにした。
これで一応はChromeでも見れるようになったが、根本的な解決にはならない。


というのも、uuidを見ずusercss.blog.st-hatena.com全体を許可するという事はつまり
他人のはてなブログCSSからもimportできてしまう問題が起きる。
なので本当ならはてなブログ側のCSSローダーを使うのを止めるべきなのだが、それはそれでまた別のややこしい問題レスポンシブ対応が起きるので
現時点ではとりあえずこの件は保留とする。

あくまでChromeだけ

今回の変更はChromiumベースのブラウザ全てに反映されている訳ではないようで、例えばVivaldiは以前のリファラーポリシーのままだったりする。
私は普段FirefoxとVivaldiの両刀使いで、この2つでは問題無く表示できる為に今回の問題に気付くのが大幅に遅れた。
(同じChromiumなんだからVivaldiとChromeで表示結果が異なるとか思わんやろ普通💢)