Vérifier les URL de même origine | Tutoriel de codage JavaScript

Introduction

Dans ce laboratoire, nous allons explorer la manière de vérifier si deux URL sont de la même origine à l'aide de JavaScript. Nous utiliserons les propriétés URL.protocol et URL.host pour comparer le protocole et l'hôte des URL et déterminer s'ils appartiennent à la même origine ou non. C'est une compétence utile pour les développeurs web qui doivent assurer la sécurité de leurs applications web et prévenir les attaques de type cross-site scripting.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/SecurityGroup(["Security"]) javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic Concepts"]) 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{{"Vérifier les URL de même origine avec JavaScript"}} javascript/data_types -.-> lab-28441{{"Vérifier les URL de même origine avec JavaScript"}} javascript/arith_ops -.-> lab-28441{{"Vérifier les URL de même origine avec JavaScript"}} javascript/comp_ops -.-> lab-28441{{"Vérifier les URL de même origine avec JavaScript"}} javascript/obj_manip -.-> lab-28441{{"Vérifier les URL de même origine avec JavaScript"}} javascript/web_sec -.-> lab-28441{{"Vérifier les URL de même origine avec JavaScript"}} end

Vérifiez si deux URL sont de la même origine

Pour vérifier si deux URL sont de la même origine :

Ouvrez le Terminal/SSH et tapez node pour commencer à pratiquer la programmation.
Utilisez URL.protocol et URL.host pour vérifier si les deux URL ont le même protocole et le même hôte.

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

Créez deux objets URL avec les URL que vous souhaitez comparer.

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

Appelez la fonction isSameOrigin avec les deux objets URL en arguments pour obtenir une sortie booléenne.

isSameOrigin(origin, destination); // true

Vous pouvez également tester la fonction avec d'autres URL pour voir si elles sont de la même origine ou non.

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

Résumé

Félicitations ! Vous avez terminé le laboratoire sur les URL de même origine. Vous pouvez pratiquer d'autres laboratoires sur LabEx pour améliorer vos compétences.