[전] js 크로스 도 메 인 해결 방법

JavaScript 크로스 필드 정리 및 해결 방법

크로스 오 버 가 무엇 입 니까

1. document. domain + iframe 설정

2. 동적 생 성 script

3. iframe 과 location. hash

를 이용 합 니 다.

4. window. name 에서 실 현 된 크로스 도 메 인 데이터 전송

5. HTML 5 postMessage 사용

6. 플래시 활용

본문 은 네트워크 에서 나온다 (http://f2e.me/200904/cross-scripting/이 사 이 트 는 방문 할 수 없습니다) 개인 독서 노트 로 만 사용 되 며 조금 만 수정 하고 보충 합 니 다.
무엇이 크로스 필드 입 니까?
자 바스 크 립 트 는 보안 을 고려 하여 다른 페이지 의 대상 을 크로스 필드 에서 호출 할 수 없습니다.그러나 안전 제한 과 함께 iframe 이나 ajax 응용 에 도 많은 번 거 로 움 을 가 져 왔 다.여기 서 크로스 필드 와 관련 된 몇 가지 문 제 를 간단하게 정리 합 니 다.
먼저 크로스 필드 가 무엇 인지 간단하게 이해 하 는 것 은 자바 스 크 립 트 동원 정책 의 제한 때 문 입 니 다. a. com 도 메 인 이름 의 js 는 b. com 이나 c. a. com 도 메 인 이름 의 대상 을 조작 할 수 없습니다.더 자세 한 설명 은 다음 표를 볼 수 있다.
URL
설명 하 다.
통신 허용 여부
http://www.a.com/a.js http://www.a.com/b.js
같은 도 메 인 이름 아래
허락 하 다.
http://www.a.com/lab/a.js http://www.a.com/script/b.js
같은 도 메 인 이름 아래 다른 폴 더
허락 하 다.
http://www.a.com:8000/a.js http://www.a.com/b.js
같은 도 메 인 이름, 다른 포트
불허
http://www.a.com/a.js https://www.a.com/b.js
같은 도 메 인 이름, 다른 프로 토 콜
불허
http://www.a.com/a.js http://70.32.92.74/b.js
도 메 인 이름과 도 메 인 이름 대응 ip
불허
http://www.a.com/a.js http://script.a.com/b.js
주 도 메 인 은 같 고, 자 도 메 인 은 다르다.
불허
http://www.a.com/a.js http://a.com/b.js
같은 도 메 인 이름, 다른 2 급 도 메 인 이름 (같은 위)
허용 되 지 않 음 (쿠키 의 경우 에 도 접근 이 허용 되 지 않 음)
http://www.cnblogs.com/a.js http://www.a.com/b.js
다른 도 메 인 이름
불허
특히 두 가 지 를 주의해 야 한다. 첫째, 프로 토 콜 과 포트 로 인 한 크로스 도 메 인 문제 인 '프론트 데스크' 는 어 쩔 수 없다. 둘째, 크로스 도 메 인 문제 에 있어 도 메 인 은 'URL 의 첫 번 째 부분' 을 통 해 만 식별 되 고 똑 같은 ip 주소 가 두 도 메 인 이나 두 도 메 인 이 같은 ip 에 대응 하 는 지 판단 하려 고 하지 않 는 다.
'URL 의 첫 번 째 부분' 은 window. location. protocol + window. location. host 를 말 하 며 'Domains, protocols and ports must match' 로 도 이해 할 수 있다.
다음은 '프론트 데스크 톱' 에서 크로스 도 메 인 을 처리 하 는 방법 을 간단하게 정리 하 겠 습 니 다. 백 스테이지 proxy 라 는 방안 은 백 스테이지 설정 과 관련 되 어 있 습 니 다. 여기 서 설명 하지 않 겠 습 니 다. 관심 있 는 것 은 야후 의 이 글 을 볼 수 있 습 니 다.
1. document. domain + iframe 설정
주 도 메 인 이 같 고 자 도 메 인 이 다른 예 에 대해 서 는 document. domain 을 설정 하 는 방법 으로 해결 할 수 있 습 니 다.구체 적 인 방법 은http://www.a.com/a.html화해시키다http://script.a.com/b.html두 파일 에 각각 document. domain = 'a. com' 을 추가 합 니 다.그리고 a. html 파일 을 통 해 iframe 을 만 들 고 iframe 의 contentDocument 를 제어 하면 두 js 파일 사이 에 '상호작용' 을 할 수 있 습 니 다.물론 이 방법 은 주 도 메 인 이 같 고 2 급 도 메 인 이름 이 다른 상황 만 해결 할 수 있 습 니 다. 만약 에 기상천외 하 게 script. a. com 의 dominan 을 alibaba. com 으로 설정 하면 잘못된 보고 가 될 것 입 니 다!코드 는 다음 과 같 습 니 다:
www. a. com 의 a. html

document.domain = 'a.com';
var ifr = document.createElement('iframe');
ifr.src = 'http://script.a.com/b.html';
ifr.style.display = 'none';
document.body.appendChild(ifr);
ifr.onload = function(){
    var doc = ifr.contentDocument || ifr.contentWindow.document;
    //      b.html
    alert(doc.getElementsByTagName("h1")[0].childNodes[0].nodeValue);
};

script. a. com 의 b. html

document.domain = 'a.com';

이 방식 은 {www. kuqin. com, kuqin. com, script. kuqin. com, css. kuqin. com} 의 모든 페이지 가 서로 통신 하 는 데 적 용 됩 니 다.
비고: 한 페이지 의 domain 은 기본적으로 window. location. hostname 과 같 습 니 다.주 도 메 인 이름 은 ww 가 없 는 도 메 인 이름 입 니 다. 예 를 들 어 a. com, 주 도 메 인 이름 앞 에 접 두 사 를 가 진 것 은 보통 2 급 도 메 인 이름 이나 다단 계 도 메 인 이름 입 니 다. 예 를 들 어 www. a. com 은 2 급 도 메 인 이름 입 니 다.domain 은 도 메 인 이름 만 설정 할 수 있 고 b. a. com 에서 domain 을 c. a. com 으로 설정 할 수 없습니다.문제: 1. 안전성, 한 사이트 (b. a. com) 가 공격 당 하면 다른 사이트 (c. a. com) 가 보안 구멍 을 일 으 킬 수 있 습 니 다.2. 한 페이지 에 여러 개의 iframe 을 도입 하면 모든 iframe 을 조작 하려 면 같은 domain 을 설정 해 야 합 니 다.
2. 동적 생 성 script
브 라 우 저 는 기본적으로 크로스 도 메 인 접근 을 금 지 했 지만 페이지 에서 다른 도 메 인 JS 파일 을 참조 하 는 것 을 금지 하지 않 고 도 입 된 JS 파일 의 function (조작 쿠키, Dom 등 포함) 을 자 유 롭 게 실행 할 수 있 습 니 다.이 점 에 따라 script 노드 를 만 드 는 방법 으로 완전 도 메 인 간 통신 을 편리 하 게 실현 할 수 있 습 니 다.구체 적 인 방법 은 YUI 의 Get Utility 를 참고 할 수 있 습 니 다.
script 노드 로 딩 이 끝 났 는 지 판단 하 는 것 이 재 미 있 습 니 다. ie 는 script 의 readystatechange 속성 만 통과 할 수 있 고 다른 브 라 우 저 는 script 의 load 이벤트 입 니 다.다음은 script 로드 완료 부분 을 판단 하 는 방법 입 니 다.

js.onload = js.onreadystatechange = function() {
    if (!this.readyState || this.readyState === 'loaded' || this.readyState === 'complete') {
        // callback     
        js.onload = js.onreadystatechange = null;
    }
};

3. iframe 과 location. hash 를 이용 하여
이 방법 은 비교적 복잡 하지만 완전히 도 메 인 을 넘 는 상황 에서 의 걸음 교체 문 제 를 해결 할 수 있다.원 리 는 location. hash 를 이용 하여 값 을 전달 하 는 것 이다.url:http://a.com#helloword'\ # helloworld' 는 location. hash 입 니 다. hash 를 바 꾸 면 페이지 가 새로 고침 되 지 않 기 때문에 hash 값 을 이용 하여 데이터 전달 을 할 수 있 습 니 다. 물론 데이터 용량 은 제한 되 어 있 습 니 다.도 메 인 이름 a. com 의 파일 cs1. html 가 cnblogs. com 도 메 인 이름 의 cs2. html 와 정 보 를 전달 해 야 한다 고 가정 하면 cs1. html 는 먼저 숨겨 진 iframe 을 자동 으로 만 들 고 iframe 의 src 는 cnblogs. com 도 메 인 이름 의 cs2. html 페이지 를 가리 키 며 이때 hash 값 은 매개 변수 로 전달 할 수 있 습 니 다.cs2. html 응답 요청 후 cs1. html 의 hash 값 을 수정 하여 데 이 터 를 전달 합 니 다.또한 cs1. html 에 타 이 머 를 추가 하여 일정 시간 간격 으로 location. hash 의 값 이 변 했 는 지 판단 하고 변화 가 있 으 면 hash 값 을 가 져 옵 니 다.코드 는 다음 과 같 습 니 다:
먼저 a. com 의 파일 cs1. html 파일:

function startRequest(){
    var ifr = document.createElement('iframe');
    ifr.style.display = 'none';
    ifr.src = 'http://www.cnblogs.com/lab/cscript/cs2.html#paramdo';
    document.body.appendChild(ifr);
}

function checkHash() {
    try {
        var data = location.hash ? location.hash.substring(1) : '';
        if (console.log) {
            console.log('Now the data is '+data);
        }
    } catch(e) {};
}
setInterval(checkHash, 2000);

cnblogs. com 도 메 인 이름 의 cs2. html:

//             
switch(location.hash){
    case '#paramdo':
        callBack();
        break;
    case '#paramset':
        //do something……
        break;
}

function callBack(){
    try {
        parent.location.hash = 'somedata';
    } catch (e) {
        // ie、chrome         parent.location.hash，
        //           cnblogs     iframe
        var ifrproxy = document.createElement('iframe');
        ifrproxy.style.display = 'none';
        ifrproxy.src = 'http://a.com/test/cscript/cs3.html#somedata'; //       "a.com"   document.body.appendChild(ifrproxy);
    }
}

a. com 의 도 메 인 이름 cs3. html

//  parent.parent         ，       location.hash  
parent.parent.location.hash = self.location.hash.substring(1);

물론 이렇게 하 는 것 도 많은 단점 이 존재 한다. 예 를 들 어 데이터 가 url 에 직접 노출 되 고 데이터 용량 과 유형 이 유한 하 다 는 등 이다.
4. window. name 에서 실 현 된 크로스 필드 데이터 전송
문장 이 비교적 길 게 열거 되 어 있어 읽 기 가 불편 하 니 상세 하 게 보십시오 window. name 에서 실 현 된 크로스 필드 데이터 전송.
5 、 HTML 5 postmessage 사용
HTML 5 에서 가장 멋 진 새로운 기능 중 하 나 는 바로 크로스 문서 메시지 전송 Cross Document Messaging.차세 대 브 라 우 저 는 Chrome 2.0 +, Internet Explorer 8.0 +, Firefox 3.0 +, Opera 9.6 +, Safari 4.0 + 를 지원 합 니 다.페 이 스 북 은 웹 기반 의 실시 간 메시지 전달 을 postmessage 로 지원 하 는 이 기능 을 사용 했다.otherWindow.postMessage(message, targetOrigin);
otherWindow: 정보 페이지 를 받 는 window 에 대한 참조페이지 에 있 는 iframe 의 contentWindow 속성 일 수 있 습 니 다.window. open 의 반환 값;name 이나 아래 표 시 를 통 해 window. frames 에서 가 져 온 값 입 니 다.
message: 보 낼 데이터, string 형식 입 니 다.
targetOrigin: otherWindow 를 제한 하 는 데 사용 되 며, "*" 는 제한 하지 않 음 을 표시 합 니 다.
a. com / index. html 의 코드:

<iframe id="ifr" src="b.com/index.html"></iframe>
<script type="text/javascript">
window.onload = function() {
    var ifr = document.getElementById('ifr');
    var targetOrigin = 'http://b.com'; //    'http://b.com/c/proxy.html'     //    'http://c.com'     postMessage  ifr.contentWindow.postMessage('I was there!', targetOrigin);
};
</script>

b. com / index. html 의 코드:

<script type="text/javascript">
    window.addEventListener('message', function(event){
        //   origin          
        if (event.origin == 'http://a.com') {
            alert(event.data);    //   "I was there!"
            alert(event.source);  //  a.com、index.html window     
                                  //        ，  event.source     window  
        }
    }, false);
</script>

참고 글: 제5 장 - 크로스 문서 메시지 메커니즘,https://developer.mozilla.org/en/dom/window.postmessage
6. 플래시 활용
이것 은 YUI 3 의 IO 구성 요소 에서 보 이 는 방법 으로 구체 적 으로 볼 수 있다.http://developer.yahoo.com/yui/3/io/。 Adobe Developer Connection 에서 더 많은 크로스 도 메 인 프 록 시 파일 규범 을 볼 수 있 습 니 다: ross - Domain Policy File Specifications, HTTP Headers Blacklist.