概要

少なくともiOS10.3.1/Safariにおいて
下記のようにページのエンコーディングとdocument.writeで設置されるスクリプトのcharset属性が異なる場合、設置されるスクリプトが2重でHTTPアクセスが発生する。
※iOS9.0では発生しなかった

<html>
<head>
  <meta charset="shift_jis" />
</head>
<body>
<script>
document.write('<script type="text/javascript" src="//example.com/piyopiyo.js" charset="utf-8" ></scr'+'ipt>');
</script>
</body>
</html>

どのようなパターンでこの事象が起こるのか簡単にテストを行う

検証パターンとJSファイルの用意

下記のパターンそれぞれの組み合わせを想定しテストを行ってみる。

meta charset
- 指定なし
- utf-8
- shift_jis
scriptタグ属性charset
- 指定なし
- utf-8
- shift_jis

JSは下記の物を用意した。

shift_jis_log.js

console.log('テスト shift_jis');

utf-8_log.js

console.log('テスト utf-8');

どちらのJSを呼んだかわかりやすくなるようにエンコーディング名を末尾に記載しているのと、実際の文字エンコーディングもそれぞれのファイル名通りのものとなっている。
なお、レスポンスヘッダのContent-Typeでは呼び出し元HTML/JS共にcharsetを明示的に指定していない状態。

検証はiPhoneSE/iOS10.3.1/Safariな端末をMacOSに繋げた後
MacOS上SafariのWEBインスペクタのコンソールを確認という形で行う

最終的な検証パターンは下記のような感じ

No	ページcharset	スクリプトcharset
1	指定なし	utf-8
2	指定なし	shift_jis
3	utf-8	指定なし (utf-8_log.jsを使用)
4	utf-8	指定なし (shift_jis_log.jsを使用)
5	utf-8	utf-8
6	utf-8	shift_jis
7	shift_jis	指定なし (utf-8_log.jsを使用)
8	shift_jis	指定なし (shift_jis_log.jsを使用)
9	shift_jis	utf-8
10	shift_jis	shift_jis
11	指定なし	指定なし (utf-8_log.jsを使用)
12	指定なし	指定なし (shift_jis_log.jsを使用)

それぞれのJSはHTMLとは別サーバに置いて、httpアクセスで取得するものとする。
※example.comの部分は実際には自前で用意した別サーバのURLが入ります。

検証が縦に長くなってしまったので、結果だけ確認したい方は一番下までスクロールしてください。

検証する

1. ページ文字指定:指定なしスクリプトcharset:utf-8

2回のHTTP呼び出しが行われている。
JSの実行は１回。
（異常）

HTML

1.html

<html>
<head>
</head>
<body>
<script>
document.write('<script type="text/javascript" src="//example.com/utf-8_log.js" charset="utf-8" ></scr'+'ipt>');
</script>
</body>
</html>

ネットワーク

コンソール

2. ページ文字指定:指定なしスクリプトcharset:shift_jis

2回のHTTP呼び出しが行われている。
JSの実行は１回。
（異常）

HTML

2.html

<html>
<head>
</head>
<body>
<script>
document.write('<script type="text/javascript" src="//example.com/shift_jis_log.js" charset="shift_jis" ></scr'+'ipt>');
</script>
</body>
</html>

ネットワーク

コンソール

3. ページ文字指定:utf-8 スクリプトcharset:指定なし (utf-8_log.jsを使用)

1回のHTTP呼び出しが行われている。
JSの実行は１回。
（正常）

HTML

3.html

<html>
<head>
  <meta charset="utf-8" />
</head>
<body>
<script>
document.write('<script type="text/javascript" src="//example.com/utf-8_log.js" ></scr'+'ipt>');
</script>
</body>
</html>

ネットワーク

コンソール

4. ページ文字指定:utf-8 スクリプトcharset:指定なし (shift_jis_log.jsを使用)

1回のHTTP呼び出しが行われている。
JSの実行は１回。
コンソール出力結果が化けているが、shift_jisなファイルをUTF-8扱いで読み込んでいるだけ。
（正常）

HTML

4.html

<html>
<head>
  <meta charset="utf-8" />
</head>
<body>
<script>
document.write('<script type="text/javascript" src="//example.com/shift_jis_log.js" ></scr'+'ipt>');
</script>
</body>
</html>

ネットワーク

コンソール

5. ページ文字指定:utf-8 スクリプトcharset:utf-8

1回のHTTP呼び出しが行われている。
JSの実行は１回。
（正常）

HTML

5.html

<html>
<head>
  <meta charset="utf-8" />
</head>
<body>
<script>
document.write('<script type="text/javascript" src="//example.com/utf-8_log.js" charset="utf-8"></scr'+'ipt>');
</script>
</body>
</html>

ネットワーク

コンソール

6. ページ文字指定:utf-8 スクリプトcharset:shift_jis

2回のHTTP呼び出しが行われている。
JSの実行は１回。
（異常）

HTML

6.html

<html>
<head>
  <meta charset="utf-8" />
</head>
<body>
<script>
document.write('<script type="text/javascript" src="//example.com/shift_jis_log.js" charset="shift_jis"></scr'+'ipt>');
</script>
</body>
</html>

ネットワーク

コンソール

7. ページ文字指定:shift_jis スクリプトcharset:指定なし (utf-8_log.jsを使用)

1回のHTTP呼び出しが行われている。
JSの実行は１回。
コンソール出力結果が化けているが、UTF-8なファイルをshift_jis扱いで読み込んでいるだけ。
（正常）

HTML

7.html

<html>
<head>
  <meta charset="shift_jis" />
</head>
<body>
<script>
document.write('<script type="text/javascript" src="//example.com/utf-8_log.js"></scr'+'ipt>');
</script>
</body>
</html>

ネットワーク

コンソール

8. ページ文字指定:shift_jis スクリプトcharset:指定なし (shift_jis_log.jsを使用)

1回のHTTP呼び出しが行われている。
JSの実行は１回。
（正常）

HTML

8.html

<html>
<head>
  <meta charset="shift_jis" />
</head>
<body>
<script>
document.write('<script type="text/javascript" src="//example.com/shift_jis_log.js"></scr'+'ipt>');
</script>
</body>
</html>

ネットワーク

コンソール

9. ページ文字指定:shift_jis スクリプトcharset:utf-8

2回のHTTP呼び出しが行われている。
JSの実行は１回。
（異常）

HTML

9.html

<html>
<head>
  <meta charset="shift_jis" />
</head>
<body>
<script>
document.write('<script type="text/javascript" src="//example.com/utf-8_log.js" charset="utf-8"></scr'+'ipt>');
</script>
</body>
</html>

ネットワーク

コンソール

10. ページ文字指定:shift_jis スクリプトcharset:shift_jis

1回のHTTP呼び出しが行われている。
JSの実行は１回。
（正常）

HTML

10.html

<html>
<head>
  <meta charset="shift_jis" />
</head>
<body>
<script>
document.write('<script type="text/javascript" src="//example.com/shift_jis_log.js" charset="shift_jis"></scr'+'ipt>');
</script>
</body>
</html>

ネットワーク

コンソール

11. ページ文字指定:指定なしスクリプトcharset:指定なし (utf-8_log.jsを使用)

1回のHTTP呼び出しが行われている。
JSの実行は１回。
コンソール出力結果が化けているが、UTF-8なファイルを別のエンコード（何のエンコード？）扱いで読み込んでいるだけ。
（正常）

HTML

11.html

<html>
<head>
</head>
<body>
<script>
document.write('<script type="text/javascript" src="//example.com/utf-8_log.js"></scr'+'ipt>');
</script>
</body>
</html>

ネットワーク

コンソール

12. ページ文字指定:指定なしスクリプトcharset:指定なし (shift_jis_log.jsを使用)

1回のHTTP呼び出しが行われている。
JSの実行は１回。
コンソール出力結果が化けているが、UTF-8なファイルを別のエンコード（何のエンコード？）扱いで読み込んでいるだけ。
（正常）

HTML

12.html

<html>
<head>
</head>
<body>
<script>
document.write('<script type="text/javascript" src="//example.com/shift_jis_log.js"></scr'+'ipt>');
</script>
</body>
</html>

ネットワーク

コンソール

結果

No	ページcharset	スクリプトcharset	HTTPが2重で呼ばれているか
1	指定なし	utf-8	◯
2	指定なし	shift_jis	◯
3	utf-8	指定なし (utf-8_log.jsを使用)
4	utf-8	指定なし (shift_jis_log.jsを使用)
5	utf-8	utf-8
6	utf-8	shift_jis	◯
7	shift_jis	指定なし (utf-8_log.jsを使用)
8	shift_jis	指定なし (shift_jis_log.jsを使用)
9	shift_jis	utf-8	◯
10	shift_jis	shift_jis
11	指定なし	指定なし (utf-8_log.jsを使用)
12	指定なし	指定なし (shift_jis_log.jsを使用)

ページエンコーディングと明示的に違うエンコーディングであることを示すと今回の事象が起こるらしい。
レスポンスヘッダのContent-Typeのcharsetで同じことが起こるのかは未検証。
- 今回は未指定

終わりに

おそらくiOSないしSafariのバグだと思っているのですが
https://www.apple.com/jp/feedback/iphone.html
こことかに報告すればいいのでしょうか…どなたか知っていたら教えてください。