HTML5 크로스 도메인 정보 상호 작용 기술의 postMessage 코드 예제에 대한 자세한 설명-H5 튜토리얼-php.cn

집

웹 프론트엔드

H5 튜토리얼

HTML5 크로스 도메인 정보 상호 작용 기술의 postMessage 코드 예제에 대한 자세한 설명

黄舟

Mar 16, 2017 pm 03:53 PM

기존 HTML 사양에는 도메인 간 요청에 대한 엄격한 제한이 있다는 것을 알고 있습니다. 이러한 제한이 없으면 직장에서 회사 내부 관리 정보 시스템을 열 때 끔찍한 일이 일어날 것이라고 상상해 보십시오. 다른 외부 웹 페이지 JS 스크립트와 같은 외부 웹 페이지의 동적 스크립트는 회사 내부 관리 정보 시스템의 내용을 스니핑할 수 있습니다. 실제로 회사의 정보를 자신도 모르게 유출하여 회사에 큰 손실을 가져올 수 있으므로 브라우저에서는 이러한 크로스 도메인 접근을 차단합니다.

그러나 실제 생활에서는 크로스 도메인 사이트 간에 합리적인 상호 작용이 있습니다. 독자는 기존 HTML 사양의 크로스 도메인 솔루션을 알 수 있습니다.
예를 들어 iframe 메소드, jsonp 메소드 등. 오늘 제가 이야기하고 싶은 것은 HTML5의 도메인 간 데이터 상호작용에 대한 지식입니다.

HTML5에는 postMessage라는 새로운 API가 도입되었습니다. 실제로 postMessage에 도메인 간 작업이 있는지 여부에 관계없이 postMessage를 사용하여 메시지를 전달하는 것이 좋습니다.

더 이상 고민하지 말고 먼저 데모를 살펴보겠습니다.
우리는 두 개의 도메인 이름 http://www.yuetong.com/
을 구성합니다. http://my.bbs.com/
http://www.yuetong.com/ 도메인 아래에 새로운 comm_main.html을 생성하고 주소는 http://www.yuetong.com/comm_main.html
입니다. 파일 내용은 다음과 같습니다

 
<!DOCTYPE html>
<html>
<head>    
    <meta charset="utf-8"/>
    <title>跨站通信 当前域 http://www.yuetong.com</title>
    <script type="text/javascript">
function sendMsg(){
    if(typeof window.postMessage == undefined){
        //
        alert("对不起 您的浏览器不支持 postMessage 特性");
        return false;
    }
    var msg = document.getElementById("message").value;
    document.getElementsByTagName("iframe")[0].contentWindow.postMessage(msg,"http://my.bbs.com");
}
var originWhiteList = ["http://my.bbs.com"];
function checkWhiteList(origin){
    for(var i=0; i< originWhiteList.length; i++){
        if(origin == originWhiteList[i]){
            return true;
        }
    }
    return false;
}
/** 接受消息 */
function messageHandler(e){
    if(checkWhiteList(e.origin)){
        processMessage(e.data);
    }else{
        // ignore message
    }
}
function processMessage(d){
    alert(d);
}
window.addEventListener("message", messageHandler, true);
    </script>
</head>
<body>
<h1>您好，我这里是http://www.yuetong.com/</h1>
<input type="text" name="message" id="message" value=""/>
<input type="button" name="handler" value="发生消息" onclick="sendMsg()"/>
<br/>
<iframe name="msg" src="http://my.bbs.com/comm_client.html" width="400" height="400"/>
<p></p>
</body>
</html>

로그인 후 복사

http://my.bbs.com/ 도메인 아래에 새로운 comm_client.html을 생성하고 주소는 http://my.bbs.com/comm_main.html이며 파일 내용은 다음과 같습니다

<!DOCTYPE html>
<html>
<head>    
    <meta charset="utf-8"/>
    <title>跨站通信 当前域 http://my.bbs.com</title>
<script type="text/javascript">
var originWhiteList = ["http://www.yuetong.com"];
function checkWhiteList(origin){
    for(var i=0; i< originWhiteList.length; i++){
        if(origin == originWhiteList[i]){
            return true;
        }
    }
    return false;
}
function messageHandler(e){
    if(checkWhiteList(e.origin)){
        processMessage(e.data);
    }else{
        // ignore message
    }
}
function processMessage(d){
    var ta = document.getElementsByTagName("textarea")[0].value;
    ta += d + "\n";
    document.getElementsByTagName("textarea")[0].value = ta;
}
function sendMsg(){
    var msg = document.getElementById("message").value;
    window.top.postMessage(msg,"http://www.yuetong.com");
}
window.addEventListener("message",messageHandler,true);
</script>
</head>
<body>
<h1>您好，我这里是 http://my.bbs.com/</h1>
<input type="text" name="message" id="message" value=""/>
<input type="button" name="handler" value="发生消息" onclick="sendMsg()"/>
<textarea name="msg" rows="15" cols="40"></textarea>
</body>
</html>

로그인 후 복사

그림 1과 같이 입력창에 "Hello, friend"를 입력하면 iframe 창에 수신된 메시지를 확인할 수 있습니다.