跨域

下一个Tab
278 阅读9分钟

同源策略

定义

同源策略Same Origin Policy: 同源是指域名，协议，端口完成一致，那么这两个url就是同源。同源策略是一种约定，它是浏览器最核心也最基本的安全功能，也是浏览器故意设置的一个功能限制。如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。使用代码window.origin或者location.origin可以获取当前的源。源 = 协议+域名+端口号。

同源的限制

如果JS脚本文件运行在源A中，那么就只能获取源A的数据，不能获取源B的数据，即不允许跨域

同源情况下的限制行为：

1.) Cookie、LocalStorage 和 IndexDB 无法读取
2.) DOM 和 Js对象无法获得
3.) AJAX 请求不能发送

但是有三个标签是允许跨域加载资源：

1.) <img src=XXX>
2.) <link href=XXX>
3.) <script src=XXX>

常见跨域行为

请注意：localhost和127.0.0.1虽然都指向本机，但也属于跨域。

浏览器执行javascript脚本时，会检查这个脚本属于哪个页面，如果不是同源页面，就不会被执行。

URL                                      说明                    是否允许通信
http://www.domain.com/a.js
http://www.domain.com/b.js         同一域名，不同文件或路径           允许
http://www.domain.com/lab/c.js

http://www.domain.com:8000/a.js
http://www.domain.com/b.js         同一域名，不同端口                不允许
 
http://www.domain.com/a.js
https://www.domain.com/b.js        同一域名，不同协议                不允许
 
http://www.domain.com/a.js
http://192.168.4.12/b.js           域名和域名对应相同ip              不允许
 
http://www.domain.com/a.js
http://x.domain.com/b.js           主域相同，子域不同                不允许
http://domain.com/c.js
 
http://www.domain1.com/a.js
http://www.domain2.com/b.js        不同域名                         不允许

疑问：

  • 疑问1: 请求跨域了，那么请求到底发出去没有？

跨域并不是请求发不出去，请求能发出去，服务端能收到请求并正常返回结果，只是结果被浏览器拦截了。你可能会疑问明明通过表单的方式可以发起跨域请求，为什么Ajax 就不会?因为归根结底，跨域是为了阻止用户读取到另一个域名下的内容，Ajax 可以获取响应，浏览器认为这不安全，所以拦截了响应。但是表单并不会获取新的内容。同时也说明了跨域并不能完全阻止CSRF，因为请求毕竟是发出去了。

  • 疑问2: 为什么两个网站的IP或者域名一样，也是跨域？

因为历史上，出现过不同公司共用IP或者共用域名的情况, 所以浏览器谨慎起见，认为这是不同的源。

  • 疑问3: 为什么跨域可以使用CSS, JS和图片等等？

因为同源策略限制的是数据访问，我们引用CSS，JS和图片的时候，并不知道其中的内容，不是在读取，仅仅只是在引用而已。

跨域定义

跨域Cross-Domain：跨域是指从一个域名的网页去请求另一个域名的资源。比如从www.baidu.com页面去请求www.google.com 的资源。但是一般情况下不能这么做，它是由浏览器的同源策略造成的，是浏览器对JavaScript施加的安全限制。跨域的严格一点的定义是：只要协议，域名，端口有任何一个的不同，就被当作是跨域

限制跨域的原因

  1. 如果一个用户，登录网银，进行操作，Cookie会生成，并存储在浏览器中
  2. 接着，用户无意点入一个钓鱼网址，这个钓鱼网站得到网银的Cookie, 读取你的用户信息，然后对用户的网银进行操作
  3. 钓鱼网站的JS请求和网银网站的JS请求几乎没有区别，referrer有区别，但是如果后台程序员不做检查，就完全没有区别
  4. 结论：如果浏览器不限制跨域，这种情况下，用户的信息安全得不到保障，任何网站都有可能任意访问，请求到用户的信息，操作行为等等。

CORS跨域

定义

跨域资源共享Cross-Origin Resource Sharing: 定义了必须在访问跨域资源时，浏览器与服务器应该如何沟通。CORS背后的基本思想就是使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功还是失败。

原理

浏览器会自动进行CORS通信，实现CORS 通信的关键是后端。只要后端实现了CORS，就实现了跨域。如果浏览器检测到相应的设置，就可以允许Ajax进行跨域的访问。

服务端通过设置Access-Control-Allow-Origin就可以开启CORS。 该属性表示哪些域名可以访问资源，如果设置通配符则表示所有网站都可以访问资源。

分类

  • 简单跨域请求：

简单跨域请求：只服务端设置Access-Control-Allow-Origin即可，前端无须设置。只要同时满足以下两大条件，就属于简单请求:

条件1：使用下列方法之一：

GET
HEAD
POST

条件2：Content-Type的值仅限于下列三者之一：

text/plain
multipart/form-data
application/x-www-form-urlencoded

代码为：

//指定允许其他域名访问或指定域
res.setHeader('Access-Control-Allow-Origin: *')
//响应类型
res.setHeader('Access-Control-Allow-Methods:GET,POST')
//响应头设置
res.setHeader('Access-Control-Allow-Headers:x-requested-with,content-type')
  • 复杂跨域请求:

复杂跨域请求: 若要带cookie请求,那么前后端都需要设置。话句话说，不符合以上条件的请求就肯定是复杂请求了。 复杂请求的CORS请求，会在正式通信之前，增加一次HTTP查询请求，称为”预检”请求,该请求是option 方法的，通过该请求来知道服务端是否允许跨域请求。

代码为：


// 允许哪个方法访问我
res.setHeader('Access-Control-Allow-Methods', 'PUT')
// 预检的存活时间
res.setHeader('Access-Control-Max-Age', 6)
// OPTIONS请求不做任何处理
if (req.method === 'OPTIONS') {
  res.end() 
}
// 定义后台返回的内容
app.put('/getData', function(req, res) {
  console.log(req.headers)
  res.end('我不爱你')
})

完整代码

// 前端代码
let xhr = new XMLHttpRequest()
document.cookie = 'name=xiamen' // cookie不能跨域
xhr.withCredentials = true // 前端设置是否带cookie
xhr.open('PUT', 'http://localhost:4000/getData', true)
xhr.setRequestHeader('name', 'xiamen')
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) {
    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
      console.log(xhr.response)
      //得到响应头，后台需设置Access-Control-Expose-Headers
      console.log(xhr.getResponseHeader('name'))
    }
  }
}
xhr.send()

//后端，服务器代码
let express = require('express');
let app = express();
app.use(express.static(__dirname));
app.listen(3000);
//server2.js
let express = require('express')
let app = express()
let whitList = ['http://localhost:3000'] //设置白名单
app.use(function(req, res, next) {
  let origin = req.headers.origin
  if (whitList.includes(origin)) {
    // 设置哪个源可以访问我
    res.setHeader('Access-Control-Allow-Origin', origin)
    // 允许携带哪个头访问我
    res.setHeader('Access-Control-Allow-Headers', 'name')
    // 允许哪个方法访问我
    res.setHeader('Access-Control-Allow-Methods', 'PUT')
    // 允许携带cookie
    res.setHeader('Access-Control-Allow-Credentials', true)
    // 预检的存活时间
    res.setHeader('Access-Control-Max-Age', 6)
    // 允许返回的头
    res.setHeader('Access-Control-Expose-Headers', 'name')
    if (req.method === 'OPTIONS') {
      res.end() // OPTIONS请求不做任何处理
    }
  }
  next()
})
app.put('/getData', function(req, res) {
  console.log(req.headers)
  res.setHeader('name', 'jw') //返回一个响应头，后台需设置
  res.end('我不爱你')
})
app.get('/getData', function(req, res) {
  console.log(req.headers)
  res.end('我不爱你')
})
app.use(express.static(__dirname))
app.listen(4000)

JSONP跨域

定义

填充式json(JSON with Padding): 是应用JSON的一种新方法，只不过是被包含在函数调用中的JSON。

JSONP由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数，而数据就是传入回调函数中的JSON数据。

原理

利用 <script>标签没有跨域限制的漏洞，网页可以得到从其他来源动态产生的JSON 数据。通过script标签引入一个js文件，这个js文件载入成功后会执行我们在url参数中指定的函数，并且会把我们需要的json数据作为参数传入。所以jsonp是需要服务器端的页面进行相应的配合的。（即用javascript动态加载一个script文件，同时定义一个callback函数给script执行而已。）在js中，我们直接用XMLHttpRequest请求不同域上的数据时，是不可以的。但是，在页面上引入不同域上的js脚本文件却是可以的，jsonp正是利用这个特性来实现的。注意：JSONP请求一定需要对方的服务器做支持才可以。

实例1

请求界面的代码：

<script type="text/javascript">
    function dosomething(jsondata){
        //处理获得的json数据
    }
</script>
<script src="http://example.com/data.php?callback=dosomething"></script>

js文件载入成功后会执行我们在url参数中指定的函数，并且会把我们需要的json数据作为参数传入。所以jsonp是需要服务器端的页面进行相应的配合的。最终，输出结果为：dosomething(['a','b','c']); 被请求页面的代码：

![](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/4/170a45adca73a602~tplv-t2oaga2asx-image.image)
<?php
$callback = $_GET['callback'];//得到回调函数名
$data = array('a','b','c');//要返回的数据
echo $callback.'('.json_encode($data).')';//输出
?>

实例2

// 请求页面的前端代码(另一个域名的js文件)
const script = document.createElement('script')
script.src = 'http://qq.com:8888/friend.js'
document.body.appendChild(script)
window.xxx = (data) =>{
    console.log(data)
}

// 服务器端的js代码(friend.js)
window.xxx({{data}})

// 后端，服务器代码
else if (path === '/friend.js'){
    reponse.statusCode = 200
    reponse.setHeader('Content-Type', 'text/javascript;charset = utf-8')
    const string = fs.readFileSync('./public/friend.js').toString()
    const data = fs.readFileSync('./public/friend.json').toString()
    const string2 = string.replace('{{data}}', data)
    reponse.write(string2)
    reponse.send()
}

过程：

  1. 服务器将数据写到friend.js上
  2. 请求页面的用<script>标签引用friend.js
  3. friend.js执行，执行事先定义好的的window.xxx函数
  4. 请求页面通过window.xxx函数得到jsons数据
  5. 事实上，window.xxx函数就是一个回调函数
  6. 通过设置服务器端的referer检查，可以限制为固定网站访问服务器，进行跨域

优化

// 请求页面的前端代码(另一个域名的js文件)
function ajax(method, url) {
  return new Promise((resolve, reject) => {
    const request = new XMLHttpRequest();
    request.open(method, url);
    request.onreadystatechange = () => {
      if (request.readyState === 4) {
        if (request.status === 200) {
          resolve(request.response);
        } else {
          reject(request);
        }
      }
    };
    request.send();
  });
}
ajax("get", "http://qq.com:8888/friends.json").then(response => {
  console.log("这是 AJAX");
  console.log(response);
});
function jsonp(url) {
  return new Promise((resolve, reject) => {
    const random = "frankJSONPCallbackName" + Math.random();
    window[random] = data => {
      resolve(data);
    };
    const script = document.createElement("script");
    script.src = `${url}?callback=${random}`;
    script.onload = () => {
      script.remove();
    };
    script.onerror = () => {
      reject();
    };
    document.body.appendChild(script);
  });
}

jsonp("http://qq.com:8888/friends.js").then(data => {
  console.log(data);
});

// 服务器端的js代码(friend.js)
window['{{xxx}}']( {{data}} )

// 后端，服务器代码
else if (path === "/friends.js") {
    if (request.headers["referer"].indexOf("http://frank.com:9990") === 0) {
      response.statusCode = 200;
      response.setHeader("Content-Type", "text/javascript;charset=utf-8");
      const string = `window['{{xxx}}']({{data}}) `
      const data = fs.readFileSync("./public/friends.json").toString();
      const string2 = string.replace("{{data}}", data).replace('{{xxx}}', query.callback);
      response.write(string2);
      response.end();
    }

二者对比

1、 JSONP只能实现GET请求，而CORS支持所有类型的HTTP请求。

2、 使用CORS，开发者可以使用普通的XMLHttpRequest发起请求和获得数据，比起JSONP有更好的错误处理。

3、 JSONP主要被老的浏览器支持，例如IE。它们往往不支持CORS，而绝大多数现代浏览器都已经支持了CORS。

面试问题：JSONP

问题：JSONP是什么? JSONP是跨域的时候，由于当前浏览器不支持CORS,或由于某些条件不支持CORS, 我们必须使用另外一种方式来跨域，于是我们就请求一个JS文件，这个JS文件会执行一个回调函数，这个回调函数里面就有我们的数据，这个回调函数的名字是前端随机生成的随机数，然后我们把名字作为callBack的参数传给后端，然后后端会把函数再次返回给前端执行。

JSONP的优点是可以兼容IE,可以跨域。

JSONP的缺点是由于是<script>标签，不能像AJAX一样读取到精确的状态码，不能获取响应头参数，只知道成功和失败。其次，只能发送GET请求, 不支持POST等请求。

更多信息

JS中的跨域问题 - 掘金

九种跨域方式实现原理

前端常见跨域解决方案

HTTP访问控制（CORS）

avatar
文章
阅读
粉丝