Help us understand the problem. What is going on with this article?

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

調査内容

各種OSの各種ブラウザでの長いフラグメントのあるURLの上限を調べます。
URLを長くしていくために、URLのフラグメント1(#以降のやつです)を使いました。
この文章で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の長さが表示されます。

Screen Shot 2018-10-21 at 9.27.47.png

(長さ100のURL: https://nwtgck.github.io/url-length-getter-web/#abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz

このツールを使う理由

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

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

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のときは"..."になりません。
Screen Shot 2018-10-21 at 9.32.18.png

10001にすると、以下の画像のように"..."になります。
Screen Shot 2018-10-21 at 9.33.40.png

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

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

Screen Shot 2018-10-21 at 9.43.43.png

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

Screen Shot 2018-10-21 at 9.47.27.png

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

Screen Shot 2018-10-21 at 9.52.52.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文字でした。
Screen Shot 2018-10-21 at 12.30.50.png

これはあくまでもURLの表示の問題で、以下のようにJS側ではちゃんと長さが10000のURLとして値を取れています。
Screen Shot 2018-10-21 at 12.26.47.png

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

他の調査では長さ100万のURLが開ける検証したので、以下のように試してみてうまくJS側では値がとれていることがわかります。
Screen Shot 2018-10-21 at 12.36.23.png

Firefox (macOS)

バージョン

62.0.3 (64-bit)

長さの限界

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

以下の画像のようにURLの末尾も問題なく、長さ10万のURLが表示できました。
Screen Shot 2018-10-21 at 10.54.59.png

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

Screen Shot 2018-10-21 at 11.05.27.png

例えば、以下の画像のように長さが270000のURLを打ち込むと、さらに空白が大きくなるのがわかります。
Screen Shot 2018-10-21 at 11.06.40.png

最後に変な空白ができますが、一応以下のように表示できました。
Screen Shot 2018-10-21 at 11.08.02.png

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

以下のようにスペース途中をコピーしてみると、"xyzab"という文字列がペーストできました(笑)
Screen Shot 2018-10-21 at 11.10.47.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

以下のように、10001にすると、"..."はでますが、JS側では10001文字確認できます。
VirtualBox_Windows-10-2nd_21_10_2018_11_36_45.png

以下のように、。100万にしてもJS側では文字を拾えています。
VirtualBox_Windows-10-2nd_21_10_2018_11_38_35.png

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

VirtualBox_Windows-10-2nd_21_10_2018_11_39_09.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

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

Chrome - Android

バージョン

Chrome 69.0.3497.100

Screenshot_20181021-102109.png

以下のように、長さ10000でも表示できました。
Screenshot_20181021-101108.png
(タブがタブっぽいのは、タブレットのChromeだからです)

以下の画像のように"..."も表示されません。画像はないですが、10001でも"..."は表示されませんでした。
Screenshot_20181021-102006.png

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

Safari (iOS)

iOSバージョン

11.4.1 (15G77)

 長さの限界

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

以下は長さが100万のときのものです。コピペに少し時間がかかりましたが、うまく表示できました。
IMG_2436.PNG
(7桁の数が青くなるのは恐らくSafariの仕様です)

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

ただし、macOSのSafariと同様に、長さ100万のURLをコピペして、もう一度開くと、長さが4096になってしまうので、健全に動くの4096以下だと思います。
IMG_2440.PNG

Google Chrome (iOS)

バージョン

70.0.3538.60

 長さの限界

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

以下が100万のときのものですが、うまく表示できていることがわかります。
IMG_2438.PNG

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

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

IMG_2439.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になってしまいます

  1. JavaScriptでlocation.hashで取れるやつです。  

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away