iOS10.3.1/Safariにおいてdocument.writeでスクリプトを呼び出した際にエンコードがページ文字コードと異なると2重でHTTPアクセスが発生する

# 概要

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

```html
<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は下記の物を用意した。

```js:shift_jis_log.js
console.log('テスト shift_jis');
```

```js: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

```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>
```

###### ネットワーク

![1_network.png](https://qiita-image-store.s3.amazonaws.com/0/50841/a5a2ec84-4376-4630-fcb8-c1ebe9f1ef29.png)

###### コンソール

![1_console.png](https://qiita-image-store.s3.amazonaws.com/0/50841/c99fa9f3-4f5b-5337-9d1c-c0356b204e28.png)

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

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

###### HTML

```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>
```

###### ネットワーク

![2_network.png](https://qiita-image-store.s3.amazonaws.com/0/50841/8416f752-47ae-a966-4987-042e9c8617fb.png)

###### コンソール

![2_console.png](https://qiita-image-store.s3.amazonaws.com/0/50841/f6aaf2fc-6856-8da8-267d-c13c736daaf2.png)

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

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

###### HTML

```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>
```

###### ネットワーク

![3_network.png](https://qiita-image-store.s3.amazonaws.com/0/50841/43b43be4-0ce1-314d-97f6-b9df9a4b35eb.png)

###### コンソール

![3_console.png](https://qiita-image-store.s3.amazonaws.com/0/50841/c2869c5e-8e98-106e-7e17-b26f0bb22f23.png)


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

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

###### HTML

```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>
```

###### ネットワーク

![4_network.png](https://qiita-image-store.s3.amazonaws.com/0/50841/7ac13256-151b-f322-0fd1-3e9c9f7af541.png)

###### コンソール

![4_console.png](https://qiita-image-store.s3.amazonaws.com/0/50841/b3d985b5-eec3-8f3a-c03d-e926aab51079.png)

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

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

###### HTML

```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>
```


###### ネットワーク

![5_network.png](https://qiita-image-store.s3.amazonaws.com/0/50841/8e1ec0d7-1648-5e94-452f-2e5598e27b8d.png)

###### コンソール

![5_console.png](https://qiita-image-store.s3.amazonaws.com/0/50841/5dd428e5-eca2-e1a4-fa75-dc3af039e075.png)

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

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

###### HTML

```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>
```

###### ネットワーク

![6_network.png](https://qiita-image-store.s3.amazonaws.com/0/50841/1ae3ed29-baf3-7414-d60f-d2ffd7df5438.png)

###### コンソール

![6_console.png](https://qiita-image-store.s3.amazonaws.com/0/50841/b170e253-0ec5-85ba-e349-ed2e4fade3cc.png)

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

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

###### HTML

```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>
```

###### ネットワーク

![7_network.png](https://qiita-image-store.s3.amazonaws.com/0/50841/1f227a5a-5fe8-868b-c712-e622caf3ad99.png)

###### コンソール

![7_console.png](https://qiita-image-store.s3.amazonaws.com/0/50841/9a59491b-f121-9f02-68e8-08b3548d48a6.png)

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

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

###### HTML

```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>
```

###### ネットワーク

![8_network.png](https://qiita-image-store.s3.amazonaws.com/0/50841/50245792-2672-2c47-7d0d-c03d227c7ad1.png)

###### コンソール

![8_console.png](https://qiita-image-store.s3.amazonaws.com/0/50841/71d0b804-ede8-41fd-5f03-63b233cb569f.png)

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

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

###### HTML

```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>
```

###### ネットワーク

![9_network.png](https://qiita-image-store.s3.amazonaws.com/0/50841/d31a287f-88b7-e5c7-5934-39d136ec72df.png)

###### コンソール

![9_console.png](https://qiita-image-store.s3.amazonaws.com/0/50841/062c8ec5-9f4e-4cb1-8f9c-9c0cbfcececd.png)

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

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


###### HTML

```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>
```

###### ネットワーク

![10_network.png](https://qiita-image-store.s3.amazonaws.com/0/50841/46afbe30-a2e1-5d8c-3a23-5ea613866afe.png)

###### コンソール

![10_console.png](https://qiita-image-store.s3.amazonaws.com/0/50841/1d558203-f039-61cd-3ccf-75b99f35543f.png)

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

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


###### HTML

```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>
```

###### ネットワーク

![11_network.png](https://qiita-image-store.s3.amazonaws.com/0/50841/3a4b0eca-99c8-f715-5a0a-6a4259c15f1f.png)

###### コンソール

![11_console.png](https://qiita-image-store.s3.amazonaws.com/0/50841/c1e2f044-9d80-69fe-440f-c187f449ec7a.png)

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


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

###### HTML

```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>
```


###### ネットワーク

![12_network.png](https://qiita-image-store.s3.amazonaws.com/0/50841/efd4b8da-2099-8233-50e1-11f021f336fe.png)

###### コンソール

![12_console.png](https://qiita-image-store.s3.amazonaws.com/0/50841/902b0f4c-bdb0-1dc0-3e1b-330b17318ae6.png)

# 結果


|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
こことかに報告すればいいのでしょうか…どなたか知っていたら教えてください。