JavaScriptでリンク先URLがhttp/httpsか確認する方法

JavaScriptで動的にリンクを生成する際に、DOM-based XSSを防ぐためにリンク先がhttpあるいはhttpsに限定されていることを確認したい場合がある。典型的には以下のようなコードとなる。

    var div, elm; 
    // 変数 url は攻撃者がコントロール可能な文字列
    if( url.match( /^https?:\/\// ) ){
        div = document.getElementById( "info" );
        elm = document.createElement( "a" );
        elm.setAttribute( "href", url );
        elm.appendChild( document.createTextNode( url ) );
        div.appendChild( elm );
    }

この場合、変数urlに「http://example.jp」や「https://example.jp」などが与えられたときにはA要素が生成されリンク先としてそれらのURLが設定され、「javascript:alert(1)」「vbscript:MsgBox 1」などの場合にはリンクは生成されず、DOM-based XSSを防ぐことができる。
ただし、このコードではurlには「http://」あるいは「https://」で始まる文字列であることが強制されるために、「/foo」のような文字列を与えて <a href="/foo"> のような相対URLのリンクを設定することができない。
このような場合に、与えられた文字列をパースして先頭部分にプロトコルらしきプレフィックスが含まれていなければ…のような処理を自分で書くことはあまりいい方法ではないのでどうしたものかと思案していたところ、malaさんから「elm.href = "javascript:"; elm.protocol でとれない？」と教えてもらった。A要素にprotocolプロパティがあるのも知らなかったので試してみたところ、以下のようなコードでメジャーなブラウザではうまくいくことがわかった。いくつかのブラウザではURLがhttpの相対リンクであってもelm.protocolが「:」や空文字になったりすることもあり、またURLが不正な場合にもelm.protocolが「:」や空文字になったりすることがある。ただし、不正なURLではクリックしてもDOM-based XSSは発生しないので特に問題はないと思われる。

    var div, elm; 
    // 変数 url は攻撃者がコントロール可能な文字列
    div = document.getElementById( "info" );
    elm = document.createElement( "a" );
    elm.setAttribute( "href", url );
    if( elm.protocol.match( /^https?:$/ ) || elm.protocol === ":" || elm.protocol === "" ){
        elm.appendChild( document.createTextNode( url ) );
        div.appendChild( elm );
    }

なお、A要素にはprotocolだけでなくhostやhostnameなどのプロパティもあるので、ChromeやFirefoxで new URL( url, location.href ); みたいに書いてたコードとほぼ同じことがIEでもできる。

相対パス解決したいときは大体これつかってますね、ブラウザの実装に頼る
DOMを信じろ！ (by mala)

各ブラウザでの様々なURLを設定した場合のA要素のprotocolの値については http://utf-8.jp/test/a-elm-protocol.html にまとめておく。