HTML5_html5 튜토리얼 스킬에서 Communication API의 기본 사용법에 대한 자세한 설명

1. 문서 간 메시지 통신
문서 간 메시지 통신은 iframe, 탭 및 창 간의 안전한 소스 간 통신을 보장할 수 있습니다. postMessage API를 메시지를 보내는 표준 방법으로 정의합니다. postMessage를 사용하여 메시지를 보내는 방법은 매우 간단합니다. 코드는
chatFrame.contextWindow.postMessage('Hello,world','http://www.example.com');
수신할 때입니다. 메시지를 보려면 페이지를 클릭하기만 하면 이벤트 처리 기능을 추가할 수 있습니다. 메시지가 도착하면 메시지 소스를 확인하여 메시지 처리 여부를 결정합니다.
메시지 이벤트는 데이터 및 원본 속성이 있는 DOM 이벤트입니다. data 속성은 발신자가 전달한 실제 메시지이고, Origin 속성은 전송 소스입니다.
postMessage API는 동일한 출처의 문서 간 통신이 가능할 뿐만 아니라, 브라우저가 원본이 아닌 통신을 허용하지 않는 경우에도 유용합니다. 일관성과 사용 용이성으로 인해 postMessage는 동일한 출처의 문서 간 통신에도 권장됩니다. postMessage API는 HTML5 Web Workers와 통신할 때와 같이 JavaScript 환경에서 통신할 때 항상 사용해야 합니다.
1.1 원본 보안 이해
HTML5 Rongguang은 도메인 보안을 명확하게 하고 개선하기 위해 원본 개념을 도입합니다. 원본은 네트워크에서 신뢰 관계를 설정하는 데 사용되는 주소의 하위 집합입니다. 소스는 규칙(scheme), 호스트(host), 포트(post)로 구성됩니다.
소스 개념에서 경로는 고려되지 않습니다.
HTML5는 소스 직렬화를 정의합니다. 소스는 API 및 프로토콜에서 문자열로 표시됩니다.
PostMessage 보안 규칙은 메시지가 의도하지 않은 소스 페이지로 전달되지 않도록 합니다. 메시지를 보낼 때 받는 사람의 출처를 지정하는 사람은 보낸 사람입니다. postMessage를 호출하기 위해 보낸 사람이 사용한 창에 특정 출처가 없으면(예: 사용자가 다른 사이트로 이동한 경우) 브라우저는 메시지를 전달하지 않습니다.
마찬가지로 메시지를 받을 때 보낸 사람의 출처도 메시지의 일부로 포함됩니다. 위조를 방지하기 위해 메시지 소스는 브라우저에서 제공됩니다. 수신자는 처리할 메시지와 무시할 메시지를 결정할 수 있습니다. 화이트리스트를 유지하고 신뢰할 수 있는 소스에서 보낸 메시지만 처리하도록 브라우저에 지시할 수 있습니다.
제3자의 문자열은 절대 평가하지 않는 것이 가장 좋습니다. 또한 애플리케이션 내부 문자열을 처리하기 위해 eval 메서드를 사용하지 마세요. JSON은 window.JSON 또는 json,.org 파서를 통해 사용할 수 있습니다.
1.2 문서 간 메시지 통신을 위한 브라우저 지원
일반적인 접근 방식은 withCredentials 속성이 XMLHttpRequest 객체에 존재하는지 여부를 감지하는 것입니다.

JavaScript 코드클립보드에 콘텐츠 복사

1. 　var xhr = new XMLHttpRequest() if (typeof xhr.withCredentials === 정의되지 않음) { //교차 출처 XMLHttpRequest를 지원하지 않음 } else { //교차 지원 원본 XMLHttpRequest }

1.3 postMessage API 사용
팁 HTML5에서 정의한 MessageEvent 인터페이스는 HTML5 WebSocket 및 HTML5 WebWorkers의 일부이기도 합니다. HTML5의 통신 기능은 메시지 수신을 위해 MessageEvent 인터페이스와 동일한 API를 사용합니다. EventSource API 및 Web Workers와 같은 다른 통신 API도 MessageEvent 인터페이스를 사용하여 메시지를 전달합니다.
1.4 postMessage API를 사용하여 애플리케이션 만들기
메시지 보내기
대상 페이지의 window 개체에서 postMessage() 함수를 호출하여 메시지를 보낼 수 있습니다. 다음은:

JavaScript 코드클립보드에 콘텐츠 복사

1. window.postMessage("Hello, world", "porta")

첫 번째 매개변수에는 전송할 데이터가 포함되고 두 번째 매개변수는 메시지의 대상입니다. iframe으로 메시지를 보내려면 해당 iframe의 contentWindow에서 postMessage를 호출하면 됩니다.

JavaScript 코드클립보드에 콘텐츠 복사

1. document.getElementsByTagName("iframe")[0].contentWindow.postMessage("Hello, world", "차")

메시지 이벤트 듣기
메시지 수신 시 페이지에 이벤트 핸들러만 추가하면 됩니다. 메시지가 도착하면 메시지 소스를 확인하여 메시지 처리 여부를 결정합니다.

JavaScript 코드클립보드에 콘텐츠 복사

1. window.postMessage("Hello, world", "porta")

메시지 이벤트는 데이터 및 원본 속성이 있는 DOM 이벤트입니다. data 속성은 발신자가 전달한 실제 메시지이고, Origin 속성은 전송 소스입니다.
소스는 룰(scheme), 호스트(host), 포트(port)로 구성됩니다.
예: 다른 규칙(예: https 및 http)으로 인해 페이지 소스가 다릅니다.
소스 개념에서는 경로를 고려하지 않습니다. 예를 들어 경로가 아니라 동일한 소스입니다.
소스는 API 및 프로토콜에서 문자열로 표시됩니다.

JavaScript 코드클립보드에 콘텐츠 복사

1. var OriginWhiteList = ["porta", "game" , ""]; 함수 checkWhiteList(origin) { for (var i=0; iif (origin === OriginWhiteList[i]) { 반환 참 } } 반환 거짓; } 함수 messageHandler(e) { if (checkWhiteList(e.origin)) { processMessage(e. data) } else { //알 수 없는 출처에서 보낸 메시지 무시 } }

postMessage API는 원본이 동일한 통신과 원본이 아닌 통신 모두에 적용할 수 있으며, 일관성을 고려하여 동종 문서 간 통신에도 postMessage를 사용하는 것이 좋습니다.
2 XMLHttpRequest Level2
XMLHttpRequest의 향상된 버전인 XMLHttpRequest Level2는 기능이 크게 향상되었습니다. 주로 두 가지 측면에 중점을 둡니다.
(1) 소스 간 XMLHttpRequests, 원본 리소스 공유(교차 원본 리소스 공유)는 원본 간 XMLHttpRequest를 구현합니다.
Cross-origin HTTP 요청에는 서버에 HTTP 요청의 소스 정보를 제공하기 위한 Origin 헤더가 포함됩니다. 헤더는 브라우저에 의해 보호되며 애플리케이션 코드로 수정할 수 없습니다. 본질적으로 이는 문서 간 메시지 통신에서 메시지 이벤트의 원본 속성과 동일한 효과를 갖습니다.
CORS 사양에서는 인증서 신청 요청이나 GET 및 POST 이외의 OPTIONS 실행 전 요청과 같은 일부 민감한 동작을 브라우저에서 서버로 전송하여 이 동작이 지원될 수 있는지 여부와 권한을 확인해야 합니다. 이는 성공적인 통신을 위해서는 CORS 기능이 있는 서버의 지원이 필요할 수 있음을 의미합니다.
2.2 진행 이벤트
새 버전의 XMLHttpRequest에서 가장 중요한 API 개선 사항 중 하나는 진행 상황에 대한 응답을 추가한 것입니다.
XMLHttpRequest Level2는 의미 있는 이름인 Progress를 사용하여 진행 이벤트의 이름을 지정합니다.
3가지 고급 기능
3.1 구조화된 데이터
postMessage의 초기 버전은 문자열만 지원합니다. 이후 버전에서는 JavaScript 개체, 캔버스 imageData 및 파일과 같은 다른 데이터 유형을 지원했습니다. 다양한 브라우저 간의 사양 지원 차이로 인해 다양한 개체 유형에 대한 지원도 다릅니다.
3.2 프레임 버스팅

프레임 버스팅 기술을 사용하면 특정 콘텐츠가 jframe에 로드되지 않도록 할 수 있습니다. 애플리케이션은 먼저 자신이 속한 창이 가장 바깥쪽 창(window.top)인지 여부를 감지합니다. 그렇지 않으면 해당 창이 포함된 프레임에서 뛰어내립니다.

JavaScript 코드
클립보드에 콘텐츠 복사

1. if(window!=window.top)
2. {
3. window.top.location=위치
4. }

3.3 바이너리 데이터
새로운 바이너리 API(예: Typed Array)를 지원하는 브라우저는 XMLHttpRequest를 사용하여 바이너리 데이터를 보낼 수 있습니다. 레벨 2 사양은 Blob 및 ArrayBuffer 객체를 전송하기 위한 send() 메서드 호출을 지원합니다
　

XML/HTML 코드클립보드에 콘텐츠 복사

1. var a = new Uint8Array([8,6,7,5,3, 0,9]); var xhr = new xhr.open("POST", "/data/ ", true); console.log(a); xhr.send(a.buffer);

XMLHttpRequest 레벨 2는 바이너리 응답 데이터도 노출합니다. responseType 속성 값을 text, document, arraybuffer 또는 blob으로 설정하여 response 속성에서 반환되는 개체 유형을 제어합니다. HTTP 응답 본문에 포함된 원시 바이트를 보려면 responseTyper 속성 값을 arraybuffer 또는 blob으로 설정해야 합니다.