关于跨域题目

2024年5月20日 175次阅读 来源: zhongmeizhi

口试必考题吧，所以在这会细致引见以下内容

  1. 跨域发生的缘由
  2. 排列最经常运用的处理要领
  3. 剖析种种要领道理
  4. 排列种种要领优缺点

什么是跨域

因为浏览器厂商对平安性的斟酌，提出了浏览器的同源战略做为处理计划。它是一个用于断绝潜伏歹意文件的主要平安机制。同源即协定、域名、端口三者一致。差别源即跨域。

假如没有同源战略会怎样？

比方：当你访问了 饼夕夕的网站

// HTML
// 饼夕夕.com 内嵌 拼多多.com
<iframe name="pinduoduo" src="www.pinduoduo.com"></iframe>

// JS
// 因为没有同源战略的限定，垂纶网站能够直接拿到别的网站的Dom
// 所以 饼夕夕.com 能够在 拼多多.com 输入账号暗码处埋点
const $iframe = window.frames['pinduoduo'];
const $pwd = $iframe.document.getElementById('password');
console.log(`你的暗码已泄漏: ${$pwd}`)

处理计划（主流）

1. JSONP -> get要求跨域
道理：script和img等标签没有跨域限定
完成计划：(举例)

  // HTML 插进去标签
  <script src="127.0.0.1/x/account?cb=say" ></script>

  // JS
  function say(name, age) {
    console.log(`${name}, ${age} 岁`)
  }

  // 服务器返回response
  say('zmz', 18)

  // 那末客户端在script onload时会实行say要领

  // 完毕

2. iframe+form完成post要求跨域
道理：应用form表单target属性，将post要求提交给隐蔽的iframe，使页面不跳转

  var data = {
    name: 'zmz',
    age: 18
  }
  var url = 'http://localhost/say';

  var $iframe = document.createElement('iframe');
  $iframe.name = 'iframePost';
  $iframe.style.display = 'none';
  document.body.appendChild($iframe);
  
  $iframe.addEventListener('load', function(e) {
    console.log($iframe.contentWindow)
  })
  
  const form = document.createElement('form');
  const ipt = document.createElement('input');
  form.action = url;
  form.enctype = 'application/json;'
  form.method = 'post';

  // 最中心的一行代码
  // 在指定的iframe中实行form
  form.target = $iframe.name;

  for (var name in data) {
      ipt.name = name;
      ipt.value = data[name]; 
      form.appendChild(ipt.cloneNode());
  }
  form.style.display = 'none';
  document.body.appendChild(form);
  form.submit();
  
  document.body.removeChild(form)

3. CORS 跨源资源共享
道理：新版XMLHttpRequest(ajax2.0)特征，服务器白名单
服务器端设置response.setHeader("Access-Control-Allow-xxx...

附：ajax2.0新特征

  • 能够设置HTTP要求的时限xhr.timeout
  • 能够运用FormData对象治理表单数据
  • 能够上传文件 >> 同上
  • 能够要求差别域名下的数据（跨域要求）
  • 能够猎取服务器端的二进制数据xhr.responseType = 'blob'
  • 能够获得数据传输的进度信息 xhr.upload.process

CORS分类

  • 简朴要求(自行搜刮)

    • 在要求头信息中指定Origin

  • 非简朴要求

    • 会发送预检要求(options)，返回状况码204

5. 代办
道理：服务器之间没有跨域限定
详细完成：

  // Nginx设置
  server{
    # 监听9099端口
    listen 9099;
    # 域名是localhost
    server_name localhost;
    # 匹配到都转发到http://localhost:9871 
    location ^~ /api {
        proxy_pass http://localhost:9871;
    }    
}

5. postMessage
道理：postMessage能够处置惩罚种种浏览器窗口之间的通讯题目。
详细完成：

  // 发送方
  window.frames['crossDomainIframe']
  iframe.postMessage('我想要数据', 'http://localhost:8088')

  window.addEventListener('message', function () {
    if (e.origin === 'http://localhost:2333') {
      console.log('收到', e.data)
    }
  }

  // 接收方
  window.addEventListener('message', (e) => {
    if (e.origin === 'http://localhost:8088') {
      console.log(e.data)
      e.source.postMessage('给，你要的数据', e.origin);
    }
  })

6. WebSocket
道理：新协定(socket)
完成计划：相似postMessage
附：

  • socket.io框架能处理兼容性题目

种种方式对照

  • JSONP和iframe+from兼容性很好

    • 然则错误处置惩罚和RESTful接口统一是个题目

  • CORS最简朴粗犷

    • 9102年了。微软都不保护Win7了。

  • 代办

    • 肯定会慢一丢丢咯，而且要找运维配

  • postMessage

    • 处置惩罚窗口间通讯，- -。不嫌贫苦能够用来跨域

  • WebSocket

    • 处置惩罚长衔接，附带跨域

End

文章分享同步于：
https://github.com/zhongmeizh…

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