同源策略 & 跨域解决方案

题目1：什么是同源策略

同源策略限制了从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制。
同源指的是同协议、同域名且同端口。

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

跨域：请求不同源（只要协议名、域名、端口号中任意一个不同即构成不同源）的资源。
实现形式：

JSONP(JSON with padding)
- 缺点：
  - 只能发起GET请求
  - 比起AJAX，支持不够全面。无法通过注册一些事件监听函数进行其他处理。
  - 需确定访问的异域服务器不会返回恶意的代码
  - 需注意抵御CSRF漏洞：网站通过JSONP跨域传递用户认证后的敏感信息时，攻击者可以构造恶意的JSONP调用页面，诱导被攻击者访问，以达到截取用户敏感信息的目的。
CORS(Cross-origin resource sharing)
- 缺点：
  - 兼容性问题。在IE8/9上，需使用XDR(XDomainRequest)代替XHR。
降域
- 缺陷：
  - 两个网站均需要设置document.domain的值
  - 安全性问题：当一个站点被攻击，相同域名的站点也会被攻击
  - 不可更改：一旦降域后无法逆向
window.postMessage

题目3： JSONP 的原理是什么

JSONP的主要原理是，<script>标签不受同源策略影响，可加载异域服务器上的js脚本以执行。利用该原理，后端将数据封装成一句js执行语句（函数执行语句）。前端在加载执行该语句时，调用预先声明好的函数，即可完成对数据的处理。

题目4： CORS是什么

基本思想是使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功还是失败。CORS 需要客户端和服务器同时支持。目前，所有浏览器都支持该机制，会自动添加对应首部进行协商。

CORS分为两种情况，分为简单请求和非简单请求

若请求满足所有下述条件，则该请求可视为“简单请求”：

使用下列方法之一：
GET
HEAD
POST
Fetch 规范定义的对 CORS 安全的首部字段集合，不得人为设置该集合之外的其他首部字段。该集合为：
Accept
Accept-Language
Content-Language
Content-Type （需要注意额外的限制）
DPR
Downlink
Save-Data
Viewport-Width
Width
Content-Type 的值属于下列之一：
application/x-www-form-urlencoded
multipart/form-data
text/plain

对于简单请求

浏览器直接发出CORS请求，即在头部自动加上origin字段，说明来自哪个源（协议 + 域名 + 端口）。
服务器返回一个添加了几个头部信息字段的HTTP Response说明是否可以同意本次请求。其中带有Access-Control-Allow-Origin字段说明指定了允许访问该资源的外域URI（带有通配符*说明允许来自所有域的请求）。如Access-Control-Allow-Origin字段不匹配或是不包含该字段，浏览器则会抛出一个错误，被XMLHttpRequest的onerror回调函数捕获。（注意：不能通过HTTP Response的状态码来识别）

对于非简单请求

浏览器会自动使用OPTIONS方法发起一个预检请求到服务器，以获知服务器是否允许该实际请求。该预检请求中包含有origin、Access-Control-Request-Method、Access-Control-Request-Headers分别说明源站URI、实际请求的方法、实际请求所携带的首部字段。
服务器收到预检请求后检查origin、Access-Control-Request-Method、Access-Control-Request-Headers字段后，回复一个带有Access-Control-Allow-Origin、Access-Control-Allow-Methods、Access-Control-Allow-Headers说明服务器对应允许跨域访问的URI、请求方法以及请求头部字段。
服务器通过了"预检"请求之后，基本和简单请求一样。浏览器每次请求带上origin字段，服务器回应带上Access-Control-Allow-Origin。

题目5：根据视频里的讲解演示三种以上跨域的解决方式(代码)

JSONP
下例是一个简单的demo，点击按钮后向http://www.kaisla.com:8080/loadMusic跨域请求三首随机歌曲名。
效果如下

实现如下

页面点击button后，动态创建了一个script节点。

$("button").addEventListener("click", function(){
        var script = document.createElement("script")
        var url = "http://www.kaisla.com:8080/loadMusic?callback=getChannel"
        script.setAttribute("src", url)
        $("body").appendChild(script)
        //the script tag could be removed after script has been loaded and executed
        $("body").removeChild(script)
    },false)

相当于在body尾部增加了以下语句，加载脚本执行。

<script src="http://www.kaisla.com:8080/loadMusic?callback=getChannel"></script>

可以看到，浏览器向http://www.kaisla.com:8080/loadMusic发起了一个get请求，并传递了一对值callback=getChannel给后台。而script加载脚步的请求是允许跨域的。

jsonp-request.png

后台将准备发回给前端的数据用callback参数的值填充成一句形似函数执行语句的字符串（以callback的值作为函数名，以数据作为函数的参数）。

router.get("/loadMusic", function(req, res) {
    var channelList = [
        "绿洲",
        "当我找到了你",
        "寻人启事",
        "理想人生",
        "不怕庆祝",
        "出口",
        "潜规则"
    ]
    var retuArr = []
    for (let i = 3; i > 0; i--){
        retuArr.push(channelList[Math.floor(Math.random() * channelList.length)])
    }
    var retuStr = req.query.callback + "(" + JSON.stringify(retuArr) + ")"
    res.send(retuStr)
})

返回的数据如下

jsonp-response.png

浏览器加载完该语句后会直接执行，调用已经定义好的getChannel函数，替换列表的文字。

  function getChannel(object) {
    if (!$("ul.channelList")) {
      var channelList = document.createElement("ul")
      channelList.classList.add("channelList")
      for (let i = 3; i > 0; i--) {
        var channelItem = document.createElement("li")
        channelList.appendChild(channelItem)
      }
      $("body").append(channelList)
    }
    $$("ul.channelList>li").forEach(function(element, index) {
      element.innerText = object[index]
    })
  }

window.postMessage()
下例一个跨窗口通信的小demo。一旦在一个输入框输入值，另一个窗口的输入框内也会同步显示。
效果如下

postMessage.png

实现如下

http://localhost:8080/jsonp.html:8080/postMessage.html中，内置一个iframe跨域加载http://www.kaisla.com:8080/postMessage-received.html页面。

  <div class="wrap">
    <h2>Sender</h3>
    <h3>localhost:8080/postMessage.html</h1>
    <label for="username">用户名</label>
    <input type="text" name="username" id="username" placeholder="localhost:8080/postMessage.html">
  </div>
  <iframe src="http://www.kaisla.com:8080/postMessage-received.html"></iframe>

一旦捕获到输入，对目标窗口调用postMessage()，发送输入框的值

$("input").addEventListener("input",function(){
    window.frames[0].postMessage(this.value,"http://www.kaisla.com:8080/postMessage-received.html")
    })

http://www.kaisla.com:8080/postMessage-received.html中
对window进行监听，一旦触发message事件，立即将数据赋给输入框的值。

window.addEventListener("message",function(e){
      $("input").value = e.data;
    })

实现双向通信，与1~2同理，设置postMessage()和message事件的监听器。详见源码。

CORS
下例是一个简单请求的demo，点击按钮后向http://www.kaisla.com:8080/loadNews跨域请求三条新闻名。
效果如下

实现如下

前端的代码中，我们可以看到只是发送了一个简单的ajax请求，没有做其他处理。

  $("button").addEventListener("click", function() {
      ajax({
          url: "http://www.kaisla.com:8080/loadNews",
          type: "get",
          data: {
            index: index,
            length: length
          },
          success: loadNews
      })
  })

可以看到，浏览器自动在请求首部添加了Origin:http://localhost:8080。

request.png

后台不添加Access-Control-Allow-Origin字段时，查看控制台，发现会报一个not an allowed access的错误（注意状态码可能为200/304）
后台在处理请求时在response的首部添加了Access-Control-Allow-Origin:*

router.use("/loadNews",function(req, res){
  var index = Number(req.query.index)
  var length = Number(req.query.length)
  var info = []
  for(let i = index + 1; i < index + length + 1; i++){
    info.push("新闻"+ i)
  }
  res.header("Access-Control-Allow-Origin", "*");
  res.send(info)
})

正常返回数据

同源策略 & 跨域解决方案

题目1： 什么是同源策略

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