2014-12-15 8 views
5

postMessage를 사용하여 부모와 통신하는 iframe 기반 위젯이 있습니다. 즉, iframe에서 메시지 크기를 요청하기 위해 iframe에서 메시지를 보냅니다. 데이터는 json이며 현재 상위 페이지의 다른 위젯/스크립트에서 보낸 메시지를 방해합니다.onmessage 이벤트 핸들러에서 자신의 postMessage를 인식하기위한 표준 방법이 있습니까?

그래서 내 메시지를 다른 메시지와 구별하는 방법이 필요합니다.

이제 메시지를 처리하기 전에 { app: 'Poules.com', [...] } 매개 변수를 추가하고 해당 매개 변수를 확인하는 방법에 대해 생각해 보겠습니다.

하지만 내가하기 전에 : 이미이 계약이 성립 되었습니까?

보내기 코드 :

parent.postMessage(JSON.stringify(data), page.widgetOrigin); 

받기 끝 : 당신이 message 이벤트를받을 때

poules.sdk.receiveMessage = function(event) 
{ 
    var data = JSON.parse(event.data); 

    switch (data.message) 
    { 
     case 'requestResize': poules.sdk.requestResize(data); break; 
     case 'loginSuccess': poules.sdk.triggerLoginEvent(data); break; 
     default: throw "poules.sdk: can't parse message: " + event.data; 
    }; 
} 

답변

4

, 당신은 체크 event.origin 당신이 메시지를 받고 싶지는 원점에서오고 있는지 확인해야한다 에서. 일반적으로 다른 메시지와 구별하기에 충분합니다.

그래서 :

poules.sdk.receiveMessage = function(event) 
{ 
    if (event.origin != "http://poules.com") { // or whatever 
     return; 
    } 

    var data = JSON.parse(event.data); 

    switch (data.message) 
    { 
     case 'requestResize': poules.sdk.requestResize(data); break; 
     case 'loginSuccess': poules.sdk.triggerLoginEvent(data); break; 
     default: throw "poules.sdk: can't parse message: " + event.data; 
    }; 
} 

여기에는 두 가지 이유가

  1. 그것은 당신이 무슨 일을하는지와 관련이없는 창에서 메시지를 필터링하고,

  2. 그것은 악성 필터링 귀하의 위장을 가장하려고하는 메시지와 메인 페이지가해야 할 일을하도록 속이기

More about event.origin on MDN;

기원

호출 된 시간 postMessage에 메시지를 보낸 윈도우의 기원 : 여기에 캐릭터 라인을 형성하는 방법에 대한 메모입니다. 이 문자열은 프로토콜과 ": //"의 연결이며 호스트 이름이있는 경우 호스트 이름이며 포트가 있고 지정된 프로토콜의 기본 포트와 다른 경우 ":"다음에 포트 번호가옵니다. 일반적인 출처의 예로는 https://example.org (포트 443을 의미 함), http://example.net (포트 80을 암시) 및 http://example.com:8080입니다. 이 기점은 postMessage이 호출 된 이후로 다른 위치로 이동되었을 수있는 해당 창의 현재 또는 미래의 출처가 될 수 있다고 보장하지 않습니다.