크로스 필드 문제: 여러 가지 해결 방안

크로스 필드 는 넓 은 의미 의 크로스 필드 와 좁은 의미 의 크로스 필드 로 나 뉜 다.
넓 은 의미 의 크로스 필드: 한 필드 의 문서 나 스 크 립 트 가 다른 필드 의 자원 을 요청 하려 고 합 니 다.
넓 은 의미 의 크로스 도 메 인 은 다음 과 같은 몇 가지 로 나 눌 수 있다. 1.) 자원 전환: A 링크, 재 설정, 폼 제출 2.) 자원 삽입:, & lt;img>、<frame>등 dom 태그, 그리고 스타일 의 background: url (), @ font - face () 등 파일 외부 체인 & lt;br> 3.) 스 크 립 트 요청: js 가 시작 한 ajax 요청, dom 과 js 대상 의 크로스 필드 작업 등 & lt; /p>
</blockquote>
<h6>협의 크로스 도 메 인: 우리 가 흔히 말 하 는 크로스 도 메 인 은 협의 크로스 도 메 인, 즉 동원 책 입 니 다. 제 한 된 크로스 도 메 인 입 니 다. [동원 전략: 즉 같은 협의, 같은 도 메 인 이름, 같은 도 메 인 구호 에서 스 크 립 트 페이지 는 서로 데 이 터 를 방문 할 수 있 습 니 다] 서로 다른 소스 의 클 라 이언 트 스 크 립 트 는 명확 한 권한 이 없 는 상황 에서 상대방 의 자원 을 읽 고 쓸 수 없습니다. </h6>
<blockquote>
<p>동원 정책 은 다음 과 같은 몇 가지 내용 을 제한한다. & lt;br> 1.) Cookie, LocalStorage, IndexDB 에서 & lt 를 읽 을 수 없습니다.br> 2.) DOM 과 Js 대상 은 & lt 를 획득 할 수 없습니다.br> 3.) AJAX 요청 발송 불가 & lt; /p>
</blockquote>
<p>따라서 동원 정책 의 제한 을 받 아 동원 스 크 립 트 가 아 닌 다른 원본 아래 의 대상 을 조작 할 수 없습니다.다른 원본 의 대상 을 조작 하려 면 도 메 인 을 넘 어야 합 니 다.lt;/p>
<h4>도 메 인 을 뛰 어 넘 는 몇 가지 방법: & lt; /h4>
<h6>(1) jsonp 를 통 해 도 메 인 & lt; /h6>
<p>JSONP 의 원리: (예: a. com / jsonp. html 는 b. com / main. js 의 데 이 터 를 얻 고 싶 습 니 다) a. com 의 jsonp. html 에 리 셋 함수 xxx 를 만 들 고 동적 추가 & lt;script>요 소 는 서버 에 요청 을 보 냅 니 다. 요청 주소 뒤에 검색 문자열 을 추가 하고 callback 매개 변 수 를 통 해 리 셋 함수 의 이름 을 지정 합 니 다.요청 주소http://b.com/main.js?callback=xxx。main. js 에서 이 리 셋 함수 xxx 를 호출 하고 JSON 데이터 형식 으로 매개 변수 로 전달 하여 리 셋 을 완성 합 니 다.lt;br> 원생 js 표기 법: & lt; /p>
<pre><code><script>
var script = document.createElement('script');
script.type = 'text/javascript';
/ / 전 참 및 리 셋 실행 함 수 를 onBack 로 지정 합 니 다.
script.src = 'http://www.domain2.com:8080/login?user=admin&callback=onBack';
document.head.appendChild(script);
/ / 리 셋 실행 함수
function onBack(res) {
alert(JSON.stringify(res));
}
JQuery 표기 법:

$.ajax({
    url: 'http://www.domain2.com:8080/login',
    type: 'get',
    dataType: 'jsonp',  //      jsonp
    jsonpCallback: "onBack",    //         
    data: {}
});

jsonp 방법의 단점:
1. 이런 방법 을 사용 하면 사이트 라면 b. com 의 데 이 터 를 얻 을 수 있 고 안전성 에 문제 가 존재 합 니 다.
2. GET 만 가능 하고 POST 는 불가능 하 다.
3. 악성 코드 를 주입 하여 페이지 내용 을 변경 할 수 있 으 며 문자열 필터 로 이 문 제 를 피 할 수 있 습 니 다.
(2) 웹 소켓 을 통 해 크로스 필드 진행
WebSocket protocol 은 HTML 5 의 새로운 프로 토 콜 입 니 다.이 는 브 라 우 저 와 서버 의 모든 양 방향 통신 을 실현 하 는 동시에 도 메 인 간 통신 을 허용 합 니 다. 그 자체 가 같은 소스 정책 의 제한 을 받 지 않 고 server push 기술 의 좋 은 실현 입 니 다.웹 소켓 은 하나의 TCP 연결 에서 듀 플 렉 스 통신 을 하 는 프로 토 콜 이다.AJAX 요청 처럼 웹 소켓 요청 을 시작 하려 면 브 라 우 저 에서 제공 하 는 웹 소켓 대상 을 빌려 야 하 며, 이 대상 은 웹 소켓 연결 을 만 들 고 관리 하 며 이 연결 을 통 해 데 이 터 를 송 수신 하 는 API 를 제공 합 니 다.모든 브 라 우 저 는 기본적으로 웹 소켓 대상 을 제공 합 니 다.이 대상 의 용법 을 봅 시다.
XHRHttpRequest 대상 을 사용 하 는 것 과 마찬가지 로 웹 소켓 대상 을 예화 해 야 합 니 다.
var ws = new WebSocket("wss://echo.websocket.org") 들 어 오 는 매개 변 수 는 웹 소켓 요청 에 응 하 는 주소 입 니 다.
마찬가지 로 AJAX 와 유사 한 것 은 웹 소켓 대상 에 도 ready State 속성 이 있 는데 대상 이 현재 있 는 링크 상 태 를 나타 내 는 데 네 개의 값 이 있 습 니 다.
0: 연결 중 임 을 표시 합 니 다 (CONNECTING).1: 연결 이 성공 하여 통신 이 가능 함 (OPEN).2: 연결 이 닫 히 고 있 음 (닫 기) 을 표시 합 니 다.3: 연결 이 닫 혔 거나 연결 을 여 는 데 실 패 했 음 을 표시 합 니 다 (CLOSED).
우 리 는 이 값 을 판단 함으로써 우리 의 상응하는 코드 를 집행 할 수 있다.그 밖 에 WebSocket 대상 은 연결 과정 에서 의 통신 행 위 를 제어 할 수 있 도록 일련의 이벤트 속성 을 제공 합 니 다.
onopen: 연결 이 성공 한 후의 반전 함 수 를 지정 합 니 다.onclose: 연결 이 닫 힌 후의 반전 함 수 를 지정 합 니 다.onmessage: 서버 데 이 터 를 받 은 후 리 셋 함 수 를 지정 합 니 다.onerror: 오 류 를 보고 할 때의 반전 함 수 를 지정 합 니 다.
. send () 방법 을 통 해 저 희 는 서버 에 데 이 터 를 보 내 는 능력 을 가지 게 되 었 습 니 다 (WebSocket 은 바 이 너 리 데 이 터 를 보 낼 수 있 습 니 다).
ws.send('Hi, server!')
언제 우리 의 데이터 가 발송 되 었 는 지 어떻게 압 니까?웹 소켓 대상 의 bufferedAmount 속성 을 사용 해 야 합 니 다. 이 속성의 반환 값 은 몇 바이트 의 바 이 너 리 데이터 가 전송 되 지 않 았 는 지 를 표시 하기 때문에 이 값 이 0 인지 판단 하여 데이터 전송 이 끝 났 는 지 확인 할 수 있 습 니 다.

var data = new ArrayBuffer(1000000)
ws.send(data)

if (socket.bufferedAmount === 0) {
    //     
} else {
    //     
}

(3) CORS 크로스 필드
CORS 는 W3C 표준 으로 '크로스 도 메 인 자원 공유' 라 고 불 린 다. 즉, 브 라 우 저가 크로스 소스 서버 에 XML HttpRequest 요청 을 보 내 AJAX 가 같은 소스 로 만 사용 할 수 있 는 제한 을 극복 한 것 이다.b. com 에 응답 헤더 성명 을 추가 하면 a. com 의 접근 을 허용 합 니 다. 코드: Access - Control - Allow - Origin:http://a.com 그리고 a. com 은 ajax 로 b. com 의 데 이 터 를 얻 을 수 있 습 니 다.
(4) postMessage
상기 크로스 도 메 인 기술 은 클 라 이언 트 가 다른 도 메 인 서버 자원 을 요청 하 는 상황 에 만 적 용 됩 니 다.그 밖 에 가끔 우 리 는 다른 지역 의 두 클 라 이언 트 사이 에서 데 이 터 를 공유 해 야 한다. 예 를 들 어 페이지 와 내장 iframe 창 통신, 페이지 와 새로운 도 메 인 페이지 를 열 어 통신 해 야 한다.
HTML 5 가 제공 하 는 새로운 API 인 post Message 를 사용 할 때 다.
potmessage 기술 을 사용 하여 도 메 인 을 뛰 어 넘 는 원 리 를 실현 하 는 것 은 매우 간단 하 다. 한편, 메 인 창 은 potmessage API 를 통 해 도 메 인 창 에 데 이 터 를 보 내 고 다른 한편, 우 리 는 도 메 인 페이지 스 크 립 트 에서 message 이 벤트 를 계속 감청 하 며 메 인 창 데 이 터 를 가 져 올 때 데 이 터 를 처리 하거나 같은 방식 으로 데 이 터 를 되 돌려 서 창 을 뛰 어 넘 는 도 메 인 통신 을 실현 한다.
구체 적 인 업무 장면 과 코드 로 설명 하 겠 습 니 다. 만약 에 우리 페이지 에 현재 두 개의 창 이 있다 면 창 1 은 'window 1' 이 고 창 2 는 'window 2' 라 고 명명 합 니 다. 물론 창 1 은 창 2 의 '도 메 인' 과 다 릅 니 다. 우리 의 수 요 는 창 1 에서 창 2 로 데 이 터 를 보 내 는 것 입 니 다. 창 2 가 데 이 터 를 받 았 을 때 데 이 터 를 다시 창 1 에 되 돌려 주 는 것 입 니 다.먼저 창 1script 탭 에 있 는 코드 를 보 여 줍 니 다.
// window_도 메 인 이름http://winodow1.com:8080 window.postMessage("Hi, How are you!", "http://window2.com:8080") potmessage 함 수 는 두 개의 인 자 를 받 습 니 다. 첫 번 째 는 보 낼 정보 (모든 자바 스 크 립 트 형식 데이터 일 수 있 지만 일부 브 라 우 저 는 문자열 형식 만 지원 합 니 다) 이 고 두 번 째 는 정보 로 보 낼 대상 주소 입 니 다.창 2script 탭 에 있 는 코드 를 다시 봅 시다.
// window_도 메 인 이름http://window2.com:8080 window.addEventListener("message", receiveMessage, false)
function receiveMessage (event) {/ / Chorme 에 대해 origin 속성 은 originalEvent. origin 속성 var origin = event. origin | | event. originalEvent. origin if (origin! = = "http://window1.com:8080") { return } window.postMessage("I'm ok", "http://window1.com:8080")} 보 셨 습 니까? 우 리 는 window 에 이벤트 감청 함 수 를 연결 하 였 습 니 다.message 사건 을 감청 하 다.다른 도 메 인 에서 postmessage 를 통 해 보 내 는 정 보 를 받 으 면 receiveMessage 리 셋 함수 가 실 행 됩 니 다.이 함 수 는 먼저 메 시 지 를 보 내 는 도 메 인 이 우리 가 원 하 는 도 메 인 인지 확인 하고 인증 이 성공 하면 창 1 처럼 메 시 지 를 보 냅 니 다.어떻게 페이지 에 보 낸 정 보 를 감별 합 니까?정 답 은 message 이벤트 감청 함수 의 이벤트 대상 입 니 다. 이벤트 라 고 부 릅 니 다. 이 대상 은 세 가지 속성 이 있 습 니 다. data: 값 은 다른 window 에서 전달 되 는 대상 입 니 다.origin: 메시지 전송 자 창의 도 메 인 이름 입 니 다.source: 메 시 지 를 보 내 는 창 대상 에 대한 참조 값 입 니 다.분명 한 것 은 이벤트 대상 의 origin 속성 을 검사 하 는 데 중심 을 두 고 화이트 리스트 를 만들어 origin 속성 을 검사 하 는 것 이 현명 한 방법 입 니 다.