【JS応用｜実務向け】URL APIを使いこなす：URL.prototype.protocolでスキームを安全に制御する方法

1. 導入：なぜprotocolの理解が重要なのか

フロントエンド開発において、外部APIとの通信やリンク生成を行う際、URLの「スキーム（http, https, mailto, telなど）」を正しく判定・制御することは極めて重要です。特に、ユーザー入力を含むURLを扱う場合、意図しないスキーム（javascript:など）によるセキュリティリスク（XSS）を回避しなければなりません。URL.prototype.protocolを利用することで、正規表現による煩雑な文字列操作を避け、ブラウザ標準のAPIで安全かつ確実にスキームを操作・検証できるようになります。

2. 基礎知識：URLインターフェースとは

URLインターフェースは、URLを構成する各要素（プロトコル、ホスト、パス、クエリなど）を個別のプロパティとして提供する仕組みです。その中でも「protocol」プロパティは、URLのスキーム部分（末尾のコロンを含む）を文字列として取得・設定できます。

例えば、「https://example.com」というURLであれば、protocolは「https:」を返します。これを利用することで、URL全体をパースしなくても、特定のスキームが含まれているか、あるいは特定のスキームに強制的に変換するといった処理が直感的に行えます。

3. 実装・解決策：安全なスキーム判定と変換

URLオブジェクトを生成し、protocolプロパティにアクセスすることで、動的なURL操作が可能です。特に、セキュリティを考慮した「特定のスキームのみを許可する」ホワイトリスト方式の実装において、このプロパティは強力な武器となります。

4. サンプルプログラム

以下は、入力されたURLが安全なスキーム（httpまたはhttps）であるかを検証し、必要に応じて強制的にhttpsに書き換える実用的な関数です。

/

URLのプロトコルを検証し、httpsに強制変換する関数
@param {string} urlString 
@returns {string|null} 安全なURL、または無効な場合はnull

 /
function sanitizeAndSecureUrl(urlString) {
  try {
    const url = new URL(urlString);

    // 許可するプロトコルのリスト
    const allowedProtocols = ['http:', 'https:'];

    // プロトコルが許可されているかチェック
    if (!allowedProtocols.includes(url.protocol)) {
      console.warn('許可されていないプロトコルです:', url.protocol);
      return null;
    }

    // httpsに強制変換（httpだった場合もhttpsにする）
    url.protocol = 'https:';

    return url.toString();
  } catch (e) {
    // URLとしてパースできない不正な形式の場合
    console.error('無効なURL形式です:', e.message);
    return null;
  }
}

// 動作確認
console.log(sanitizeAndSecureUrl('http://example.com')); // 結果: https://example.com/
console.log(sanitizeAndSecureUrl('javascript:alert(1)')); // 結果: null (安全にブロック)

5. 応用・注意点：現場での落とし穴

注意点1：プロトコルの末尾のコロン
URL.prototype.protocolから取得される値には、必ず「:」が含まれます。比較を行う際は、’https’ではなく’https:’と記述する必要があるため、この点はバグの温床になりがちです。

注意点2：相対URLへの対応
new URL()の引数に相対パス（例: ‘/path/to/page’）を渡すと、ベースURLがない場合はエラーになります。相対パスを扱う場合は、第二引数にベースURL（origin）を指定してインスタンス化するようにしてください。

応用：セキュリティの強化
外部から受け取ったURLをDOMのhref属性に設定する際は、単にprotocolをチェックするだけでなく、可能な限り`new URL()`でパースし、ドメインのホワイトリスト化と併用することで、より堅牢なセキュリティ対策が可能となります。