LabEx
ログイン登録

JavaScript を使って同じオリジンの URL を確認する

Beginner

This tutorial is from open-source community. Access the source code

はじめに

この実験では、JavaScript を使って 2 つの URL が同じオリジンにあるかどうかを確認する方法を探ります。URL のプロトコルとホストを比較し、同じオリジンに属するかどうかを判断するために、URL.protocol と URL.host プロパティを使用します。これは、Web アプリケーションのセキュリティを確保し、クロスサイトスクリプティング攻撃を防止する必要がある Web 開発者にとって役立つスキルです。

2 つの URL が同じオリジンにあるかどうかを確認する

2 つの URL が同じオリジンにあるかどうかを確認するには：

  1. ターミナル/SSH を開き、コーディングの練習を始めるために node と入力します。

  2. URL.protocol と URL.host を使用して、両方の URL が同じプロトコルとホストを持っているかどうかを確認します。

const isSameOrigin = (origin, destination) =>
  origin.protocol === destination.protocol && origin.host === destination.host;
  1. 比較したい URL で 2 つの URL オブジェクトを作成します。
const origin = new URL("https://www.30secondsofcode.org/about");
const destination = new URL("https://www.30secondsofcode.org/contact");
  1. 2 つの URL オブジェクトを引数として isSameOrigin 関数を呼び出して、ブール値の出力を取得します。
isSameOrigin(origin, destination); // true
  1. 他の URL で関数をテストして、同じオリジンにあるかどうかを確認することもできます。
const other = new URL("https://developer.mozilla.org");
isSameOrigin(origin, other); // false

まとめ

おめでとうございます！あなたは同じオリジンの URL の実験を完了しました。あなたのスキルを向上させるために、LabEx でさらに実験を行って練習することができます。