浏览器同源策略

同源策略

• 指协议、域名、端口号三者完全相同是同源，否则为非同源。

• http://www.example.com/dir/page.html这个网址，协议是http://，域名是www.example.com，端口是80（默认端口可以省略）
  同源策略不限制img标签 script标签
  如果非同源，共有三种行为受到限制。

• Cookie、LocalStorage和IndexDB无法读取。

• DOM无法获得。

• AJAX请求不能发送

解决三种受限行为的方法

Cookie

• 1.一级域名不相同 二级域名相同 可通过document.domain 详见：解决跨域—document.domain
• 2.完全不同源的网站 可通过CORS 详见：解决跨域—CORS

LocalStorage

• 1.PostMessage详见：解决跨域—PostMessage

DOM无法获得

• 1.一级域名不相同 二级域名相同 document.domain 详见：解决跨域—document.domain
• 2.对于完全不同源的网站，目前有三种方法，可以解决跨域窗口的通信问题。

  • 片段识别符（fragment identifier）

    • 片段标识符（fragment identifier）指的是，URL的#号后面的部分，比如http://example.com/x.html#fragment的#fragment。如果只是改变片段标识符，页面不会重新刷新。

    • 父窗口可以把信息，写入子窗口的片段标识符。

      var src = originURL + '#' + data;
      document.getElementById('myIFrame').src = src;
      

    • 子窗口通过监听hashchange事件得到通知。

      window.onhashchange = checkMessage;
      
      function checkMessage() {
        var message = window.location.hash;
        // ...
      }
      

    • 同样的，子窗口也可以改变父窗口的片段标识符。

      parent.location.href= target + "#" + hash;
      

  • window.name ： window.name属性的独特之处：name值在不同的页面（甚至不同域名）加载后依旧存在，并且可以支持非常长的 name 值（2MB）。

  • 跨文档通信API 详见：解决跨域—PostMessage

AJAX无法发送

• 1.JSONP 详见：解决跨域—JSONP
• 2.WebSocket 详见：解决跨域—WebSocket
• 3.CORS 详见：解决跨域—CORS