JS 크로스 도메인 문제에 대한 자세한 설명

JavaScript는 웹 개발에 자주 사용되는 프런트엔드 동적 스크립팅 기술입니다. JavaScript에는 "Same-Origin Policy"라는 매우 중요한 보안 제한 사항이 있습니다. 이 정책은 JavaScript 코드가 액세스할 수 있는 페이지 콘텐츠에 중요한 제한을 둡니다. 즉, JavaScript는 해당 콘텐츠가 포함된 문서와 동일한 도메인의 콘텐츠에만 액세스할 수 있습니다.

JavaScript 보안 전략은 Ajax 프로그래밍뿐만 아니라 다중 iframe 또는 다중 창 프로그래밍을 수행할 때 특히 중요합니다. 이 정책에 따르면 baidu.com 아래의 페이지에 포함된 JavaScript 코드는 google.com 도메인 이름 아래의 페이지 콘텐츠에 액세스할 수 없습니다. 심지어 서로 다른 하위 도메인 사이의 페이지도 JavaScript 코드를 통해 서로 액세스할 수 없습니다. Ajax에 미치는 영향은 XMLHttpRequest를 통해 구현된 Ajax 요청이 다른 도메인에 요청을 제출할 수 없다는 것입니다. 예를 들어 abc.example.com 아래의 페이지는 def.example.com 등에 Ajax 요청을 제출할 수 없습니다.

하지만 심층적인 프런트엔드 프로그래밍을 하다 보면 필연적으로 크로스 도메인 작업이 필요한 시점에서는 '동일 출처 정책'이 너무 가혹해 보입니다. 이 문서에서는 이 문제에 대해 크로스 도메인에 필요한 몇 가지 기술을 요약합니다.

다음으로 두 가지 상황에서 교차 도메인 기술을 논의합니다. 먼저 서로 다른 하위 도메인에서 교차 도메인 기술을 논의하고 완전히 다른 도메인에서 교차 도메인 기술을 논의합니다.

(1) 다양한 하위 도메인의 교차 도메인 기술.
우리는 두 가지 질문을 별도로 논의할 것입니다. 첫 번째 질문은 다양한 하위 도메인에서 JavaScript 호출을 수행하는 방법이고, 두 번째 질문은 Ajax 요청을 다른 하위 도메인에 제출하는 방법입니다.

먼저 첫 번째 문제를 해결해 보겠습니다. example.com 도메인 아래에 abc.example.com과 def.example.com이라는 두 개의 서로 다른 하위 도메인이 있다고 가정해 보겠습니다. 이제 def.example.com 아래에 JavaScript 함수를 정의하는 페이지가 있다고 가정합니다.

코드 복사 코드는 다음과 같습니다.

함수 funcInDef() {

.....

}

abc.example.com 아래의 페이지에서 위 함수를 호출하려고 합니다. 논의하려는 abc.example.com 아래의 페이지가 iframe 형식으로 def.example.com 아래의 페이지에 포함되어 있다고 가정합니다. 이 경우 iframe에서 다음 호출을 시도할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

window.top.funcInDef();

좋아요, 앞서 언급한 "동일 출처 정책"에 의해 이 호출이 금지되며 JavaScript 엔진이 직접 예외를 발생시키는 것으로 나타났습니다.

위 호출을 구현하려면 두 페이지의 도메인 속성을 수정하면 됩니다. 예를 들어 abc.example.com 및 def.example.com 위의 두 페이지 상단에 다음 JavaScript 코드 조각을 추가할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

JS 크로스 도메인 문제에 대한 자세한 설명_기본 지식