前端跨域问题及解决方案 |
您所在的位置：网站首页 › 小程序面临的问题和解决方案 › 前端跨域问题及解决方案 |
前端跨域问题及解决方案
|
1、同源策略
同源策略限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。一个源的定义：如果协议，端口（如果指定了一个）和主机对于两个页面是相同的，则两个页面具有相同的源。 下表给出了相对 http://store.company.com/dir/page.html 同源检测的示例: URL 结果 原因 http://store.company.com/dir/inner/another.html 成功 同一域名 http://store.company.com/dir2/other.html 成功 同一域名下不同文件夹 https://store.company.com/secure.html 失败 不同的协议 ( https ) http://store.company.com:81/dir/etc.html 失败 不同的端口 ( 81 ) http://news.company.com/dir/other.html 失败 不同的主机 ( news ) 2、主域相同的跨域document.domain 的场景只适用于不同子域的框架间的交互，及主域必须相同的不同源。 页面可能会更改其自己的来源，但有一些限制。脚本可以将 document.domain 的值设置为其当前域或其当前域的超级域。如果将其设置为其当前域的超级域，则较短的域将用于后续原始检查。例如，假设文档中的一个脚本在 http://store.company.com/dir/other.html 执行以下语句： document.domain = "company.com";这条语句执行之后，页面将会成功地通过对 http://company.com/dir/page.html 的同源检测。 注：浏览器单独保存端口号。任何的赋值操作，包括 document.domain = document.domain 都会以 null 值覆盖掉原来的端口号。因此，company.com:8080 页面的脚本不能仅通过设置 document.domain = “company.com” 就能与 company.com 通信。赋值时必须带上端口号，以确保端口号不会为 null 。 (1) 在www.a.com/a.html中： document.domain = 'a.com'; var ifr = document.createElement('iframe'); ifr.src = 'http://www.script.a.com/b.html'; ifr.display = none; document.body.appendChild(ifr); ifr.onload = function(){ var doc = ifr.contentDocument || ifr.contentWindow.document; ifr.onload = null; }; (2) 在www.script.a.com/b.html中： document.domain = 'a.com'; // 注意：使用 document.domain 允许子域安全访问其父域时，您需要设置 document 域在父域和子域中具有相同的值。这是必要的，即使这样做只是将父域设置回其原始值。否则可能会导致权限错误。这里都是 a.com 。 3、完全不同源的跨域（两个页面之间的通信） 3.1、通过 location.hash 跨域假设域名 a.com 下的文件 cs1.html 要和 jianshu.com 域名下的 cs2.html 传递信息。 1、cs1.html 首先创建自动创建一个隐藏的 iframe，iframe 的 src 指向 jianshu.com 域名下的 cs2.html 页面。 2、cs2.html 响应请求后再将通过修改 cs1.html 的 hash 值来传递数据。 3、同时在 cs1.html 上加一个定时器，隔一段时间来判断 location.hash 的值有没有变化，一旦有变化则获取获取 hash 值。 注：由于两个页面不在同一个域下 IE、Chrome 不允许修改 parent.location.hash 的值，所以要借助于 a.com 域名下的一个代理 iframe 。 优点：1.可以解决域名完全不同的跨域。2.可以实现双向通讯。 缺点：location.hash 会直接暴露在 URL 里，并且在一些浏览器里会产生历史记录，数据安全性不高也影响用户体验。另外由于 URL 大小的限制，支持传递的数据量也不大。有些浏览器不支持 onhashchange 事件，需要轮询来获知 URL 的变化。 3.2、通过 window.name 跨域window 对象有个 name 属性，该属性有个特征：即在一个窗口 window 的生命周期内,窗口载入的所有的页面都是共享一个 window.name 的，每个页面对 window.name 都有读写的权限，window.name 是持久存在一个窗口载入过的所有页面中的。window.name 属性的神奇之处在于 name 值在不同的页面（甚至不同域名）加载后依旧存在（如果没修改则值不会变化），并且可以支持非常长的 name 值（2MB）。 window.name = data; // 父窗口先打开一个子窗口，载入一个不同源的网页，该网页将信息写入。 location = 'http://parent.url.com/xxx.html'; // 接着，子窗口跳回一个与主窗口同域的网址。 var data = document.getElementById('myFrame').contentWindow.name。// 然后，主窗口就可以读取子窗口的 window.name 了。如果是与 iframe 通信的场景就需要把 iframe 的 src 设置成当前域的一个页面地址。 3.3、通过 window.postMessage 跨域HTML5 为了解决这个问题，引入了一个全新的 API：跨文档通信 API（Cross-document messaging）。这个 API 为 window 对象新增了一个 window.postMessage 方法，允许跨窗口通信，不论这两个窗口是否同源。postMessag e的兼容性如下：
postMessage 方法的第一个参数是具体的信息内容，第二个参数是接收消息的窗口的源（origin），即"协议 + 域名 + 端口"。也可以设为 *，表示不限制域名，向所有窗口发送。 父窗口和子窗口都可以通过 message 事件，监听对方的消息。message 事件的事件对象 event ，提供以下三个属性： 1、event.source：发送消息的窗口。 2、event.origin： 消息发向的网址。 3、event.data：消息内容。一个例子： var onmessage = function (event) { var data = event.data; // 消息 var origin = event.origin; // 消息来源地址 var source = event.source; // 源Window对象 if(origin == "http://www.aaa.com"){ console.log(data);// hello world! } source.postMessage('Nice to see you!', '*'); }; if (typeof window.addEventListener != 'undefined') { window.addEventListener('message', onmessage, false); } else if (typeof window.attachEvent != 'undefined') { // ie window.attachEvent('onmessage', onmessage); } 4、请求不同源的跨域 4.1、通过 JSONP 跨域基本原理：网页通过添加一个 元素，向服务器请求 JSON 数据，这种做法不受同源政策限制；服务器收到请求后，将数据放在一个指定名字的回调函数里传回来。例子如下： function todo(data){ console.log('The author is: '+ data.name); } var script = document.createElement('script'); script.src = 'http://www.jianshu.com/author?callback=todo'; // 向服务器 www.jianshu.com 发出请求。注意，该请求的查询字符串有一个 callback 参数，用来指定回调函数的名字。 document.body.appendChild(script); // 服务器收到这个请求以后，会将数据放在回调函数的参数位置返回。 todo({"name": "fewjq"}); // 由于 元素请求的脚本，直接作为代码运行。这时，只要浏览器定义了 todo 函数，该函数就会立即调用。作为参数的 JSON 数据被视为 JavaScript 对象。优点：简单适用，老式浏览器全部支持，服务器改造小。不需要 XMLHttpRequest 或 ActiveX 的支持。 缺点：只支持 GET 请求。 4.2、通过 WebSocket 跨域WebSocket 是一种通信协议，使用 ws://（非加密）和 wss://（加密）作为协议前缀。该协议不实行同源政策，只要服务器支持，就可以通过它进行跨源通信。 4.3、通过 CORS 跨域当一个资源请求一个其它域名的资源时会发起一个跨域 HTTP 请求(cross-origin HTTP request)。比如说，域名 A 的某 Web 应用通过 正如大家所知，出于安全考虑，浏览器会拦截跨域请求的返回结果。比如，使用 XMLHttpRequest 对象和 Fetch 发起 HTTP 请求就必须遵守“同源策略”。 具体而言，Web 应用程序通过 XMLHttpRequest 对象或 Fetch 能且只能向同域名的资源发起 HTTP 请求，而不能向任何其它域名发起请求。为了能开发出更强大、更丰富、更安全的 Web 应用程序，开发人员渴望着在不丢失安全的前提下，Web 应用技术能越来越强大、越来越丰富。比如，可以使用 XMLHttpRequest 发起跨站 HTTP 请求。
跨源资源共享标准( cross-origin sharing standard) 使得以下场景可以使用跨站 HTTP 请求： 1、使用 XMLHttpRequest 或 Fetch发起跨站 HTTP 请求。 2、Web 字体 (CSS 中通过 @font-face 使用跨站字体资源)，因此，网站就可以发布 TrueType 字体资源，并只允许已授权网站进行跨站调用。 3、WebGL 贴图 4、使用drawImage绘制 5、Images/video 画面到canvas. 6、样式表（使用 CSSOM） 7、Scripts (for unmuted exceptions)所有浏览器都支持该功能，IE浏览器不能低于IE10。通过 XMLHttpRequest 对象发起。但Internet Explorer 8 和 9 可以通过 XDomainRequest 对象来实现 CORS 。可以把 CORS 分为：简单请求、预请求和附带凭证信息的请求。 4.3.1、简单请求所谓的简单，是指： （1）只使用 GET, HEAD 或者 POST 请求方法。如果使用 POST 向服务器端传送数据，则数据类型 (Content-Type) 只能是 application/x-www-form-urlencoded, multipart/form-data 或 text/plain 中的一种。 （2）不会使用自定义请求头（类似于 X-Modified 这种）。 一个例子： // 比如说，假如站点 http://foo.example 的网页应用想要访问 http://bar.other 的资源。以下的 JavaScript 代码应该会在 foo.example 上执行： var invocation = new XMLHttpRequest(); var url = 'http://bar.other/resources/public-data/'; function callOtherDomain() { if(invocation) { invocation.open('GET', url, true); invocation.onreadystatechange = handler; invocation.send(); } }
如上，通过使用 Origin 和 Access-Control-Allow-Origin 就可以完成最简单的跨站请求。不过服务器需要把 Access-Control-Allow-Origin 设置为 * 或者包含由 Origin 指明的站点。 4.3.2、预请求不同于上面讨论的简单请求，“预请求”要求必须先发送一个 OPTIONS 请求给目的站点，来查明这个跨站请求对于目的站点是不是安全可接受的。这样做，是因为跨站请求可能会对目的站点的数据造成破坏。 当请求具备以下条件，就会被当成预请求处理： （1）请求以 GET, HEAD 或者 POST 以外的方法发起请求。或者，使用 POST，但请求数据为 application/x-www-form-urlencoded, multipart/form-data 或者 text/plain 以外的数据类型。比如说，用 POST 发送数据类型为 application/xml 或者 text/xml 的 XML 数据的请求。 （2）使用自定义请求头（比如添加诸如 X-PINGOTHER） 一个例子： var invocation = new XMLHttpRequest(); var url = 'http://bar.other/resources/post-here/'; var body = '{C}{C}{C}{C}{C}{C}{C}{C}{C}{C}Arun'; function callOtherDomain(){ if(invocation){ invocation.open('POST', url, true); invocation.setRequestHeader('X-PINGOTHER', 'pingpong'); invocation.setRequestHeader('Content-Type', 'application/xml'); invocation.onreadystatechange = handler; invocation.send(body); } }如上，以 XMLHttpRequest 创建了一个 POST 请求，为该请求添加了一个自定义请求头(X-PINGOTHER: pingpong)，并指定数据类型为 application/xml。所以，该请求是一个“预请求”形式的跨站请求。浏览器使用一个 OPTIONS 发送了一个“预请求”。Firefox 3.1 根据请求参数，决定需要发送一个“预请求”，来探明服务器端是否接受后续真正的请求。 OPTIONS 是 HTTP/1.1 里的方法，用来获取更多服务器端的信息，是一个不应该对服务器数据造成影响的方法。 随同 OPTIONS 请求，以下两个请求头一起被发送： Access-Control-Request-Method: POST Access-Control-Request-Headers: X-PINGOTHER假设服务器成功响应返回部分信息如下： Access-Control-Allow-Origin: http://foo.example // 表明服务器允许 http://foo.example 的请求 Access-Control-Allow-Methods: POST, GET, OPTIONS // 表明服务器可以接受 POST, GET 和 OPTIONS 的请求方法 Access-Control-Allow-Headers: X-PINGOTHER // 传递一个可接受的自定义请求头列表。服务器也需要设置一个与浏览器对应。否则会报 Request header field X-Requested-With is not allowed by Access-Control-Allow-Headers in preflight response 的错误 Access-Control-Max-Age: 1728000 // 告诉浏览器，本次“预请求”的响应结果有效时间是多久。在上面的例子里，1728000 秒代表着 20 天内，浏览器在处理针对该服务器的跨站请求，都可以无需再发送“预请求”，只需根据本次结果进行判断处理。 4.3.3、附带凭证信息的请求XMLHttpRequest 和访问控制功能，最有趣的特性就是，发送凭证请求（HTTP Cookies和验证信息）的功能。一般而言，对于跨站请求，浏览器是不会发送凭证信息的。但如果将 XMLHttpRequest 的一个特殊标志位设置为true，浏览器就将允许该请求的发送。 一个例子： // http://foo.example 站点的脚本向 http://bar.other 站点发送一个 GET 请求，并设置了一个 Cookies 值。脚本代码如下： var invocation = new XMLHttpRequest(); var url = 'http://bar.other/resources/credentialed-content/'; function callOtherDomain(){ if(invocation) { invocation.open('GET', url, true); invocation.withCredentials = true; invocation.onreadystatechange = handler; invocation.send(); } }如上，第七行代码将 XMLHttpRequest 的withCredentials 标志设置为 true ，从而使得 Cookies 可以随着请求发送。因为这是一个简单的 GET 请求，所以浏览器不会发送一个“预请求”。但是，如果服务器端的响应中，如果没有返回 Access-Control-Allow-Credentials： true 的响应头，那么浏览器将不会把响应结果传递给发出请求的脚本程序，以保证信息的安全。 假设服务器成功响应返回部分信息如下： Access-Control-Allow-Origin: http://foo.example Access-Control-Allow-Credentials: true Set-Cookie: pageAccess=3; expires=Wed, 31-Dec-2008 01:34:53 GMT如果 bar.other 的响应头里没有 Access-Control-Allow-Credentials：true ，则响应会被忽略.。特别注意: 给一个带有 withCredentials 的请求发送响应的时候，服务器端必须指定允许请求的域名,不能使用“*”。上面这个例子中，如果响应头是这样的 Access-Control-Allow-Origin：* ，则响应会失败。在这个例子里,因为 Access-Control-Allow-Origin 的值是 http://foo.example 这个指定的请求域名，所以客户端把带有凭证信息的内容被返回给了客户端。另外注意，更多的 cookie 信息也被创建了。 CORS 的优点：CORS 支持所有类型的 HTTP 请求，是跨域 HTTP 请求的根本解决方案。 5、参考文献HTTP访问控制（CORS） |
可以看到 Internet Explorer 8+, chrome，Firefox , Opera 和 Safari 都将支持这个功能。但是 Internet Explorer 8 和 9 以及 Firefox 6.0和更低版本仅支持字符串作为 postMessage 的消息。
隶属于 W3C 的 Web 应用工作组推荐了一种新的机制，即跨源资源共享（Cross-Origin Resource Sharing ) CORS。这种机制让Web应用服务器能支持跨站访问控制，从而使得安全地进行跨站数据传输成为可能。需要特别注意的是，这个规范是针对API容器的（比如说XMLHttpReques 或者 Fetch），以减轻跨域HTTP请求的风险。
【本文地址】