各種OS/ブラウザでの長いフラグメントのあるURLの長さを調べてみました

## 調査内容

各種OSの各種ブラウザでの長いフラグメントのあるURLの上限を調べます。
URLを長くしていくために、URLのフラグメント[^fragment](#以降のやつです)を使いました。
[^fragment]: JavaScriptで`location.hash`で取れるやつです。  

この文章でURLの長さといった場合は、`https://`も含めたURLの長さのことです（フラグメントの長さではありません）。

### URLのフラグメントを使った理由

* パスの長さなどだとWebサーバーが上限を決めて弾いてしまうかもしれない
    * フラグメントをクライアント側で処理されるものなので、HTTPでWebサーバーに送られることはないはずです
* 調査するときにパスを指定するより手軽
    * パスをしていするときには、どんなパスでも許容するWebサーバーをどこから探したり、書いたりすることもできたのですが、HTMLを設置して済むほうばより手軽で、GitHub pagesで公開して他の人も同じサイトで試しやすいのでフラグメント使いました


### 調査対象
- Google Chrome (macOS)
- Safari (macOS)
- Firefox (macOS)
- Google Chrome (Windows 10)
- Edge (Windows 10)
- Google Chrome (Android)
- Safari (iOS)
- Google Chrome (iOS)

### 調査で使うサイト

調査するときには、調査用に作った<https://nwtgck.github.io/url-length-getter-web>を使いました。アクセスすると、以下のように`location.href.length`の長さが表示されます。

<img width="1054" alt="Screen Shot 2018-10-21 at 9.27.47.png" src="https://qiita-image-store.s3.amazonaws.com/0/84451/52c28ef9-e929-76ab-28f3-59d908aee3fe.png">

（長さ100のURL: <https://nwtgck.github.io/url-length-getter-web/#abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz>）

### このツールを使う理由
PC上だと、開発者ツールを開いて`location.href.length`を打てば本当にその長さなのか確認できるので、どんなサイトでもフラグメントを使って調査できます。ですがその方法をモバイル端末だと手軽にできなさそうなので、このサイトで調査しました。

### 長いURLを生成するRubyスクリプト

```rb:make_long_url.rb
n = 100
("https://nwtgck.github.io/url-length-getter-web/#"+([*?a..?z].join * ((n / 26).floor + 1)))[0...n]
```
（`n`に得たいURLの長さを入れます）

## Google Chrome　（macOS）

### バージョン
Version 69.0.3497.100 (Official Build) (64-bit)

### 最後が"..."にならないギリギリのURL長さ
最後が"..."にならないギリギリのURL長さは、 **10000** でした。

以下の画像のように、長さが10000のときは"..."になりません。
<img width="456" alt="Screen Shot 2018-10-21 at 9.32.18.png" src="https://qiita-image-store.s3.amazonaws.com/0/84451/cbb07613-4c48-5fe9-6924-4ce2c4fc5fea.png">


10001にすると、以下の画像のように"..."になります。
<img width="471" alt="Screen Shot 2018-10-21 at 9.33.40.png" src="https://qiita-image-store.s3.amazonaws.com/0/84451/c63cb2fd-8bd2-216a-a930-05655d640330.png">

ですが、`location.href.length`は10001になっているので、表示上の問題のようです。


長さ100万まで試してみましたが、JS上ではちゃんと100万取れました。

<img width="466" alt="Screen Shot 2018-10-21 at 9.43.43.png" src="https://qiita-image-store.s3.amazonaws.com/0/84451/7cebf8a9-119f-dd56-a976-094f03957c57.png">


ただし、長さ100万URLを<kbd>⌘</kbd>+<kbd>a</kbd>で全選択して、<kbd>⌘</kbd>+<kbd>c</kbd>でコピーして、<kbd>⌘</kbd>+<kbd>v</kbd>で同じChromeの別タブに貼り付けると長さが 32776　になりました。

<img width="458" alt="Screen Shot 2018-10-21 at 9.47.27.png" src="https://qiita-image-store.s3.amazonaws.com/0/84451/874075d6-98bc-b7ee-701e-0e23e8c35726.png">

ですが、タブの上で右クリックして、[Duplicate]でタブの複製をすると、長さ100万のURLとして複製できました。

<img width="401" alt="Screen Shot 2018-10-21 at 9.52.52.png" src="https://qiita-image-store.s3.amazonaws.com/0/84451/10359d5c-b64f-4564-95f4-64b0d3d5747c.png">


Chrome=>Chromeなら問題なくても、
Chrome=>クリップボード=>Chromeだと、うまくいかないってことでしょうか?...


また、長さ100万のURLをGoogle Chromeでブックマークすることは可能でした。ブックマークしたあと、開いてもちゃんと長さ100万ありました。



## Safari　（macOS）

### バージョン
Version 11.1.2 (12605.3.8.1)

### 表示されるの長さ限界
表示されるの長さ限界、4096 でした。

以下の画像が、URL欄の表示です。一番最後"r"になっています。10000のときにはの最後の文字は"t"なので、表示がおかしいことが分かります。コピペしてはかってみると、4096文字でした。
<img width="493" alt="Screen Shot 2018-10-21 at 12.30.50.png" src="https://qiita-image-store.s3.amazonaws.com/0/84451/b13a3327-0e55-ec87-9ce0-a4ab6d0b27fb.png">

これはあくまでもURLの表示の問題で、以下のようにJS側ではちゃんと長さが10000のURLとして値を取れています。
![Screen Shot 2018-10-21 at 12.26.47.png](https://qiita-image-store.s3.amazonaws.com/0/84451/719c7f28-d474-a26d-4309-3b4c0bb38302.png)

つまり、4096文字を超えるURLを開けても、その後にそのURLをコピペしてどこかで使おうとしても、適切にコピーできないことがわかります。

他の調査では長さ100万のURLが開ける検証したので、以下のように試してみてうまくJS側では値がとれていることがわかります。
![Screen Shot 2018-10-21 at 12.36.23.png](https://qiita-image-store.s3.amazonaws.com/0/84451/a259ce62-3edf-3809-8b1f-88361e2ff30e.png)


## Firefox　（macOS）

### バージョン
62.0.3 (64-bit)

### 長さの限界

限界はわかりませんでした。ただし10万以上でした。

以下の画像のようにURLの末尾も問題なく、長さ10万のURLが表示できました。
<img width="755" alt="Screen Shot 2018-10-21 at 10.54.59.png" src="https://qiita-image-store.s3.amazonaws.com/0/84451/ef3f6371-5f1f-97e0-0341-045d0240eb1b.png">

ただし、長さが263000　あたりから長いURLを打ち込んだ際に、以下のように後ろに変な空白ができるようになります。

<img width="490" alt="Screen Shot 2018-10-21 at 11.05.27.png" src="https://qiita-image-store.s3.amazonaws.com/0/84451/ede6a4db-7eaa-ac23-acdf-5a2ba5602834.png">

例えば、以下の画像のように長さが270000のURLを打ち込むと、さらに空白が大きくなるのがわかります。
<img width="495" alt="Screen Shot 2018-10-21 at 11.06.40.png" src="https://qiita-image-store.s3.amazonaws.com/0/84451/9068225b-5d3d-4050-394f-3767cd8091cb.png">

最後に変な空白ができますが、一応以下のように表示できました。
<img width="666" alt="Screen Shot 2018-10-21 at 11.08.02.png" src="https://qiita-image-store.s3.amazonaws.com/0/84451/acbf8738-c77f-ed1c-9288-64f7591cabd2.png">

どんどん値を大きくすると、この変なスペースも大きくなりました。ただし不思議なのは増やした数よりも極端にスペースの領域が小さいことです。

以下のようにスペース途中をコピーしてみると、"xyzab"という文字列がペーストできました（笑）
<img width="423" alt="Screen Shot 2018-10-21 at 11.10.47.png" src="https://qiita-image-store.s3.amazonaws.com/0/84451/137f552b-9b6b-d355-259e-1777eca07de7.png">

## Google Chrome (Windows 10)
（Windows 10はVirtual Box上で動いています）

### バージョン
70.0.3538.67

### 長さの限界

結果はmacOS版と変わりませんでした。OSによる差がないことは嬉しいことです。
証拠のスクリーンショットを載せます。

まず、以下のように、10000のときがギリギリ"..."が出ない長さです。
![VirtualBox_Windows-10-2nd_21_10_2018_11_36_27.png](https://qiita-image-store.s3.amazonaws.com/0/84451/e385e768-6b6d-4bf0-bf7d-a5ab0bd8f1a5.png)

以下のように、10001にすると、"..."はでますが、JS側では10001文字確認できます。
![VirtualBox_Windows-10-2nd_21_10_2018_11_36_45.png](https://qiita-image-store.s3.amazonaws.com/0/84451/1b927095-92e7-2358-e983-ce90c6220866.png)

以下のように、。100万にしてもJS側では文字を拾えています。
![VirtualBox_Windows-10-2nd_21_10_2018_11_38_35.png](https://qiita-image-store.s3.amazonaws.com/0/84451/6264e772-56ff-dbc8-85ef-e1bb9796ac39.png)

そして、macOS版でも起こったコピペすると、長さが32776になる問題も起こりました。

![VirtualBox_Windows-10-2nd_21_10_2018_11_39_09.png](https://qiita-image-store.s3.amazonaws.com/0/84451/f3b4bb78-d9fd-8a1c-8358-5ba84d3b8968.png)

なぜ　32776なのか不明です。「Google Chrome 32776」とかとググっても出てきませんでした。

macOS版同様、タブの複製を使うと長さ100万のURLも複製可能でした。

## Edge (Windows 10)
（Windows 10はVirtual Box上で動いています）

### URLの長さの上限

これは、他のサイトでも言われている通り、2083でした。

![VirtualBox_Windows-10-2nd_21_10_2018_11_54_09.png](https://qiita-image-store.s3.amazonaws.com/0/84451/9537e802-12b8-0801-b965-9ce13be4ab99.png)

他のブラウザと比べて極端に少ないですが、変な挙動などなく2083というのはいいと思いました。

## Chrome - Android

### バージョン

Chrome 69.0.3497.100

![Screenshot_20181021-102109.png](https://qiita-image-store.s3.amazonaws.com/0/84451/20df30d9-1226-28ce-f762-0f0e04742d05.png)


以下のように、長さ10000でも表示できました。
![Screenshot_20181021-101108.png](https://qiita-image-store.s3.amazonaws.com/0/84451/40faecdc-1b84-a876-7631-17d7838421f6.png)
（タブがタブっぽいのは、タブレットのChromeだからです）

以下の画像のように"..."も表示されません。画像はないですが、10001でも"..."は表示されませんでした。
![Screenshot_20181021-102006.png](https://qiita-image-store.s3.amazonaws.com/0/84451/48399bea-be5f-e626-e386-c7e1d5b1ec8c.png)

長さ10万をしようとしたら、コピペするときにタブレットがとまり、少しほっておくと応答がないので「Close」, [Wait]を選択する画面になったので調査できませんでした。何度か試しても同じ現象が発生したのでやめました。恐らくタブレットの問題ですが、できない端末の存在するということだけわかりました。（長さ5万を試しても良かったですがやってません。）

## Safari (iOS)

### iOSバージョン

11.4.1 (15G77)

###　長さの限界

限界はわかりませんでした。100万以上です。

以下は長さが100万のときのものです。コピペに少し時間がかかりましたが、うまく表示できました。
![IMG_2436.PNG](https://qiita-image-store.s3.amazonaws.com/0/84451/3a606115-ea18-6244-c767-3c2cdea11f8b.png)
(7桁の数が青くなるのは恐らくSafariの仕様です)

URLの表示が最後までできているか確認したかったのですが、カーソルを瞬時に最後に持っていく方法を知らないので未調査です。

ただし、macOSのSafariと同様に、長さ100万のURLをコピペして、もう一度開くと、長さが4096になってしまうので、健全に動くの4096以下だと思います。
![IMG_2440.PNG](https://qiita-image-store.s3.amazonaws.com/0/84451/0f279fde-4f36-83c2-60f1-e61bc3373db7.png)



## Google Chrome (iOS)

### バージョン

70.0.3538.60

###　長さの限界

限界はわかりませんでした。これも100万以上です。

以下が100万のときのものですが、うまく表示できていることがわかります。
![IMG_2438.PNG](https://qiita-image-store.s3.amazonaws.com/0/84451/7fe3b985-1b14-589a-5336-9932a775d1f3.png)

URLの表示が最後までできているか確認したかったのですが、iOS版Safariと同じ理由で確認してません。

そして、32776　なる問題が発生しました。長さ100万のURLをコピペして貼り付けると以下のようになりました。

![IMG_2439.PNG](https://qiita-image-store.s3.amazonaws.com/0/84451/4b695b24-79d1-ef74-d45c-dae1d1bf3a19.png)


## まとめ

今回の調査で、問題なく動いたときのURLの長さをまとめます。

| ブラウザ                   | 健全に動くURLの長さ | 備考                                                                                 |
|----------------------------|---------------------|--------------------------------------------------------------------------------------|
| Google Chrome (macOS)      | 32776以下           | 長さ100万でも開けましたが、URLをコピーすると32776になってしまいます                  |
| Safari (macOS)             | 4096以下            | 長さ100万でも開けましたが、URLをコピーすると4096になってしまいます                   |
| FireFox (macOS)            | 大体262000以下      | 長さ263000ぐらいからURLが最後まで表示されない状態になります                          |
| Google Chrome (Windows 10) | 32776以下           | 長さ100万でも開けましたが、URLをコピーすると32776になってしまいます                  |
| Edge (Windows 10)          | 2083以下            |                                                                                      |
| Google Chrome (Android)    | 10000以下           | もっと長くても大丈夫な可能性があります（タブレットの性能の問題調査を打ち切ったので） |
| Safari (iOS)               | 4096以下            | 長さ100万でも開けましたが、URLをコピーすると4096になってしまいます                   |
| Google Chrome (iOS)        | 32776以下           | 長さ100万でも開けましたが、URLをコピーすると32776になってしまいます                  |