Explication détaillée des exemples de code postMessage de la technologie d'interaction d'informations inter-domaines HTML5-Tutoriel H5-php.cn

Explication détaillée des exemples de code postMessage de la technologie d'interaction d'informations inter-domaines HTML5

黄舟

Libérer： 2017-03-16 15:53:18

original

1768 Les gens l'ont consulté

Nous savons que la spécification HTML traditionnelle impose des restrictions strictes sur les requêtes inter-domaines. Sans cette restriction, des choses terribles se produiraient lorsque vous ouvrez le système d'information de gestion interne de l'entreprise en même temps. une autre page Web externe. Le script dynamique de cette page Web externe tel que le script JS peut détecter le contenu du système d'information de gestion interne de votre entreprise. Si le système d'information de votre entreprise contient des informations sensibles à ce moment-là, vous avez. En fait, les informations de l'entreprise ont été divulguées sans le savoir, ce qui peut entraîner de lourdes pertes pour l'entreprise, de sorte que le navigateur bloque ces accès inter-domaines.

Mais dans la vraie vie, il existe des interactions raisonnables entre les sites inter-domaines. Les lecteurs connaissent peut-être les solutions inter-domaines dans les spécifications HTML traditionnelles,
. Par exemple, la méthode iframe, la méthode jsonp, etc. Ce dont je veux parler aujourd'hui, c'est la connaissance de l'interaction des données entre domaines dans HTML5.

HTML5 introduit une nouvelle API appelée postMessage. En fait, que postMessage ait ou non des opérations inter-domaines, il est recommandé d'utiliser postMessage pour transmettre les messages.

Sans plus tarder, regardons d’abord une démo.
Nous configurons deux noms de domaine http://www.yuetong.com/
http://my.bbs.com/
Créez un nouveau comm_main.html sous le domaine http://www.yuetong.com/, et l'adresse est http://www.yuetong.com/comm_main.html
Le contenu du fichier est le suivant

 
<!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>

Copier après la connexion

Créez un nouveau comm_client.html sous le domaine http://my.bbs.com/, l'adresse est http://my.bbs.com/comm_main.html et le contenu du fichier est le suivant

<!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>

Copier après la connexion

Comme le montre la figure 1, lorsque vous saisissez « Bonjour, ami » dans la zone de saisie, vous pouvez voir le message reçu dans la fenêtre iframe.

Image 1

Nous entrons "Je vais bien" dans la fenêtre iframe, et la fenêtre principale reçoit le message et affiche la boîte de dialogue

Le plus important est d'ajouter la surveillance et le traitement des messages, ainsi que la configuration des sites de confiance.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

Explication détaillée des exemples de code postMessage de la technologie d'interaction d'informations inter-domaines HTML5