跨域明白

2023年3月11日 190次阅读 来源: Leon

本文整理了一些有关跨域的基础知识和细节题目。

什么是跨域

个人一句话诠释：假如 url A 与 url B 差别源，那末页面A不能猎取页面B的资本。这里有两个关键词：url 和 同源，浏览器的同源战略就是针对两个url，它们满足以下三个前提，才是同源：

  • 协定雷同
  • 域名雷同
  • 端口雷同

https://www.baidu.com/

这里面有两个细节须要说起，域名是包括//到/的一切部份www.baidu.com；没有指定端口号默许是:80端口。

假如一个页面中的JS能够恣意提议http跨域猎取其他页面上的资本，这是一件很恐怖的事，举个例子：

  1. 张三接见了某银行网站 abank.com，服务器端考证后会在相应头中到场Set-Cookie字段，然后下次张三再提议要求，浏览器会自动将cookie附加在HTTP要求的首部字段Cookie中，服务器端就晓得张三已登录过了。
  2. 张三接着接见了风险页面 danger.com，这个页面中写了一些Ajax，它提议要求接见abank.com，这一行动用户不能发觉，假如能够跨域提议要求，那末浏览器同样会自动将cookie附加在HTTP要求的首部字段Cookie中，如许这个风险风险网站就上岸了张三的银行账户。

所以用同源战略来限定跨域是必需的。

这里我思索了一个题目，在浏览器地址栏里输入url为何没有涌现跨域题目？
要明白，同源战略是浏览器的行动，在地址栏中输入url是用户主观行动，所以浏览器是不判为跨域的。那末同源限定的对象实际上是页面中提议http要求的js。那同源限定的行动有哪些呢？有以下三种：

  • Cookie、LocalStorage 和 IndexDB 没法读取。
  • DOM 没法取得。
  • AJAX 要求不能发送。

接下来讲说躲避跨域限定的集合体式格局

针对AJAX的跨域

JSONP

JSONP应用的的是：<script>、<img>这些标签下载url中的资本是没有跨域限定的。
它的基础做法是：网页增加一个<script>元素，向服务器要求 JSON 数据，这类做法不受同源政策限定；服务器收到要求后，将JSON放在一个指定名字的回调函数里传返来。所以，望文生义，JSONP = JSON with padding：添补式 JSON，实在就是服务器端把 JSON 作为回调函数的参数，返回这个回调函数。

<script type="text/javascript">
  function foo(data) {
    console.log('Your public IP address is: ' + data.ip);
};
<script>

<script type="text/javascript" src="http://example.com/ip?callback=foo"></script>

上面的script标签向服务器example.com发出要求，该要求有一个查询字符串callback参数，用来指定回调函数的名字；服务器发明要求中有callback参数，就会将JSON作为指定回调函数的参数，回调函数作为剧本返回；剧本返回后，会直接作为代码运转，这时候，只需浏览器定义了foo函数，该函数就会马上挪用。

JSONP的瑕玷在于只能发GET要求。

CORS

CORS是跨源资本分享（Cross-Origin Resource Sharing）的缩写。它是W3C规范，是跨源AJAX要求的基础处理要领。比拟JSONP只能发GET要求，CORS允许任何范例的要求。

CORS须要浏览器和服务器同时支撑。现在，一切浏览器都支撑该功用，IE浏览器不能低于IE10。

全部CORS通讯历程，都是浏览器自动完成，不须要用户介入。关于开发者来讲，CORS通讯与同源的AJAX通讯没有差异，代码完整一样。浏览器一旦发明AJAX要求跨源，就会自动增加一些附加的头信息，偶然还会多出一次附加的要求，但用户不会有觉得。

因而，完成CORS通讯的关键是服务器。只需服务器完成了CORS接口，就能够跨源通讯。

阮一峰先生关于CORS的文章异常仔细，跨域资本同享 CORS 详解，这里仅仅梳理下提要备查。

浏览器将CORS要求分红两类：简朴要求（simple request）和非简朴要求（not-so-simple request）。
只需同时满足以下两大前提，就属于简朴要求。

  1. 要求要领是以下三种要领之一：

    • HEAD
    • GET
    • POST

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

    • Accept
    • Accept-Language
    • Content-Language
    • Last-Event-ID
    • Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

通常差别时满足上面两个前提，就属于非简朴要求。

简朴要求

简朴要求的CORS分为以下几步：

  1. 浏览器发明AJAX要求跨源，在要求头中增加Origin字段，它的值是http要求的源url；
  2. 服务器依据Origin的值决议是不是赞同此次要求；

  3. 假如Origin指定的域名在服务器允许范围内，则会在报头中增加以下三个字段：

    • Access-Control-Allow-Origin
      该字段是必需的。它的值要么是要求时Origin字段的值，要么是一个*，示意接收恣意域名的要求.
    • Access-Control-Allow-Credentials
      该字段可选。它的值是一个布尔值，示意是不是允许发送Cookie。默许情况下，Cookie不包括在CORS要求当中。设为true，即示意服务器明白允许，Cookie能够包括在要求中，一同发给服务器，另一方面，开发者必需在AJAX要求中翻开withCredentials属性。这个值也只能设为true，假如服务器不要浏览器发送Cookie，删除该字段即可。
    • Access-Control-Expose-Headers
      该字段可选。CORS要求时，XMLHttpRequest对象的getResponseHeader()要领只能拿到6个基础字段。
  4. 假如假如Origin指定的域名不在服务器允许范围内，相应头中没有Access-Control-Allow-Origin，浏览器就会抛出毛病，中缀这个http要求。

非简朴要求

简朴要求的CORS分为以下几步：

  1. 浏览器在正式要求之前，先发送一个预检要求，预检要求的要求要领是OPTIONS，要求头中带以下三个字段：

    • Access-Control-Request-Method
      该字段是必需的，用来列出浏览器的CORS要求会用到哪些HTTP要领
    • Access-Control-Request-Headers
      可选，该字段是一个逗号分开的字符串，指定浏览器CORS要求会分外发送的头信息字段

  2. 假如服务器端预检不经由过程，浏览器报错；假如经由过程，返回的相应头中包括以下几个字段：

    • Access-Control-Allow-Origin
      肯定包括
    • Access-Control-Allow-Methods
      肯定包括，它的值是逗号分开的一个字符串，表明服务器支撑的一切跨域要求的要领。
    • Access-Control-Allow-Credentials
      可选
    • Access-Control-Max-Age
      可选，用来指定本次预检要求的有效期，单元为秒，未逾期的话不必再发送预检要求。
  3. 一旦服务器经由过程了”预检”要求，今后每次浏览器一般的CORS要求，就都跟简朴要求一样，会有一个Origin头信息字段。服务器的回应，也都邑有一个Access-Control-Allow-Origin头信息字段。

WebSocket

WebSocket是一种通讯协定，运用ws://（非加密）和wss://（加密）作为协定前缀。该协定不实行同源政策，只需服务器支撑，就能够经由过程它举行跨源通讯。

针对Cookie

Cookie 是服务器写入浏览器的一小段信息，只要同源的网页才同享。然则，两个网页一级域名雷同，只是二级域名差别，浏览器允许经由过程设置document.domain同享 Cookie。

举例来讲，A网页是http://w1.example.com/a.html，B网页是http://w2.example.com/b.html，那末只需在两个网页的剧本中设置的document.domain=’example.com’，两个网页就能够同享Cookie。

针对iframe

假如两个网页差别源，就没法拿到对方的DOM。典范的例子是iframe窗口和window.open要领翻开的窗口，它们与父窗口没法通讯。关于完整差别源的网站，现在有三种要领，能够处理跨域窗口的通讯题目:

  • 片断辨认符（fragment identifier）
  • window.name
  • 跨文档通讯API（Cross-document messaging），HTML5中的window.postMessage

参考文章：
浏览器同源政策及其躲避要领
跨域资本同享 CORS 详解

    原文作者：Leon
    原文地址: https://segmentfault.com/a/1190000015847360
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞