web知识（三）

一.跨域产生的原因：
浏览器的同源策略导致了跨域

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

这是浏览器的机制，所以跨域产生在前端，后台不会产生跨域。
2.浏览器是从两个方面去做这个同源策略的：
  1）DOM 同源策略【Dom的操作】：禁止对不同源页面 DOM 进行操作。
  这里主要场景是 iframe 跨域的情况，不同域名的 iframe 是限制互相访问的。
  2）XMLHttpRequest 同源策略【接口的请求】：禁止使用 XHR 对象向不同源的服务器地址发起 HTTP 请求。
3.是否同源：【协议、端口、域名都相同才是同源】。不同源浏览器就会进行跨域限制。
4.跨域限制的内容：
1）禁止非同源dom操作
2）禁止接口请求
3）禁止获取cookie、、localStorage、以及sessionStorage内容

三.没有同源策略会导致的危害
1.Dom同源策略导致伪造的iframe导致用户信息泄露。
做一个假网站，里面用 iframe 嵌套一个银行网站 http://mybank.com。
把 iframe 宽高啥的调整到页面全部，这样用户进来除了域名，别的部分和银行的网站没有任何差别。
这时如果用户输入账号密码，我们的主网站可以跨域访问到 http://mybank.com 的 dom 节点，就可以拿到用户的账户密码了。
2.导致CSRF（Cross-site request forgery）攻击。
CSRF:中文名称,跨站请求伪造【（攻击者通过cookie等盗用了你的身份，以你的名义发送恶意请求。）】
CSRF能够做的事情包括：以你名义发送邮件，发消息，盗取你的账号，甚至于购买商品，虚拟货币转账.....
解决cookie安全：
服务端设置httpOnly，使得前端无法操作cookie
前后端请求，增加token秘钥校验拦截

四.跨域问题解决方式
1.CORS（Cross-origin resource sharing，跨域资源共享）（跨域资源共享）
CORS是一个 W3C 标准，定义了在必须访问跨域资源时，浏览器与服务器应该如何沟通。
CORS 背后的基本思想，就是【使用自定义的 HTTP 头部让浏览器与服务器进行沟通】，从而决定请求或响应是应该成功，还是应该失败。
CORS 【需要浏览器和服务器同时支持】。
CORS 通信与同源的 AJAX 通信没有差别，代码完全一样。【浏览器一旦发现 AJAX 请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉】。
因此，实现 【CORS 通信的关键是服务器。只要服务器实现了 CORS 接口，就可以跨源通信】。
CORS请求:简单请求和非简单请求
1）简单请求：
a.方法：HEAD、GET、POST.
b.HTTP的头信息不超出以下几种字段：
Accept、Accept-Language、Content-Language、Last-Event-ID、
Content-Type：只限于三个值 application/x-www-form-urlencoded、multipart/form-data、text/plain
2)凡是不同时满足上面两个条件，就属于非简单请求。
2.JSONP 跨域
由于 script 标签不受浏览器同源策略的影响，允许跨域引用资源。
因此可以通过动态创建 script 标签，然后利用 src 属性进行跨域，这也就是 JSONP 跨域的基本原理。

eg:
// 1. 定义一个 回调函数 handleResponse 用来接收返回的数据
function handleResponse(data) {
console.log(data);
};
// 2. 动态创建一个 script 标签，并且告诉后端回调函数名叫 handleResponse
var body = document.getElementsByTagName("body")[0];
var script = document.gerElement("script");
script.src = "http://www......?callback=handleResponse";
body.appendChild(script);
// 3. 通过 script.src 请求 `http://www.laixiangran.cn/json?callback=handleResponse`，
// 4. 后端能够识别这样的 URL 格式并处理该请求，然后返回 handleResponse({"name": "laixiangran"}) 给浏览器
// 5. 浏览器在接收到 handleResponse({"name": "laixiangran"}) 立即执行handleResponse 方法，获得后端返回的数据，完成一次跨域请求了。
优点：简单、没有兼容性问题。
缺点：只支持get请求、由于是从其它域中加载代码执行，因此如果其他域不安全，很可能会在响应中夹带一些恶意代码。

3.图像 Ping 跨域
由于 img 标签不受浏览器同源策略的影响，允许跨域引用资源。
因此可以通过 img 标签的 src 属性进行跨域，这也就是图像 Ping 跨域的基本原理。
4.服务器代理
浏览器有跨域限制，但是服务器不存在跨域问题，所以可以由服务器请求所要域的资源再返回给客户端。
服务器代理是万能的。
5.document.domain 跨域
6.window.name 跨域
7.postMessage 跨域
window.postMessage(message，targetOrigin) 方法是 HTML5 新引进的特性.
可以使用它来向其它的 window 对象发送消息，无论这个 window 对象是属于同源或不同源。这个应该就是以后解决 dom 跨域通用方法了。

页面A：
var win = iframe.contentWindow;
win.postMessage("我是来自 http://www.laixiangran.cn/a.html 页面的消息", "*");
页面B：
window.onmessage = function(e) {
  e = e || event; // 获取事件对象
  console.log(e.data); // 通过 data 属性得到发送来的消息
}

参考链接： CSRF:https://www.cnblogs.com/hyddd/archive/2009/04/09/1432744.html;
参考链接： 跨域问题解决：https://segmentfault.com/a/1190000015597029;
参考链接： 跨域问题解决：https://www.cnblogs.com/laixiangran/p/9064769.html;