JavaScript 크로스 도메인 방법_javascript 기술 요약

웹 개발을 하다 보면 도메인 간 문제에 직면하게 되는 경우가 많습니다. 도메인 간 문제의 근본 원인은 브라우저 보안의 동일 출처 정책입니다. HTML:

1.http://www.a.com/2.html도 같은 출처입니다. 2. https://www.a.com/2.html은 프로토콜이 다르기 때문에 소스가 다릅니다. 3. http://www.a.com:8080/2.html은 포트가 다르기 때문에 소스가 다릅니다. 4. http://sub.a.com/2.html은 호스트가 다르기 때문에 출처가 다릅니다.

브라우저에서 , , 및 태그는 원본이 아닌 도메인 간 리소스를 로드할 수 있으며 로드 방법은 실제로 다음과 같습니다. 일반적인 GET 요청의 유일한 차이점은 보안상의 이유로 브라우저가 로드된 리소스에 대한 읽기 및 쓰기 작업을 이러한 방식으로 허용하지 않고 태그 자체에 있어야 하는 기능(예: 스크립트 실행, 스타일)만 사용할 수 있다는 것입니다. 신청 등).

가장 일반적인 교차 도메인 문제는 Ajax 교차 도메인 액세스입니다. 기본적으로 교차 도메인 URL은 Ajax를 통해 액세스할 수 없습니다. 여기에 제가 배운 크로스 도메인 방법을 기록합니다.

1. 서버측 프록시 이에 대해서는 말할 것도 없습니다. 단점은 기본적으로 Ajax 요청을 받는 서버가 클라이언트의 IP와 UA를 얻을 수 없다는 것입니다.

2. iframe , iframe을 사용하는 것은 실제로 새 웹 페이지를 여는 것과 동일합니다. 구체적인 교차 도메인 방법은 대략 도메인 A가 연 상위 페이지가 도메인 B를 가리키는 iframe을 중첩하는 것입니다. 그런 다음 데이터를 제출하고 완료 후 B의 서버는 다음을 수행할 수 있습니다.

●302 리디렉션 응답을 반환하고 결과를 다시 도메인 A로 리디렉션합니다. ●도메인 A를 가리키는 iframe이 이 iframe 내부에 중첩되어 있습니다.

둘 다 마침내 크로스 도메인 호출을 실현했습니다. 이 방법은 크로스 도메인이 완료된 후에는 서로 간에 DOM 작업과 JavaScript 호출에 문제가 없기 때문에 아래에 소개된 JSONP보다 더 기능적입니다. 예를 들어, 결과는 URL 매개변수로 전달되어야 하며, 이는 결과 데이터가 클 경우 분할하여 전달해야 함을 의미하며, 이는 iframe 자체, 즉 iframe 간의 상호작용으로 인해 발생합니다. 상위 페이지와 iframe 자체에는 고유한 보안 제한이 있습니다.

3. 스크립트 태그를 사용하여 도메인 간 이동 . 이 방법도 매우 일반적입니다. 스크립트 태그는 외부 JavaScript를 로드하여 실행하고 미리 설정된 콜백 기능을 통해 상위 페이지와 상호 작용할 수 있습니다. JSONP cross-domain이라는 큰 이름을 가지고 있습니다. JSONP는 JSON with Padding의 약어입니다. 비공식 프로토콜인데 왜 JSON과 관련이 있나요? 이것이 콜백 함수인 것으로 알고 있으며, 이를 사용하는 일반적인 방법은 JSON을 통해 매개변수를 전달하는 것, 즉 콜백 함수에 JSON 데이터를 채우는 것입니다. 이것이 JSONP의 JSON Padding의 의미입니다.

기본적으로 도메인 간 요청인 데이터를 제공하는 JSONP 서비스가 인터넷에 많이 있습니다. 콜백=결과와 같이 요청 URL에 콜백이 지정된 경우 데이터를 얻은 후 결과 함수가 자동으로 호출되고 JSON 형식으로 데이터를 전달합니다(예: "football" 검색).

http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=football&callback=result

JQuery를 사용하여 다음과 같이 호출합니다.

코드 복사 코드는 다음과 같습니다. $.getJSON("http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=football&callback=?",함수(데이터){ //... }); 일반적으로 JSONP의 크로스 도메인 방식의 한계는 GET 요청만 사용할 수 있다는 점과, 서로 다른 도메인의 두 페이지 간에 JavaScript 호출을 수행하는 방법에 대한 문제를 해결할 수 없다는 것입니다.

4. 플래시 크로스 도메인:

대상 웹사이트의 루트 디렉터리에 있는 crossdomain.xml 파일에 액세스하고 파일의 콘텐츠를 기반으로 이러한 교차 도메인 액세스를 허용할지 여부를 결정합니다.

코드 복사 코드는 다음과 같습니다. 5. img 태그는 도 사용할 수 있는데 이 방법은 get 요청만 보낼 수 있고 콜백이 없습니다. 클릭수가 결정됩니다.

6. window.PostMessage는 도메인 간 통신을 위해 HTML5에 추가된 새로운 메커니즘입니다. Firefox 3, Safari 4, IE8 이상 버전에서만 지원됩니다. 다른 창에 메시지를 보내기 위해 사용하는 호출 방법은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다. otherWindow.postMessage(message, targetOrigin); 수신창에서는 보낸 메시지를 수신하기 위한 이벤트 처리 기능을 설정해야 합니다. 코드 복사 코드는 다음과 같습니다. window.addEventListener("message", receiveMessage, false); 함수 receiveMessage(이벤트){ If (event.origin !== "http://example.org:8080") 반품; } 보낸 사람의 신원을 확인하려면 메시지의 원본 및 소스 속성을 사용해야 합니다. 그렇지 않으면 XSS 취약점이 발생합니다. 7. 접근 통제

일부 브라우저는 다음과 같은 Access-Control-Allow-Origin과 같은 응답 헤더를 지원합니다.

코드 복사 코드는 다음과 같습니다. header("액세스 제어-허용-원본: http://www.a.com"); www.a.com에 대한 도메인 간 액세스가 허용되도록 지정합니다. 8. 창.이름

이것은 실제로 이전에 해커 XSS의 수단으로 사용되었던 적이 있습니다. 그 본질은 창의 위치가 변경되면 페이지가 다시 로드된다는 것입니다. 그러나 흥미로운 점은 window.name이 변경되지 않는다는 것입니다. 당신은 가치를 전달할 수 있습니다. iframe과 협력하고 iframe의 창 개체를 여러 번 변경하여 실용적인 도메인 간 데이터 전송을 완료합니다.

9. 문서.도메인

이 방법은 a.example.com과 b.example.com 사이의 도메인 간 통신에 적합합니다. 왜냐하면 example.com이라는 공통 도메인이 있기 때문입니다. document.domain을 example.com으로 설정하면 됩니다. a.example1.com과 b.example2.com 간의 통신이므로 선택의 여지가 없습니다.

10. FIM(조각 식별자 메시징)

이 방법은 매우 흥미롭고 iframe의 협력이 필요합니다. 조각 식별자는 앵커 위치 지정에 자주 사용되는 URL의 파운드 기호(#) 뒤의 부분입니다. 이 부분을 변경해도 페이지가 새로 고쳐지지는 않지만 상위 창은 마음대로 iframe의 URL에 액세스할 수 있습니다. iframe은 또한 마음대로 상위 창의 URL에 액세스할 수 있으며, 그런 다음 조각 식별자를 변경하여 둘 사이의 통신을 달성할 수 있습니다. 단점은 조각 식별자를 변경하면 불필요한 기록 레코드가 생성되고 길이 제한도 있다는 점입니다. 또한 일부 브라우저는 onhashchange 이벤트를 지원하지 않습니다.

11. 크로스 프레임(CF)

이 방법은 위에서 언급한 FIM 방법의 변형입니다. CF와 FIM의 본질은 실제로 내 "GWT 첫 경험" 기사에 소개되어 있습니다(히스토리 및 뒤로 기능을 구현하는 데 사용됨). iframe은 처리 후 외부 도메인을 가리키는 동적으로 생성되며, 이 iframe URL의 조각 식별자에는 액세스할 상위 페이지에 대한 처리 결과가 포함되며 브라우저의 URL은 변경되지 않습니다.

12. 쿠키 P3P 프로토콜

P3P 프로토콜에서 교차 도메인 액세스 쿠키의 특성을 사용하여 교차 도메인 액세스를 달성하는 것도 이상한 트릭입니다. P3P는 인터넷을 서핑하는 인터넷 사용자에게 개인 정보 보호를 제공하는 것을 목표로 W3C에서 발표한 개인 정보 보호 권장 표준입니다. 쿠키 경로를 "/"로 설정하세요. 즉, 도메인 제한이 없습니다. 이때 일부 브라우저에서는 다른 URL이 있는 페이지를 읽을 수 있도록 허용하는 반면 다른 브라우저에서는 허용하지 않습니다. 이 경우 상위 페이지에서 응답해야 합니다. . 헤더에 P3P 헤더를 설정하세요:

코드 복사 코드는 다음과 같습니다. P3P: CP="CURa ADMa DEVa PSAo PSDo OUR BUS UNI PUR INT DEM STA PRE COM NAV OTC NOI DSP COR"