js의 4가지 실용적인 크로스 도메인 방법에 대한 자세한 설명

js의 여러 실용적인 크로스 도메인 방법의 원리에 대한 자세한 설명

여기에서 언급된 js 크로스 도메인은 ajax를 사용하여 다른 도메인에 사용하는 등 js를 통해 다른 도메인 간의 데이터 전송 또는 통신을 의미합니다. 데이터를 요청하거나 js를 통해 페이지 내 다른 도메인의 프레임(iframe)에서 데이터를 얻습니다. 프로토콜, 도메인 이름 또는 포트가 다르면 서로 다른 도메인으로 간주됩니다.

다음 표는 store.company.com/dir/page.html과 관련된 상동성 탐지 결과를 보여줍니다.

교차 도메인 문제를 해결하려면 문제가 발생하면 다음과 같은 방법을 사용할 수 있습니다.

1. jsonp를 통한 도메인 간

js에서는 XMLHttpRequest를 직접 사용하여 다른 도메인의 데이터를 요청할 때 아니오입니다. 그러나 페이지의 다른 도메인에서 js 스크립트 파일을 도입하는 것이 가능하며 jsonp는 이를 달성하기 위해 이 기능을 사용합니다.

예를 들어 a.html 페이지가 있고 그 안에 있는 코드는 다른 도메인에서 json 데이터를 얻기 위해 ajax를 사용해야 합니다. json 데이터 주소가 http://example.com/이라고 가정합니다. data.php, a.html의 코드는 다음과 같습니다.

관례적으로 데이터를 얻기 위해 주소 뒤에 콜백 매개변수가 있는 것을 볼 수 있습니다. 이 매개변수 이름이 사용되지만, 사용하면 다른 모든 항목에도 동일하게 적용됩니다. 물론, 데이터를 얻기 위한 jsonp 주소 페이지가 귀하의 통제 하에 있지 않다면, 데이터를 제공하는 당사자가 지정한 형식에 따라 운영해야 합니다.

js 파일로 도입되기 때문에 http://example.com/data.php는 실행 가능한 js 파일을 반환해야 하므로 이 페이지의 php 코드는 다음과 같을 수 있습니다.

해당 페이지의 최종 출력 결과는 다음과 같습니다.

그래서 http://example.com/data를 통해 js 파일을 얻었습니다. by php?callback=dosomething 은 이전에 정의한 dosomething 함수이고, 해당 매개변수는 필요한 json 데이터이므로 도메인 전체에서 필요한 데이터를 얻을 수 있습니다.

이렇게 하면 jsonp의 원리가 매우 명확해집니다. js 파일이 성공적으로 로드된 후 url 매개변수에 지정된 함수를 실행하고 다음을 사용합니다. 매개변수로 필요한 json 데이터가 전달됩니다. 따라서 jsonp에는 서버 측 페이지의 해당 협력이 필요합니다.

jsonp 크로스 도메인의 원리를 알고 나면 스크립트 태그를 수동으로 작성할 필요 없이 js를 사용하여 크로스 도메인 작업을 위한 스크립트 태그를 동적으로 생성할 수 있습니다. 페이지에서 jquery를 사용하는 경우 캡슐화된 메서드를 통해 jsonp 작업을 쉽게 수행할 수 있습니다.

스크립트 태그를 수동으로 삽입하고 콜백 함수를 정의할 필요가 없다는 점만 제외하면 원칙은 동일합니다. jquery는 callback=?의 물음표를 대체하는 전역 함수를 자동으로 생성한 다음 데이터를 얻은 후 자동으로 이를 삭제합니다. 실제로는 임시 프록시 함수 역할을 합니다. $.getJSON 메서드는 크로스 도메인인지 자동으로 확인합니다. 그렇지 않은 경우 일반 ajax 메서드를 호출하고, 크로스 도메인인 경우 js 파일을 비동기적으로 로드하는 형태로 jsonp 콜백 함수를 호출합니다.

2. document.domain을 수정하여 하위 도메인을 교차합니다.

브라우저에는 동일 출처 정책이 있으며, 그 제한 중 하나는 첫 번째 방법에서 말한 것과 같습니다. ajax 메소드를 통해 다양한 소스로부터 문서를 요청합니다. 두 번째 제한은 js가 브라우저의 다른 도메인에 있는 프레임 간에 상호 작용할 수 없다는 것입니다. 한 가지 설명해야 할 점은 서로 다른 프레임워크(아버지와 아들 또는 동료)가 서로의 창 개체를 얻을 수 있다는 것입니다. 그러나 성가신 점은 얻은 창 개체의 속성과 메서드를 사용할 수 없다는 것입니다(HTML5의 postMessage 메서드는 예외이며 ie6과 같은 일부 브라우저에서는 top 및 parent와 같은 몇 가지 속성을 사용할 수도 있습니다. 간단히 말해서 거의 쓸모 없는 창 개체만 가져오는 것으로 생각할 수 있습니다. 예를 들어, 주소가 http://www.example.com/a.html인 페이지가 있습니다. , 이 페이지에 iframe이 있고 해당 소스는 http://example.com/b.html입니다. 분명히 이 페이지와 그 안에 있는 iframe은 서로 다른 도메인에 있으므로 페이지에 js 코드를 쓸 수 없습니다. iframe에서 항목 가져오기:

이때 document.domain은 http://www.example.com/a.html만 추가하면 됩니다. http://example.com/b.html 두 페이지의 document.domain을 동일한 도메인 이름으로 설정하면 됩니다. 하지만 document.domain의 설정은 제한되어 있습니다. document.domain은 자체 도메인이나 상위 도메인으로만 설정할 수 있으며 기본 도메인은 동일해야 합니다. 예: a.b.example.com에 있는 문서의 document.domain을 a.b.example.com, b.example.com으로 설정할 수 있습니다. , example.com이지만 현재 도메인의 하위 도메인이기 때문에 c.a.b.example.com으로 설정할 수 없고, 기본 도메인이 더 이상 동일하지 않기 때문에 baidu.com으로 설정할 수도 없습니다.

http://www.example.com/a.html 페이지에서 document.domain 설정:

http://example 페이지에서 Document.domain도 com/b.html에 설정되어 있으며 이 문서의 도메인은 example.com이지만 document.domain의 값은

이런 식으로 js를 통해 iframe의 다양한 속성과 개체에 액세스할 수 있습니다.

그러나 www.example.com/a.html 페이지에서 ajax를 통해 example.com/b.html 페이지를 직접 요청하려는 경우에는 동일한 document.domain을 설정하더라도 여전히 작동하지 않으므로 document.domain을 수정하는 방법은 서로 다른 하위 도메인의 프레임 간 상호 작용에만 적용 가능합니다. ajax 메서드를 통해 다양한 하위 도메인의 페이지와 상호 작용하려는 경우 jsonp 메서드를 사용하는 것 외에도 숨겨진 iframe을 프록시로 사용할 수도 있습니다. 원칙은 이 iframe이 ajax를 통해 데이터를 가져오려는 대상 페이지와 동일한 도메인의 페이지를 로드하도록 하는 것입니다. 따라서 이 iframe의 페이지는 ajax를 사용하여 정상적으로 원하는 데이터를 가져온 다음 우리를 통해 얻을 수 있는 방법입니다. 방금 언급한 document.domain을 수정하면 js를 통해 이 iframe을 완전히 제어할 수 있으므로 iframe이 ajax 요청을 보내고 수신된 데이터를 얻을 수도 있습니다.

3. 크로스 도메인에 window.name 사용

창 개체에는 특성이 있는 이름 속성이 있습니다. 즉, 창의 수명입니다. (window) 주기 동안 창에 의해 로드된 모든 페이지는 window.name을 공유합니다. 각 페이지에는 window.name에 대한 읽기 및 쓰기 권한이 있습니다. Window.name은 창에 의해 로드된 모든 페이지에서 유지됩니다. 새 페이지가 로드됩니다.

예를 들어 다음 코드가 있는 a.html 페이지가 있습니다.

b.html 페이지의 코드를 살펴보세요.

a.html 페이지가 로드된 후 3초 후에 b.html 페이지로 이동했습니다. 결과는 다음과 같습니다.

보자 b.html 페이지에서는 이전 페이지인 a.html에서 window.name에 설정한 값을 성공적으로 가져왔습니다. 이후 로드된 모든 페이지에서 window.name이 수정되지 않으면 이러한 모든 페이지에서 얻은 window.name 값은 a.html 페이지에서 설정한 값이 됩니다. 물론 필요한 경우 모든 페이지에서 window.name 값을 수정할 수 있습니다. window.name의 값은 문자열 형식만 가능합니다. 이 문자열의 최대 크기는 브라우저에 따라 약 2M 이상의 용량을 허용할 수 있지만 일반적으로 충분합니다.

위의 예에서 우리가 사용한 a.html과 b.html 페이지는 동일한 도메인에 있지만, a.html과 b.html이 다른 도메인에 있더라도 위의 결론도 적용 가능합니다. , 이것이 바로 도메인 간 window.name을 사용하는 원칙입니다.

window.name을 통해 도메인 간 데이터를 얻는 방법을 살펴보겠습니다. 아니면 예를 들어보세요.

예를 들어 www.example.com/a.html 페이지가 있는 경우 a.html 페이지에서 js를 사용하여 www.cnblogs.com/data.html 페이지를 찾아야 합니다. 다른 도메인 데이터에.

data.html 페이지의 코드는 매우 간단합니다. 이는 a.html 페이지가 현재 window.name에 대해 얻고자 하는 데이터 값을 설정하는 것입니다. data.html의 코드:

그럼 a.html 페이지에서 data.html 페이지를 어떻게 로드하나요? 분명히 a.html 페이지가 점프하지 않더라도 data.html의 데이터를 가져오고 싶기 때문에 a.html 페이지에서 window.location을 변경하여 data.html 페이지를 직접 로드할 수는 없습니다. 대답은 a.html 페이지에 숨겨진 iframe을 사용하여 중개자 역할을 하는 것입니다. iframe은 data.html에서 데이터를 가져온 다음 a.html은 iframe에서 데이터를 가져옵니다.

중개인 역할을 하는 iframe이 data.html에서 window.name으로 설정된 데이터를 얻으려면 이 iframe의 src를 www.cnblogs.com/data.html로 설정하기만 하면 됩니다. 그런 다음 a.html이 iframe에서 얻은 데이터를 가져오려면, 즉 iframe의 window.name 값을 가져오려면 iframe의 src도 a와 동일한 도메인으로 설정해야 합니다. 그렇지 않으면 이전 동일 출처 정책에 관해 a.html이 iframe의 window.name 속성에 액세스할 수 없습니다. 이것이 전체 도메인 간 프로세스입니다.

a.html 페이지의 코드를 보세요:

위 코드는 가장 간단한 원리 데모 코드일 뿐입니다. 위의 프로세스에서는 iframe을 동적으로 생성하고 다양한 이벤트를 동적으로 등록하는 등의 작업을 수행합니다. 물론 보안상의 이유로 데이터를 얻은 후 iframe을 프록시로 삭제할 수도 있습니다. 인터넷에 유사한 기성 코드가 많이 있습니다. 관심이 있으시면 찾아보실 수 있습니다.

window.name을 사용하여 도메인 간을 수행하는 방식입니다.

4. HTML5에서 새로 도입된 window.postMessage 메소드를 사용하여 도메인 간에 데이터를 전송합니다.

window.postMessage(message,targetOrigin) 메소드는 HTML5에 새로 도입된 기능입니다. HTML5에서는 창 개체가 동일한 소스에 속하든, 다른 소스에 속하든 관계없이 이를 사용하여 다른 창 개체에 메시지를 보낼 수 있습니다. 현재 IE8+, FireFox, Chrome, Opera 및 기타 브라우저는 이미 window.postMessage 메서드를 지원합니다.

postMessage 메소드를 호출하는 윈도우 객체는 메시지를 수신하기 위한 윈도우 객체를 참조합니다. 이 메소드의 첫 번째 매개변수인 message는 전송할 메시지이고, 유형은 두 번째 매개변수인 targetOrigin만 가능합니다. 메시지를 받는 윈도우 객체의 도메인을 제한하고, 도메인을 제한하지 않으려면 와일드카드 *를 사용하면 됩니다.

메시지를 받아야 하는 창 개체는 자신의 메시지 이벤트를 모니터링하여 들어오는 메시지를 얻을 수 있습니다. 메시지 내용은 이벤트 개체의 data 속성에 저장됩니다.

위에서 언급한 다른 창 개체에 메시지를 보내는 것은 실제로 각 프레임에 창 개체가 있으므로 페이지에 여러 프레임이 있는 상황을 의미합니다. 두 번째 방법을 논의할 때 서로 다른 도메인의 프레임워크는 서로의 창 개체를 얻을 수 있고 window.postMessage 메서드를 사용할 수도 있다고 말했습니다. 아래의 간단한 예를 살펴보겠습니다.

페이지 a를 실행한 후 얻은 결과입니다. :

b페이지가 성공적으로 메시지를 수신한 것을 볼 수 있습니다.

postMessage를 사용하여 도메인 간에 데이터를 전송하는 것은 상대적으로 직관적이고 편리하지만 IE6, IE7에서는 지원하지 않는다는 단점이 있으므로 사용 여부는 실제 필요에 따라 다릅니다.

결론:

위의 방법 외에도 플래시, 서버에 프록시 페이지 설정 등 도메인 간 방법도 있지만 이는 그렇지 않습니다. 여기에 소개되었습니다.

위 네 가지 방법은 프로젝트의 실제 상황에 따라 선택하여 적용할 수 있다고 개인적으로 생각합니다. window.name 방법은 거의 모든 브라우저와 호환됩니다. -브라우저 방법.

위 내용은 js의 4가지 실용적인 크로스 도메인 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!