URL のフラグメント部分 (# の後など) に通常とは異なる文字が含まれている場合、どのように (パーセント) エスケープする必要がありますか? ブラウザがこれを処理する方法について一貫した答えを見つけることができません。これはおそらくそれらを持たない正当な理由ですが、「正しい」答えが何であるかを知りたいです。
私のテストでは、まったくエスケープしないことが示唆されているようですが、これはリンクをたどる場合にのみ信頼でき、ブラウザのアドレスバーに貼り付ける場合には信頼できない.
添付のように小さなウェブページを書きました。次に、次のリンクをさまざまなブラウザーに貼り付けました。ページの「移動」リンクは、リンクを貼り付けるのではなく、リンクをクリックしたときに何が起こるかを確認するためにあります (一部のブラウザーでは異なるようです)。
http://www.frankieandshadow.com/test.html/?new=1# {# &}%7B%23%20%26%7D
(URL に対する stackoverlow のパターン マッチが気に入らないことに気付きました。行全体を意図しています。また、そこに手がかりがあるかもしれません!)
Chromeは、いかなる種類のエスケープも行わないように見え、一貫して生成されます:
##{# &}%7B%23%20%26%7D
Firefoxは、エスケープされた文字のすべてではなく一部を、エスケープされていない同等の文字に置き換えてから、
##{# &}{# &}
これは、リンクをたどっても同じです
Safari (PC 上) は反対のことを行います: ペースト時にエンコードされていない異常な文字をエンコードしてから、
#%7B%23%20&%7D%7B%23%20%26%7D
しかし、リンクをたどることは異なり、
##{# &}%7B%23%20%26%7D
IE9は、驚くべきことに、Chrome と同じように動作します
IE7は、貼り付け時に実際のスペースを %20 に置き換えますが、それ以外の場合は URL をそのままにして、
#{#%20&}%7B%23%20%26%7D
リンクをクリックすると、
##{# &}%7B%23%20%26%7D
<html>
<head>
<title>test</title>
<script type="text/javascript">
function wibble() {
document.getElementById("wobble").innerHTML =
location.hash.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">");
}
</script>
</head>
<body onload='wibble()'>
<div id='wobble'></div>
<a href='/test.html?new=1#{# &}%7B%23%20%26%7D'>go</a>
</body>
</html>