Vérifier les URL de même origine avec JavaScript

Beginner

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

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.

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

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

  1. Ouvrez le Terminal/SSH et tapez node pour commencer à pratiquer la programmation.

  2. 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;
  1. 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");
  1. Appelez la fonction isSameOrigin avec les deux objets URL en arguments pour obtenir une sortie booléenne.
isSameOrigin(origin, destination); // true
  1. 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.