(ページにアクセスする)URL にはパラメータを付けることができます。以下のように URL の後ろに「?」を追加して名前と値を指定します。
https://ドメイン/ページ.html?name=value
アクセスするときに名前と値を指定することでページ表示時に JavaScript で動作・表示を分ける場合などに使えます。
本記事では、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")に変換する
まとめ:JavaScript で URL パラメーターを取得する方法
本記事では、JavaScript で URL パラメーターを取得する方法と、不正攻撃に対する注意点を紹介しました。
URL パラメーターはアクセス元の条件により簡単に動作を変えられる有効な方法の一つです。WordPress で作ったサイトでも JavaScript を追加して使えるため弁です。一方、JavaScript でパラメーターを取り扱う上での注意点もありますので適切に利用していきましょう。
40代・50代「会社員におすすめ」の在宅でできる副業5選
-
40代・50代「会社員におすすめ」の在宅でできる副業5選(初心者でもできる)
40代、50代だからこそ気が付く、不安に思う将来設計、しかし今から大きなチャレンジは難しい。投資もリスクが多い。いまこそやってみたいのが「副業」です。本記事では40代、50代におすすめの副業5選を紹介します。
続きを見る
20代・30代「専業主婦におすすめ」の在宅でできる内職・副業3選
-
20代・30代「専業主婦におすすめ」の在宅でできる内職・副業3選(初心者でもできる)
20代、30代の主婦にとって、これからの人生設計、お金の心配は少なからずありますね。20代、30代の主婦が不安に思うお金の問題を少しでも解決するべく、初期投資が無い(または少ない)主婦におすすめの副業ができれば安心ですね。記事では、20代、30代専業主婦におすすめの副業3選を紹介します。
続きを見る
地方がチャンスのおすすめ副業を紹介!
-
【2024年チャンス】地方でノマドで働ける。おすすめ在宅副業を紹介!快適な移住先も紹介します
都会は住みにくい!地方の方が自然もあり、ちょうど規模の街で素敵に暮らすのは人生設計として最高ですね。しかし地方は本業の給料が低いのがネック、そこで是非お勧めしたいのがインターネットでできる副業です。本記事では、地方で快適に暮らす!おすすめ副業を紹介します。ゆるーくまったり人生過ごしたいですね。
続きを見る
WordPress のおすすめテーマ
あなたのブログを強力にアピールし、読者を惹きつける、
魅力的なウェブサイトを手軽に作りたいですか?
そんな方に オススメのテーマが「AFFINGER」 です。
「AFFINGER」テーマを使えば、SEOに強く、集客力がアップし、
上級者でも満足できる、魅力的なウェブサイトが作れます。
ブログアフィリエイトを本気で戦うなら、「AFFINGER」の威力を体感してください。
\ WordPress のおすすめテーマ「アフィンガー」を詳しく見る /
Presented By Boon Boon Blog .Com
広告の設置・収入について
当サイトは Amazonのアソシエイトとして、適格販売により収入を得ています。
当サイトは Google アドセンスを利用し、広告により収入を得ています。
当サイトは ASP が提供するサービスを利用し、広告、適格販売により収入を得ています。