weixin_34174422
weixin_34174422

JavaScript 的同源策略及其"CORS"跨域方案

文章大纲

  • 同源策略

    • 同源是什么？

    • 如何跨源，以及场景应用

      • 源的更改
      • 跨源网络访问
      • 跨源脚本API访问
      • 跨源数据存储访问

  • 了解CORS

    • CORS是什么？
    • CORS功能概述
    • CORS关于Cookie
    • CORS的简单请求
    • CORS预检请求又是什么？
  • 其他
  • 参考

同源策略

同源是什么？

在web浏览器中，同源策略 限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。

如果两个页面的

  • 1.协议
  • 2.端口（如果有指定）
  • 3.域名

三者都相同，则两个页面具有相同的源。

举例说明 http://store.example.com/dir/page.html 同源检测的示例:

URL 结果 原因
http://store.example.com/index.html 成功
http://store.example.com/dir/another.html 成功
https://store.example.com/index.html 失败 不同协议 ( https和http )
http://store.example.com:81/index.html 失败 不同端口 ( 81和80)
http://news.example.com/index.html 失败 不同域名 ( news和store )
http://example.com/index.html 失败 不同域名 (store是一个单独的自域)

如何跨源，以及场景应用

以下为4种可以遇到的跨源

源的更改

页面可能会因某些限制而改变他的源。

设置 document.domain 的值，为其当前域或其当前域的父域。

场景 http://store.example.com/dir/page.html 文档中的一个脚本执行以下语句 document.domain = "company.com" 即可通过同源检测

跨源网络访问

同源策略控制了不同源之间的交互。

使用 CORS 允许跨源访问。

场景 由浏览器发起的跨域 HTTP 请求 (这个大家接触的最多)

跨源脚本API访问

Javascript的APIs中，允许文档间直接相互引用。但是当两个文档的源不同时，一些引用方式将对 API对象的访问添加限制

可以使用window.postMessage

场景 使用