008-04-Ajax--跨域解决方案--需再次学习

需再次学习，多方面参照。
浏览器同源策略
浏览器跨域限制浏览器为什么会有跨域限制的问题呢？
Ajax跨域请求场景
CORS
JSONP

需再次学习，多方面参照。

浏览器同源策略

浏览器同源策略是浏览器最基本也是最核心的安全功能，它约定客户端脚本在没有明确授权的情况下，不能读写不同源的目标资源。
同源明确地表示为相同协议、域名和端口号，如果两个资源路径在协议、域名、端口号上有任何一点不同，则它们就不属于同源的资源。
另外在同源策略上，又分为两种表现形式。
- DOM同源策略。
  - 禁止对不同页面进行DOM操作，主要的场景是iframe跨域，不同域名下的iframe是会限制访问的。
- XMLHttpRequest同源策略。
  - 禁止使用XMLHttpRequest向不是同源的服务器发送Ajax请求。
    浏览器跨域限制浏览器为什么会有跨域限制的问题呢？
    
    主要是由没有遵守浏览器的同源策略引起的，浏览器对跨域访问的限制，可以在很大程度上保护用户的隐私数据安全。具体我们可以通过以下两个场景来看。
没有DOM同源策略限制
- 假如浏览器没有DOM同源策略限制，那么不同域的iframe可以相互访问，黑客就可以采用以下的方式发起攻击。
- 做一个假网站，里面用iframe嵌套一个银行网站。
- 把iframe宽高调整到占据浏览器可视区的全部空间，这样用户在进入网站后，除了域名，其余看到的内容和其他银行网站是一样的。
- 用户在输入用户名和密码后，主网站就可以跨域访问到所嵌套的银行网站的DOM节点，从而黑客就拿到用户输入的用户名和密码了。
没有XMLHttpRequest同源策略限制
- 假如浏览器没有XMLHttpRequest同源策略限制，那么黑客可以进行跨站请求伪造CSRF攻击，具体方式如下。
- 用户登录了个人银行页面A，页面A会在Cookie中添加用户信息。
- 用户浏览了恶意页面B，在恶意页面中执行了恶意Ajax请求的代码。
- 此时页面B会向页面A发送Ajax请求，该请求会默认发送用户Cookie信息。
- 页面A会从请求的cookie中提取用户信息，验证用户无误，就会返回用户的隐私数据，而此时数据就会被恶意页面B获取到，从而造成用户隐私数据的泄露。
- 由于Ajax请求的发送会自动执行，所以用户是无感知的。
- 正是有了这些危险场景的存在，同源策略的限制就显得极为重要，有了它们才能保障我们更安全地上网。
  Ajax跨域请求场景
  典型的跨域请求处理的异常问题，提示的信息可以理解为http://localhost:3000/域下没有设置Access-Control-Allow-Origin属性，不允许http://localhost:4000/的域发送请求。
  CORS
  
  通过上面的跨域请求异常信息我们可以知道，客户端不能发送跨域请求是因为服务端并不接收跨域的请求，那么如果我们将服务端设置为可以接收跨域请求，能不能成功呢？服务器端可以通过设置CORS的办法，实现方式是通过服务端对响应头的设置，接收跨域请求处理通过服务端的处理不会对前端代码做任何修改，但是由于服务端采用的语言、框架多变，处理方式会依赖各种语言的特性。

JSONP

JSONP是客户端与服务器端跨域通信最常用的解决办法，它的特点是简单适用、兼容老式浏览器、对服务器端影响小。

JSONP的主要思想可以分两步理解。
1. 在网页中动态添加一个script标签，通过script标签向服务器发送请求，在请求中会携带一个请求的callback回调函数名
2. 服务器在接收到请求后，会处理响应获取返回的参数，然后将参数放在callback回调函数中对应的位置，并将callback回调函数通过json格式进行返回。

实现方式

构建JSONP请求

构建JSONP请求实际是创建一个新的script元素，通过src属性指定跨域请求的url，并在url中携带请求成功的回调函数作为参数。

var buildJSONP = function() {
// 输入参数 学号
var studentNo = document.querySelector('#studentNo').value;
// 请求参数,其中包含回调函数
var param = 'studentNo=' + studentNo + '&callback=successFn';
// 请求的url
var url = 'http://location:3000/getUserByStudentNo?param';
var script = document.createElement('sscript');
script.scr = url;
document.body.appendChild(script)
}

使用JSONP方法的优缺点
1. 优点
  1. 使用简单，不会有兼容性问题，是目前比较流行的跨域解决方案。
2. 缺点
  1. 只支持get请求，这是JSONP目前最大的缺点。如果是post请求，那么JSONP则无法完成跨域处理。
  2. 响应依赖于其他域的实现，如果请求的其他域不安全，可能会对本域造成一定的安全性影响。
  3. 很难确定JSONP请求是否失败，虽然在HTML5中给script标签增加了onerror事件处理程序，但是存在兼容性问题。

需再次学习，多方面参照。

浏览器同源策略

浏览器跨域限制浏览器为什么会有跨域限制的问题呢？

Ajax跨域请求场景

CORS

JSONP