JS 교차 도메인 문제에 대한 자세한 설명

JavaScript는 웹 개발에 종종 사용되는 프론트 엔드 동적 스크립팅 기술입니다. JavaScript에는 "동일한 오리핀 정책"이라는 매우 중요한 보안 제한이 있습니다. 이 전략은 JavaScript 코드에 액세스 할 수있는 페이지 컨텐츠에 중요한 제한 사항을 제시합니다. 즉, JavaScript는 포함 된 문서와 동일한 도메인에서만 콘텐츠에 액세스 할 수 있습니다.

JavaScript는 멀티 오프 타일 또는 멀티 윈도우 및 Ajax를 프로그래밍 할 때 특히 중요한 보안 전략입니다. 이 전략에 따르면 Baidu.com 아래 페이지에 포함 된 JavaScript 코드는 Google.com 도메인 이름으로 페이지 컨텐츠에 액세스 할 수 없습니다. 다른 하위 도메인 사이의 페이지조차 JavaScript 코드로 액세스 할 수 없습니다. Ajax에 대한 영향은 xmlhttprequest를 통해 구현 된 Ajax 요청이 다른 도메인에 요청을 제출할 수 없다는 것입니다. 예를 들어, ABC.example.com의 페이지는 ajax 요청을 def.example.com에 제출할 수 없습니다.

그러나 심층적 인 프론트 엔드 프로그래밍을 수행 할 때, 도메인 교차 작업이 필연적으로 필요하며, "동일한 오리핀 전략"은 너무 요구되는 것 같습니다. 이 기사는이 문제에 대한 도메인 전반에 필요한 일부 기술을 요약합니다.

아래에서 우리는 두 가지 상황에서 크로스 도메인 기술에 대해 논의합니다. 먼저 다른 하위 도메인의 도메인 교차 기술을 논의한 다음 완전히 다른 영역의 도메인 교차 도메인 기술에 대해 논의합니다.

(i) 다른 하위 도메인의 크로스 도메인 기술.

우리는 두 가지 질문에서 개별적으로 논의합니다. 첫 번째 질문은 다른 하위 도메인에서 JavaScript 호출을하는 방법입니다. 두 번째 질문은 AJAX 요청을 다른 하위 도메인에 제출하는 방법입니다.

example.com 도메인에 ABC.example.com 및 def.example.com에 두 가지 다른 하위 도메인이 있다고 가정하면 첫 번째 문제를 먼저 해결해 봅시다. 이제 JavaScript 함수를 정의하는 Def.example.com 아래에 페이지가 있다고 가정합니다.

코드 사본은 다음과 같습니다.

function funcindef () {

..... .....

}

ABC.example.com의 페이지에서 위의 기능을 호출하고 싶습니다. 우리가 논의하는 ABC.example.com 아래의 페이지가 iframe 형식으로 def.example.com 아래 페이지에 포함되어 있다고 가정 해 봅시다.

코드 사본은 다음과 같습니다.

window.top.funcindef ();

좋아, 우리는이 호출이 앞에서 언급 한 "동일한 오리핀 정책"에 의해 금지된다는 것을 알았으며 JavaScript 엔진은 직접 예외를 던질 것입니다.

위의 통화를 구현하기 위해 두 페이지의 도메인 속성을 수정하여 수행 할 수 있습니다. 예를 들어 ABC.example.com 및 def.example.com의 두 페이지 상단에 다음 JavaScript 코드 스 니펫을 추가 할 수 있습니다.

코드 사본은 다음과 같습니다.

<script type = "text/javaScript">

document.domain = "example.com";

</스크립트>

이러한 방식으로 두 페이지는 동일한 도메인이되고 이전 호출은 정상적으로 실행될 수 있습니다.

여기에 주목해야 할 것은 문서입니다. 페이지의 도메인 속성은 더 최상위 도메인 이름으로 만 설정할 수 있지만 (첫 번째 레벨 도메인 이름 제외) 현재 도메인 이름보다 더 깊은 하위 도메인 이름으로 설정할 수는 없습니다. 예를 들어, ABC.example.com의 페이지는 도메인 만 example.com으로 만 설정할 수 있으며 Sub.abc.example.com으로 설정할 수 없으며 물론 첫 번째 도메인 이름 Com으로 설정할 수 없습니다.

위의 예는 두 페이지가 Iframe 중첩 관계에 속하는 상황에 대해 설명합니다. 두 페이지가 열리고 관계가 열리면 원칙은 정확히 동일합니다.

두 번째 문제를 해결해 봅시다 : Ajax 요청을 다른 하위 도메인에 제출하는 방법.

일반적으로 다음과 유사한 코드를 사용하여 xmlhttprequest 객체를 만듭니다.

코드 사본은 다음과 같습니다.

공장 = [

function () {return new xmlhttprequest (); },

function () {return new ActiveXobject ( "msxml2.xmlhttp"); },

function () {return new ActiveXobject ( "microsoft.xmlhttp"); }

];

기능 newRequest () {

for (var i = 0; i <</span> 공장 .length; i ++) {

노력하다{

var 공장 = 공장 [i];

반환 공장 ();

} catch (e) {}

}

널 리턴;

}

위의 코드는 IE6 시리즈 브라우저와의 호환성에 대한 ActiveXobject를 나타냅니다. NewRequest 함수를 호출 할 때마다 방금 만든 Ajax 객체를 얻은 다음이 Ajax 객체를 사용하여 HTTP 요청을 보냅니다. 예를 들어, 다음 코드는 GET 요청을 ABC.example.com으로 보냅니다.

코드 사본은 다음과 같습니다.

var request = newRequest ();

request.open ( "get", "http://abc.example.com");

request.send (null);

위의 코드가 ABC.example.com 도메인 이름의 페이지에 포함되어 있다고 가정하면 GET 요청은 문제없이 정상적으로 성공적으로 전송 될 수 있습니다. 그러나 이제 Def.example.com에 요청을 보내는 경우 크로스 도메인 문제가 있으며 JavaScript 엔진은 예외를 발생시킵니다.

해결책은 CrossDomain.html이라고 가정 할 때 Def.example.com 도메인에 크로스 도메인 파일을 배치하는 것입니다. 그런 다음 이전 NewRequest 함수의 정의를이 크로스 도메인 파일로 이동하십시오. 마지막으로, 문서를 수정 한 이전의 관행과 마찬가지로 Domain 값을 수정하는 것과 마찬가지로 CrossDomain.html 파일 및 Abc.example.com 도메인에서 Ajax 호출 페이지 상단을 추가하십시오.

코드 사본은 다음과 같습니다.

<script type = "text/javaScript">

document.domain = "example.com";

</스크립트>

크로스 도메인 파일을 사용하기 위해 ABC.example.com 도메인에서 Ajax를 호출하는 페이지의 크로스 도메인 파일을 가리키는 숨겨진 iframe을 포함합니다.

[암호]

<iframe name = "xd_iframe"style = "display : none"src = "http://def.example.com.html"> </iframe>

현재 ABC.example.com 도메인 및 CrossDomain.html 아래의 페이지는 모두 동일한 도메인 (example.com)에 있습니다. ABC.example.com 도메인의 페이지에서 CrossDomain.html에서 NewRequest 함수를 호출 할 수 있습니다.

코드 사본은 다음과 같습니다.

var request = window.frames [ "xd_iframe"]. newRequest ();

이러한 방식으로 얻은 요청 객체는 http://def.example.com으로 http 요청을 보낼 수 있습니다.

(ii) 완전히 다른 도메인을 가진 크로스 도메인 기술.

예를 들어 최상위 도메인 이름이 다르면 example1.com과 example2.com 사이의 JavaScript를 통해 프론트 엔드에서 통신하려는 경우 필요한 기술이 더 복잡합니다.

다른 도메인의 크로스 도메인 기술을 설명하기 전에, 우리가 아래에 대해 이야기하고자하는 기술은 크로스 도메인이 크로스 도메인 문제의 특별한 경우이기 때문에 크로스 도메인의 이전 상황에도 적용 가능하다는 것을 먼저 분명히하겠습니다. 물론 올바른 상황에서 올바른 기술을 사용하면 더 나은 효율성과 안정성이 높아질 수 있습니다.

요컨대, 다양한 크로스 도메인 요구에 따라 크로스 도메인 기술을 다음 범주로 분류 할 수 있습니다.

1. JSONP 크로스 도메인 GET 요청

2. Iframe을 통한 크로스 도메인 구현

3. 플래시 크로스 도메인 HTTP 요청

4. Window.PostMessage

이 기사는 여기서 먼저 끝납니다. 위에서 언급 한 4 개의 크로스 도메인 기술을 자세히 소개 할 것입니다. 우리는 그것을 나중에 발표 할 것입니다!