◆ CSSStyleSheet.replace の @import 廃止で影響受けるツールがあった
◆ SameSite が Lax になって None に変更しようにも Secure 属性もいるので HTTPS が必要になる

Chrome 85 がもう出たというのに今更ですが Chrome 84 の変更点の影響を受けました

CSS の @import

以前このブログでも書いたものですが CSSStyleSheet.replace 中の CSS で @import が使えなくなりました
一時的なコード以外で使ってるところはなかったはず と思ってたのですがたまに使うページで使ってました

JavaScript の import で CSS のインポートができるようになっていればいいのですが まだそっちの対応はできていないようです
代替になる仕組みはない状態での機能削除なので修正がちょっと面倒です
自分で CSS ファイルの中身を取得して repaceSync で書き換えます

元々が

const cssss = new CSSStyleSheet()
const promise = cssss.replace(`@import url(${css_url})`)

の場合は

const promise = fetch(css_url).then(res => res.text()).then(body => cssss.replaceSync(body))

のようになります

Vue.js の vue ファイルのようにコンポーネント単位で HTML/CSS/JavaScript をまとめる考えのものもありますし CSS ファイルを分けずにコンポーネントの JavaScript ファイル中に書いてしまうほうがいいのかもしれません
シンタックスハイライトや補完などの問題は残りますけど

Cookie の SameSite

けっこう前に話題になっていて余計な変更しないでほしいと思いつつも結局何も影響なかったしまぁいいかと思っていたのですが Chrome 84 からの変更だったようです
一時的に Chrome 80 でこの変更を入れてリリースされたらしいですが 新型コロナ関係で一旦もとに戻して Chrome 84 からまた変更が入ったようです

外部サービスで動かなくなったところでは URL エリアの右側の翻訳切り替えボタンやお気に入りボタンなどが出てくるところのアイコンをクリックすればサードパーティ Cookie を許可できて動くようにできました
しかし全部のサイトでその方法が使えるわけではないようです

私が困ったところでは 1 サイトにログインすると別オリジンの関連サイトもまとめてログインする仕組みになっています
内部的には 1 つにログインができたらそこから script タグや img タグなど CORS の制限を受けずにリクエストが送れる機能を使いバックグラウンドで関連サイトへリクエスト送ってそれぞれのログイン済みの Cookie をセットするというものです

今回の Chrome の変更では SameSite が指定されていないとデフォルトで Lax になり これでは画像のロードや iframe などでリクエストを送っても Cookie がセットされません
devtools の Network タブでリクエストを見ると Set-Cookie のレスポンスに警告マークがついて Lax だから Cookie はセットできないってメッセージが出ます

対処するには SameSite に None を指定すればいいのですが None を指定するなら Secure 属性が必須と言われます
Secure 属性は HTTPS が要求されるので HTTP 通信じゃ使えません
一般公開されてるものならともかくそうでもないので HTTPS にする必要がないのになんでこう面倒なことをするのでしょうね……
適当な証明書を設定して HTTPS にしても頻繁に警告が出て手動で許可しないといけないですし 今回のようなバックグラウンドで通信する部分では証明書エラーの確認画面も出ずに単にエラー扱いです

一応ブラウザ設定でこの制限をなくせはしますが 関係ないサイトまで影響しますし ブラウザ設定をいじると自分の環境でしか動かなかったとかが出てきて逆に困ることもあるのであまり変更したくないところです
そのサイトにアクセスする全端末の Chrome 系ブラウザで設定もやってられませんし

とりあえず雑な対策でバックグラウンドではなくフォアグラウンドでアクセスするようにしました
Lax の制限だとバックグラウンドで通信する script タグなどは制限を受けますが window.open などでタブとして開いた場合は制限を受けません
ログイン時に 10 近くタブが開いたりしますが それぞれの開くファイルを HTML ファイルにして

<script>window.close()</script>

にしておけば一瞬で閉じるのでタブエリアを見てみれば一瞬動きがありますが基本は気にならない程度で済ませます
ポップアップのブロックがあるので最初は許可する必要がありますが他の方法よりは一番楽なのでここは諦めます

他には拡張機能を使うことも考えましたが これのために全ブラウザに拡張機能を入れるのもなんかなぁって気分になりますし


普段は必要以上に互換性気にして既存を壊す新機能を入れないのだからこのあたりも徹底してほしいのですけどね