【超簡単】JavaScript で URL パラメーターを取得する方法（WordPress でも使える）

（ページにアクセスする）URL にはパラメータを付けることができます。以下のように URL の後ろに「？」を追加して名前と値を指定します。

https://ドメイン/ページ.html?name=value

アクセスするときに名前と値を指定することでページ表示時に JavaScript で動作・表示を分ける場合などに使えます。

本記事では、JavaScript で URL パラメーターを取得する方法を解説します。

＼ブログ副業を詳しく見たい方はこちらをクリックしてください／

1 JavaScript で URL パラメーターを取得する方法
2 JavaScript で URL パラメーターの値で表示を切り替えるサンプル
3 脆弱性（HTTPパラメータによる攻撃）に注意する・対策する
4 まとめ：JavaScript で URL パラメーターを取得する方法

JavaScript で URL パラメーターを取得する方法

実際に URL パラメータを取得するコードです。

※ ”testname" 名のパラメータ値を取得しています。

var varUrlParamater = window.location.search;
var varParamaters = new URLSearchParams(varUrlParamater);
var varValue1 = varParamaters.get('testname');

// パラメーターを表示する
alert(varValue1);

「window.location.search」と「URLSearchParams」でオブジェクトを作成し、get メソッドで（名前に一致する）値を取得します。

JavaScript で URL パラメーターの値で表示を切り替えるサンプル

実際に URL パラメータで表示を切り替えるサンプルです。

WordPress で使う場合は、「カスタム HTML」ブロックを使って、以下のコードを張り付けてください。

<div>
   <span style="font-size : 26px">パラメーター testname の値は</span>
   <span id="myIdDisplayValue" style="font-size : 26px; color : red; font-weight : bold"></span>
   <span style="font-size : 26px"> です。</span>
</div>

<script>
    var varUrlParamater = window.location.search;
    var varParamaters = new URLSearchParams(varUrlParamater);
    var varValue1 = varParamaters.get('testname');

    var varDisplayText;

    if ( varValue1 == "1" ) {
        varDisplayText = "[1]";
    } else {
        varDisplayText = "[1] 以外";
    }

    document.getElementById("myIdDisplayValue").innerText = varDisplayText; 
</script>

URL の末尾に「?testname=1」を付けると「1」を、それ以外では、「1 以外」と画面上に表示します。

脆弱性（HTTPパラメータによる攻撃）に注意する・対策する

URL パラメータはとても便利な反面、他者がURLを書き換えてリクエストできるため、思わぬ不正な動作（攻撃）を受ける場合があるので注意が必要です。

「testname=1」について判定する場合、他者が「testname=xxxxxx」のように意図せぬ値に書き換えてURLを作成し、リクエストすることができます。xxxxxx の部分に全く別の不正な値を指定したり、時には HTML や JavaScript のコードを埋め込んで全く別の表示・動作をさせることも考えられます。

不正攻撃の例

http://(ドメイン)/?testname=<script>不正動作を目的とした JavaScript を書く</script>

不正攻撃の最も基本的な対策例です。

指定されたパラメーター値に対して、動作に必要な値のみ判定して処理を記載する。
パラメーター値をそのまま無条件で利用する・表示するコードにはしない
ウェブページの表示に影響する特別な記号文字（「<」、「>」、「&」等）を値として扱う場合（表示する場合）は表示可能なコード（"&#xx"）に変換する

ポイント

脆弱性対策は日々進化しているので、最新の情報を確認し適切に処理するようにしてください。

WordPress のお役立ちテクニックはこちら

まとめ：JavaScript で URL パラメーターを取得する方法

本記事では、JavaScript で URL パラメーターを取得する方法と、不正攻撃に対する注意点を紹介しました。

URL パラメーターはアクセス元の条件により簡単に動作を変えられる有効な方法の一つです。WordPress で作ったサイトでも JavaScript を追加して使えるため弁です。一方、JavaScript でパラメーターを取り扱う上での注意点もありますので適切に利用していきましょう。

40代・50代「会社員におすすめ」の在宅でできる副業５選

: 40代・50代「会社員におすすめ」の在宅でできる副業５選（初心者でもできる）

４０代、５０代だからこそ気が付く、不安に思う将来設計、しかし今から大きなチャレンジは難しい。投資もリスクが多い。いまこそやってみたいのが「副業」です。本記事では４０代、５０代におすすめの副業５選を紹介します。

続きを見る

20代・30代「専業主婦におすすめ」の在宅でできる内職・副業３選

: 20代・30代「専業主婦におすすめ」の在宅でできる内職・副業３選（初心者でもできる）

２０代、３０代の主婦にとって、これからの人生設計、お金の心配は少なからずありますね。２０代、３０代の主婦が不安に思うお金の問題を少しでも解決するべく、初期投資が無い（または少ない）主婦におすすめの副業ができれば安心ですね。記事では、２０代、３０代専業主婦におすすめの副業３選を紹介します。

続きを見る

地方がチャンスのおすすめ副業を紹介！

: 【2024年チャンス】地方でノマドで働ける。おすすめ在宅副業を紹介！快適な移住先も紹介します

都会は住みにくい！地方の方が自然もあり、ちょうど規模の街で素敵に暮らすのは人生設計として最高ですね。しかし地方は本業の給料が低いのがネック、そこで是非お勧めしたいのがインターネットでできる副業です。本記事では、地方で快適に暮らす！おすすめ副業を紹介します。ゆるーくまったり人生過ごしたいですね。

続きを見る