postmessage 예제

다른 사이트에서 메시지를 받을 것으로 예상되는 경우 항상 원본 및 원본 속성을 사용하여 보낸 사람의 ID를 확인합니다. 모든 창(예: http://evil.example.com)은 다른 창으로 메시지를 보낼 수 있으며 알 수 없는 보낸 사람이 악의적인 메시지를 보내지 않을 것이라는 보장은 없습니다. 그러나 ID를 확인하면 항상 수신된 메시지의 구문을 확인해야 합니다. 그렇지 않으면 신뢰할 수 있는 메시지만 보낼 수 있는 신뢰할 수 있는 사이트의 보안 구멍이 사이트의 교차 사이트 스크립팅 구멍을 열 수 있습니다. 자식 iframe에서 부모에 이르기까지 예제를 oposite 메시지 흐름과 결합하는 것이 좋습니다. IMO는 더 일반적인 문제 (iframe URL의 매개 변수를 얻을 수 있는 iframe에 값을 전달) 프로세스의 첫 번째 부분은 “소스”를 설정 하는. 소스를 사용하면 새 창(또는 원하는 경우 IFrame)을 열고 새 창 메시지를 보내고(예제를 위해 6초마다 메시지를 보내고 대상 창에서 수신하는 응답에 대한 이벤트 리스너를 만듭니다). 이것은 iframe과 다른 페이지 간의 통신에 대해 아주 잘 설명하고 간단한 예입니다. 코드 아카이브를 다운로드하고 이 예제를 직접 설정해 보십시오. JavaScript 코드의 도메인을 사용자 고유의 도메인과 일치하도록 변경해야 합니다. postMessage()는 보류 중인 모든 실행 컨텍스트가 완료된 후에만 MessageEvent를 전달하도록 예약합니다.

예를 들어, postMessage()가 이벤트 처리기에서 호출되는 경우 해당 이벤트 처리기는 MessageEvent가 전달되기 전에 동일한 이벤트에 대한 나머지 처리기와 마찬가지로 완료될 때까지 실행됩니다. 이 위대한 라이브 예제주셔서 감사합니다. 보안 담당자로서 출력으로 전송되기 전에 메시지 부분을 이스케이프 /삭제해야 한다고 덧붙입니다(예: json 데이터는 JSON.parsed여야 합니다). 또한 원본은 보낸 사용자가 타사 도메인에 중요한 데이터를 공개하지 않도록 지정해야 하며 신뢰할 수 있는 도메인에서만 msgs를 수락하도록 수신자(이벤트 처리기)에서 확인해야 합니다. 아래 예제에서는 기본 제한 집합이 있는 샌드박스된 iframe을 보여 줍니다. 그것은 일부 자바 스크립트와 양식이 있습니다. receiverWindow는 메시지가 전송되는 수신자 창에 대한 참조입니다. 예를 들어 페이지에 단일 iframe 요소가 있는 경우 document.getElementsByTagName(“iframe”)[0].contentWindow로 액세스할 수 있습니다. 또한 window.open()에서 열리는 새 브라우저 창일 수도 있습니다.

이제 postMessage()를 사용하여 서로 다른 도메인의 두 창 간에 메시지를 전달하는 방법을 이해하게 되었으므로 예제를 살펴보겠습니다. 예를 들어, 여기에서 승리는 http://example.com 원본에서 문서가있는 경우에만 메시지를 받게됩니다 : 나는 버튼및 이벤트 리스너와 함께 작동하도록이 있어하지만 메시지만 페이지 로드에 보내도록 고군분투하고 있습니다. 가능합니까? 예제에서 실제로 변경 한 유일한 것은 div가 아닌 iframe의 입력 값으로 메시지를 보내는 것입니다.