JSONP_跨域

[yongheng2016]

题目1： 什么是同源策略

• 同源策略（Same Origin Policy ）： 浏览器出于安全方面的考虑，只允许与本域下的接口交互。不同源的客户端脚本在没有明确授权的情况下，不能读写对方的资源。

• 满足同源的条件：

  • 同协议：如都是http或https
  • 同域名：如都是http://abc.com/a 和http://abc.com/b
  • 同端口： 如都是80端口

• note：对于当前页面来说页面存放的 JS 文件的域不重要，重要的是加载该 JS 页面所在什么域

阮一峰(浏览器同源政策及其规避方法)：http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html

题目2： 什么是跨域？跨域有几种实现形式

• 跨域：只要协议、域名、端口有任何一个不同，就是不同的域，它们之间的访问就是跨域；
• 跨域的形式：

㈠ JSONP（只支持GET请求，依赖性大，需要后端支持，容易遭受xss攻击）

html中script标签可以应用其它域下的js，利用这个特性能实现跨域访问接口，但需要后端的修改代码支持：

• 1. 跨域端后台需要定义js文件的处理函数_fun
• 2. 创建script标签引入跨域端js文件
• 3. 跨域端接受到请求后，解析参数，计算返还数据
• 4. fun(data)会放到script标签作为js执行，此时会调用fun函数，将data作为参数

㈡ CORS（跨域资源共享)、(支持所有类型的http请求）

一种 ajax 跨域请求资源的方式，支持现代浏览器，IE支持10以上

两种请求方式： 同时满足以下两种请求方式就是简单请求：

1.请求方法是以下三种方法之一

• HEAD
• GET
• POST

2.HTTP的信息头不超出以下几种字段

• Accept
• Accept-language
• Content-language
• Last-event-ID
• Content-Type：只限于三个值application/x-www-form-urlen'coded、multipart-form-data、text-plain

简单请求：

对于简单请求，浏览器直接发出CORS请求。具体来说，就是在头信息之中，增加一个Origin（包裹协议，端口，域名）字段。

非简单请求：

非简单请求是那种对服务器有特殊要求的请求，比如请求方法是PUT或DELETE，或者Content-Type字段的类型是application/json。 非简单请求的CORS请求，会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求（preflight）。

request.header("Access-Control-Allow-Origin","http://abc.com")  //后端给了认证，那么此域下发出的跨域请求，浏览器就不会拦截了

㈢ 降域（不同域之间读取cookie）

cookie之间只有同源网页之间才能共享，但如果两个网页一级域名相同，只是二级域名不同时，浏览器允许通过设置document.domain共享cookie

note：这种方法只适用于 Cookie 和 iframe 窗口，LocalStorage 和 IndexDB 无法通过这种方法，规避同源政策，而要使用下文介绍的PostMessage API。

㈣ window.postMessage

• HTML5引入的新API（跨文档通信API）为window对象新增了一个window.postMessage方法，此方法允许跨窗口通信（无论是否同源）
• postMessage方法的第一个参数是具体的信息内容，第二个参数是接收消息的窗口的源（origin），即"协议 + 域名 + 端口"。也可以设为*，表示不限制域名，向所有窗口发送。
• 举例来说，父窗口http://aaa.com向子窗口http://bbb.com发消息，调用postMessage方法就可以了。

var popup = window.open('http://bbb.com', 'title');
popup.postMessage('Hello World!', 'http://bbb.com');

子窗口向父窗口发送消息的写法类似。

window.opener.postMessage('Nice to see you', 'http://aaa.com');

• 通过window.postMessage，读写其他窗口的 LocalStorage 也成为了可能。

题目3： JSONP 的原理是什么

JSONP是服务器与客户端跨源通信的常用方法。最大特点就是简单适用，老式浏览器全部支持，服务器改造非常小。

原理：网页通过添加一个<script>元素，向服务器请求JSON数据，这种做法不受同源政策限制；服务器收到请求后，将数据放在一个指定名字的回调函数里传回来。

题目4： CORS是什么

CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。 它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。

阮一峰(跨域资源共享 CORS 详解)：http://www.ruanyifeng.com/blog/2016/04/cors.html