浏览器跨域题目解决方案

2023年1月19日 144次阅读 来源: smallgang

一,概述

  1. 为何会涌现跨域题目
    同源战略是浏览器平安的基石，起首由NetScape 公司引入浏览器，现在一切浏览器都执行这个政策。同源战略是一种商定，所谓同源战略,指的是浏览器对不同源的剧本或文本的接见举行限定，比方源A的js 不能读取和设置引入的源的元素属性。只需同协定 同域名 同端口 下才接见。因为浏览器的同源战略的存在，才有了跨域题目。
  2. 同源战略的限定局限
（1）cookie，LocalStorage，和IndexDB 没法读取

（2）DOM 没法取得

（3）Ajax要求不能发送
  1. 没有同源战略限定的两大风险场景

    （1）没有同源战略限定的接口要求:
    cookie平常用来处置惩罚登录场景，目标是让效劳器晓得谁发的此次要求。假如你要求接口举行登录，效劳端考证经由历程后会在相应头到场 Set-Cookie 字段，然后下次再发要求的时刻，浏览器会自动将cookie 附加在HTTP要求的头字段Cookie中，效劳端就晓得这个用户已登录过了。题目也就来了，假如你登录一个银行网站A，然后又进入一个不法网站B,假如没有同源战略，那末不法网站就会猎取你登录A 网站的Cookie,这样一来不发网站就能够登录你A网站的账号随心所欲。这就是传说中的 CSRF进击。

    (2)没有同源战略限定的DOM查询:
    最常见的就是垂纶网站。 有一天你收到一封邮件，说你的银行账户有风险，清洁登录www.yinghang.com 举行修正，你翻开界面发明和你之前登录的网站如出一辙，然后你输入账户和暗码上岸后发明账户余额一般,就离开了。但是你日常平凡登录银行账户的网站是www.yinhang.com。这个垂纶网站做了什么呢？

html
<iframe></iframe>

js    
var ifram = window.frames['yinhang'];
var account = iframe.document.getElementById("你输入账户的输入框")
var pwd     = iframe.document.getElementById("你输入账户的暗码框")

假如没有同源战略限定，你的账户和暗码就会被非网站猎取

二,跨域的处理方案(AJAX)

同源战略划定,AJAX要求只能发给同源的网址，不然就会报错。除了架设效劳器代办
(浏览器要求同源效劳器，后者再要求外部效劳)，有三种要领能够处理
  • JSONP
  • Websocket
  • CORS
  1. JSONP

它的头脑是，网页经由历程增加一个<script>元素，向效劳器要求JSON数据，这类做法不受同源战略限定。效劳器收到要求后，将数据放在一个指定名字的回调函数里传返来。
起首,网页动态插进去<script>元素，由它向跨源网址发出要求。

function addScriptTag(src) {
  var script = document.createElement('script');
  script.setAttribute("type","text/javascript");
  script.src = src;
  document.body.appendChild(script);
}

window.onload = function () {
  addScriptTag('http://example.com/ip?callback=foo');
}

function foo(data) {
  console.log('Your public IP address is: ' + data.ip);
};

注重要求的查询字符串有一个callback参数，用来指定回调函数的名字，这是JSONP必需的，效劳器收到要求后，会将数据放在回调函数的参数位置返回。

foo({
    "ip":"192.168.1.159"
})

因为<script>元素要求的剧本，直接作为代码运转。这时候只需浏览器定义了foo函数，该函数会被马上挪用。

2.WebSocket

WebSocket 是一种通讯协定，运用 ws://(非加密) 和 wss://(加密)作为协定前缀。该协定不执行同源战略，只需效劳器支撑，就能够经由历程它举行通讯。

var ws = new WebSocket('wss://echo.websocket.org');

      ws.onopen = function (evt) {
          console.log('Connection open ...');
          ws.send('Hello WebSockets!');
      };

      ws.onmessage = function (evt) {
          console.log('Received Message: ', evt.data);
          ws.close();
      };

      ws.onclose = function (evt) {
          console.log('Connection closed.');
      };

3.CORS

CORS 是跨源资本分享(Cross-Origin Resource sharing) 的缩写，它是W3c规范，是跨域AJAX要求的基础处理办法。比拟JSONP只能发GET要求，CORS许可任何范例的要求。
CORS须要浏览器和效劳器同时支撑。现在，一切浏览器都支撑该功用，IE浏览器不能低于IE10。

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

因而，完成CORS通讯的关键是效劳器(效劳器端但是推断，让那些域能够要求)。只需效劳器完成了CORS接口，
就能够跨源通讯。

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