HTML5新秘籍：如何安全突破跨域请求限制？

跨域请求的风险与限制

HTML的规定十分警惕跨域请求，为了保护大家不被恶意网站乱拿敏感信息，防止信息泄露，杜绝安全隐患。想象下你在公司里，正打开你们公司的管理信息系统，这时突然跳出来个外网页面，要是这个页面的动态脚本能偷窥到你们公司的内容，那你们公司的秘密可就要泄露出去！这时候，浏览器就是你们的防火墙，它会硬生生地阻止这种跨域访问，保证你们的数据安全牢固，滴水不漏。

传统HTML中的跨域解决方法

大家都知道，当初设计html的时候，就特意加了个规矩，就是不让咱们在不同的网站上自由地交换信息，也不能随便拿别人家的东西。那么怎么打破这个限制？我们就得动动脑筋想办法。比如用’iframe’或者’jsonp’这两招，把不同的网页放到同一个框子里，或者拿jsonp这么个小工具。这样就能在一定程度内突破跨域请求的障碍。不过别忘了，这种方法也不是万能的，有些地方还是不太行。

HTML5中的新API：postMessage

HTML5越来越牛了，有了个新api叫postMessage，能做跨域数据交互。只要在跨域操作时，都得靠这个postMessage传消息。它安全、灵活还快，让你不用担心自家网站被人抄袭那些敏感信息。

 
nbsp;html>
    
    
    跨站通信 当前域 http://www.yuetong.com
    
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);
    您好，我这里是http://www.yuetong.com/

Demo演示与配置

要搞清楚如何用postMessage API，我们先在两个不同的网址上分别创建comm_main.html和comm_client.html这俩网页文件。然后，你需要在这几个文件里添加对应的代码。最后，看一段小例子就能明白怎么回事。这个例子会向你展示，当你在输入框里敲字时，iframe里面就能收到消息并实现推送功能。特别是， iframe里打完消息后，主页面还能准确地收到了消息并且弹出一个小框给你！

消息监听与信任站点配置

nbsp;html>
    
    
    跨站通信 当前域 http://my.bbs.com
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);
您好，我这里是 http://my.bbs.com/

用postMessage做跨网站数据交换的时候，主要就得注意设置好message的监测和处理功能，另一方面还得谨慎选好信任的网站来保证安全。监听到message事件后，咱们再仔细核实接收到的那些信息，这样就能防住搞破坏或者误操作泄露数据了。另外就是选信任的网站时要小心点，只认证过的网站咱们才能放心交流！

安全性考量与应用场景

postMessage就像是HTML5给咱们带来的一个神奇工具！用它来搞定跨站数据交互，安全性高而且好用得很。只要学会了如何巧妙地使用这个API，我们就能在各个网站间放心大胆地交换信息。不仅如此，我们还可以添加加密还有身份验证等小技巧，让数据传输更加安全无虞。不用担心，postMessage这个神器在很多Web应用环境中都特别适用，比如单点登录，广告投放，还有在线聊天什么的，都离不开它。