跨域方法闲谈——工作中用到的跨域

2017-5-7 00:30 |来自: 互联网 1962 1

摘要: 1、JSONPJsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。为什么我们从不同的域（网站）访问数据需要一个特殊的技术(JSONP )呢？这是因为同源策 ...

跨域方法闲谈——工作中用到的跨域

1、JSONP

Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。

为什么我们从不同的域（网站）访问数据需要一个特殊的技术(JSONP )呢？这是因为同源策略。

同源策略，它是由Netscape提出的一个著名的安全策略，现在所有支持JavaScript 的浏览器都会使用这个策略。

PHP服务器端Demo：

前端HTML页面Demo：

2、CORS

当 Web 资源请求由其它域名或端口提供的资源时，会发起跨域 HTTP 请求（cross-origin HTTP request）。比如，站点 http://domain-a.com 的某 HTML 页面通过的 src 请求 http://domain-b.com/image.jpg。网络上，很多页面从其他站点加载各类资源（包括 CSS、图片、JavaScript 脚本）。

出于安全考虑，浏览器会限制脚本中发起的跨域请求。比如，使用 XMLHttpRequest和 Fetch 发起的 HTTP 请求必须遵循同源策略。因此，Web 应用通过 XMLHttpRequest 对象或 Fetch 仅能向同域资源发起 HTTP 请求。为提升 Web 应用的可用性，浏览器必须支持跨域请求。

（注：这段描述跨域不准确，跨域并非不一定是浏览器限制了发起跨站请求，而也可能是跨站请求可以正常发起，但是返回结果被浏览器拦截了。最好的例子是 CSRF 跨站攻击原理，请求是发送到了后端服务器无论是否跨域！注意：有些浏览器不允许从 HTTPS 的域跨域访问 HTTP，比如 Chrome 和 Firefox，这些浏览器在请求还未发出的时候就会拦截请求，这是一个特例。）

跨域资源共享（ CORS ）机制允许 Web 应用服务器进行跨域访问控制，从而使跨域数据传输得以安全进行。浏览器支持在 API 容器中（例如 XMLHttpRequest 或 Fetch ）使用 CORS，以降低跨域 HTTP 请求所带来的风险。

跨域资源共享标准（ cross-origin sharing standard ）允许在下列场景中使用跨域 HTTP 请求：

前文提到的由 XMLHttpRequest 或 Fetch 发起的跨域 HTTP 请求。
Web 字体 (CSS 中通过@font-face 使用跨域字体资源), 因此，网站就可以发布 TrueType 字体资源，并只允许已授权网站进行跨站调用。
WebGL 贴图
使用 drawImage 将 Images/video 画面绘制到 canvas
样式表（使用 CSSOM）
Scripts (未处理的异常)

HTML Demo页面代码：

跨域方法闲谈——工作中用到的跨域

CORS策略的关键是，后端返回的 Access-Control-Allow-Origin，其中Access-Control-Allow-Origin为*时，代表针对任何来源的请求都支付跨域，在实际工作中，Access-Control-Allow-Origin的值往往为主域下的某些子域，如 test.baidu.com等。

3、 document.domain

对于主域相同而子域不同的情况下，可以通过设置 document.domain 的办法来解决。

具体做法是可以在 http://www.abc.com/a.html 和 http://test.abc.com/b.html 两个文件分别加上 document.domain = "abc.com"；然后通过 a.html 文件创建一个 iframe，去控制 iframe 的 window，从而进行交互，当然这种方法只能解决主域相同而二级域名不同的情况。

4、postMessage

postMessage 是 HTML5 新增加的一项功能，跨文档消息传输(Cross Document Messaging)，目前：Chrome 2.0+、Internet Explorer 8.0+, Firefox 3.0+, Opera 9.6+, 和 Safari 4.0+ 都支持这项功能，使用起来也特别简单。

A页面Demo：

B页面Demo：

5、 location.hash

location是javascript里边管理地址栏的内置对象，比如location.href就管理页面的url，用location.href=url就可以直接将页面重定向url。而location.hash则可以用来获取或设置页面的标签值。比如http://domain/#admin的location.hash="#admin"。利用这个属性值可以做一个非常有意义的事情。

A页面Demo代码：

跨域方法闲谈——工作中用到的跨域