同じオリジンの URL を確認する | JavaScript コーディングチュートリアル

はじめに

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

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic Concepts"]) javascript(("JavaScript")) -.-> javascript/SecurityGroup(["Security"]) javascript/BasicConceptsGroup -.-> javascript/variables("Variables") javascript/BasicConceptsGroup -.-> javascript/data_types("Data Types") javascript/BasicConceptsGroup -.-> javascript/arith_ops("Arithmetic Operators") javascript/BasicConceptsGroup -.-> javascript/comp_ops("Comparison Operators") javascript/BasicConceptsGroup -.-> javascript/obj_manip("Object Manipulation") javascript/SecurityGroup -.-> javascript/web_sec("Web Security Basics") subgraph Lab Skills javascript/variables -.-> lab-28441{{"JavaScript を使って同じオリジンの URL を確認する"}} javascript/data_types -.-> lab-28441{{"JavaScript を使って同じオリジンの URL を確認する"}} javascript/arith_ops -.-> lab-28441{{"JavaScript を使って同じオリジンの URL を確認する"}} javascript/comp_ops -.-> lab-28441{{"JavaScript を使って同じオリジンの URL を確認する"}} javascript/obj_manip -.-> lab-28441{{"JavaScript を使って同じオリジンの URL を確認する"}} javascript/web_sec -.-> lab-28441{{"JavaScript を使って同じオリジンの URL を確認する"}} end

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

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

ターミナル/SSH を開き、コーディングの練習を始めるために node と入力します。
URL.protocol と URL.host を使用して、両方の URL が同じプロトコルとホストを持っているかどうかを確認します。

const isSameOrigin = (origin, destination) =>
  origin.protocol === destination.protocol && origin.host === destination.host;

比較したい URL で 2 つの URL オブジェクトを作成します。

const origin = new URL("https://www.30secondsofcode.org/about");
const destination = new URL("https://www.30secondsofcode.org/contact");

2 つの URL オブジェクトを引数として isSameOrigin 関数を呼び出して、ブール値の出力を取得します。

isSameOrigin(origin, destination); // true

他の URL で関数をテストして、同じオリジンにあるかどうかを確認することもできます。

const other = new URL("https://developer.mozilla.org");
isSameOrigin(origin, other); // false

まとめ

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