JavaScript_javascript 기술의 두 가지 도메인 간 기술에 대한 포괄적인 소개

이 정책은 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 함수를 정의하는 페이지가 있다고 가정합니다.

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

function funcInDef() {
.....
}

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

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

window.top.funcInDef();

알겠습니다. 이 호출은 앞서 언급한 "동일 출처 정책"에 의해 금지되며 JavaScript 엔진은 직접 예외를 발생시킵니다.
위 호출을 구현하려면 두 페이지의 도메인 속성을 수정하면 됩니다. 예를 들어 abc.example.com 및 def.example.com 위의 두 페이지 상단에 다음 JavaScript 코드 조각을 추가할 수 있습니다.

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

document.domain = "example.com";

이렇게 하면 두 페이지가 동일한 도메인이 되어 이전 호출이 정상적으로 실행될 수 있습니다.

여기서 한 가지 주의할 점은 페이지의 document.domain 속성은 상위 도메인 이름(1차 도메인 이름 제외)으로만 설정할 수 있고 하위 도메인으로 설정할 수 없다는 것입니다. 현재 도메인 이름보다 더 깊습니다. 예를 들어, abc.example.com 페이지는 도메인을 example.com으로만 설정할 수 있고 sub.abc.example.com은 설정할 수 없으며 물론 첫 번째 수준 도메인 이름인 com으로 설정할 수는 없습니다.

위의 예에서는 두 페이지가 iframe 중첩 관계에 속하는 경우를 설명합니다. 두 페이지가 열린 관계와 열린 관계를 갖는 경우 원리는 완전히 동일합니다.

두 번째 문제인 Ajax 요청을 다른 하위 도메인에 제출하는 방법을 해결해 보겠습니다.
일반적으로 XMLHttpRequest 객체를 생성하기 위해 다음과 유사한 코드를 사용합니다.

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

factories = [function() {
return new XMLHttpRequest();
},
function() {
return new ActiveXObject("Msxml2.XMLHTTP");
},
function() {
return new ActiveXObject("Microsoft.XMLHTTP");
}];
function newRequest() {
for (var i = 0; i & lt;factory.length; i ) {
try {
var Factory = Factory[i];
return Factory();
} catch(e) {}
}
null을 반환합니다.
}

위 코드는 IE6 시리즈 브라우저와의 호환성을 위해 ActiveXObject를 참조합니다. newRequest 함수를 호출할 때마다 새로 생성된 Ajax 객체를 얻은 다음 이 Ajax 객체를 사용하여 HTTP 요청을 보냅니다. 예를 들어, 다음 코드는 abc.example.com에 GET 요청을 보냅니다.

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

var request = newRequest();
request.open("GET", "http://abc.example.com" );
request.send(null);

위의 코드가 abc.example.com 도메인 이름의 페이지에 포함되어 있다고 가정하면 문제 없이 GET 요청이 성공적으로 전송될 수 있습니다. 그러나 이제 def.example.com으로 요청을 보내면 도메인 간 문제가 발생하고 JavaScript 엔진에서 예외가 발생합니다.
해결책은 교차 도메인 파일을 def.example.com 도메인 아래에 배치하고, 이 파일이 crossdomain.html이라고 가정한 다음 이전 newRequest 함수의 정의를 이 교차 도메인 파일로 이동하고 마지막으로 수정하는 것입니다. 문서의 도메인 값은 abc.example.com 도메인 아래 Ajax를 호출하는 페이지와 crossdomain.html 상단에

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

document.domain = "example.com";

cross- 도메인 파일을 사용하려면 abc.example.com 도메인 아래에 Ajax를 호출합니다. 페이지에 크로스 도메인 파일을 가리키는 숨겨진 iframe을 삽입합니다. 예:

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