Open2021/11/01にコメント追加3

polyfill.ioを使う時はflags=gatedを使った方が安全

まとめ

polyfill.io は欲しいfeatureを指定すると、User Agentに応じて必要なpolyfillのみを返してくれるサービス
flags=gated を指定すると返ってくるscriptが、feature detectionしてnativeのものがない場合にのみpolyfillを当てるものになる
- User Agent判定が常に正しいとは限らず、 polyfillによってむしろ機能が損なわれることもある ので、flags=gated を指定した方が安全

flags=gatedはAPIだけ生えていて実装が中途半端な場合にpolyfillが当たらなくて危険な気もしてきた。

起きた現象は
「最近、iOS Safariでのみformの内容がたまに正しく送信されないようになった」
というもの。

↓なんでそんなことが起きたのか。

featrues=fetch で fetch のpolyfillを利用していた。
- polyfill.io では version パラメータによってどのバージョンを使うかを指定できるが指定していなかった。
version 指定なしで使った場合に最近 v3.105.0 に加えて v3.108.0 もたまに配信されるようになった。
- v3.108.0 からは fetch の依存として URL のpolyfillも入るようになった。
最近のSafari（iOS 14, 15あたり）でUser Agent判定がうまくいっていないようで、v3.108.0 を引いた場合にはこれらのブラウザにも URL のpolyfillも入るようになった。
- URL のpolyfillは URLSearchParams のpolyfillも含んでいる
- fetch のbodyとしてpolyfillによる URLSearchParams を渡したとき、 Content-Type: text/plain;charset=UTF-8 として送信されてしまう問題がある。（application/x-www-form-urlencoded;charset=UTF-8 であって欲しい）
  - この場合には body が意図通りに解釈できない