LabEx
로그인무료 가입

JavaScript 를 사용하여 동일 오리진 URL 확인하기

Beginner

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

소개

이 랩에서는 JavaScript 를 사용하여 두 URL 이 동일한 오리진 (origin) 에 있는지 확인하는 방법을 살펴봅니다. URL.protocol 및 URL.host 속성을 사용하여 URL 의 프로토콜과 호스트를 비교하고, 동일한 오리진에 속하는지 여부를 결정합니다. 이는 웹 애플리케이션의 보안을 보장하고 크로스 사이트 스크립팅 (cross-site scripting) 공격을 방지해야 하는 웹 개발자에게 유용한 기술입니다.

두 URL 이 동일한 오리진에 있는지 확인하기

두 URL 이 동일한 오리진에 있는지 확인하려면 다음 단계를 따르세요.

  1. 터미널/SSH 를 열고 node를 입력하여 코딩 연습을 시작합니다.

  2. URL.protocol 및 URL.host를 사용하여 두 URL 이 동일한 프로토콜과 호스트를 갖는지 확인합니다.

const isSameOrigin = (origin, destination) =>
  origin.protocol === destination.protocol && origin.host === destination.host;
  1. 비교하려는 URL 을 사용하여 두 개의 URL 객체를 생성합니다.
const origin = new URL("https://www.30secondsofcode.org/about");
const destination = new URL("https://www.30secondsofcode.org/contact");
  1. 두 URL 객체를 인수로 사용하여 isSameOrigin 함수를 호출하여 부울 (boolean) 출력을 얻습니다.
isSameOrigin(origin, destination); // true
  1. 다른 URL 로 함수를 테스트하여 동일한 오리진에 있는지 확인할 수도 있습니다.
const other = new URL("https://developer.mozilla.org");
isSameOrigin(origin, other); // false

요약

축하합니다! 동일 오리진 URL 랩을 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.