关于跨域的自我总结

跨域：

为什么需要跨域： 浏览器同源策略  协议 端口  主机（ip） 子域 不同

1:jsonp： 原理 -- 利用html中 所有src的属性的标签可以跨域的特点  利用script的src进行get请求 （只支持get请求） ，后台输出一段js代码的字符串在script中 便会执行；后台输出的是 fn(json)样式的字符串，fn代表要调用的方法 json代表要处理的数据

利用script标签的开发策略 可以实现跨域请求数据  需要服务器配合  jq的ajax的核心是通过xmlhttprequest获取非文本内容  jsonp的核心是动态添加script标签来调用服务器提供的js脚本   使用jsonp模式请求数据的时候  服务器返回的是一段可执行的js代码  因为jsonp跨域原理就是用的动态加载script的src   所有我们只能把参数通过url的方式传递  所以jsonp的type类型只能是get

优点： 兼容性好 课用于解决主流浏览器的跨域数据访问问题

缺点：仅支持get方法  具有局限性 不安全  可能遭受xss

XSS漏洞

不严谨的 content-type导致的 XSS 漏洞，想象一下 JSONP 就是你请求 http://youdomain.com?callback=douniwan, 然后返回 douniwan({ data })，那假如请求 http://youdomain.com?callback=<script>alert(1)</script> 不就返回 <script>alert(1)</script>({ data })了吗，如果没有严格定义好 Content-Type（ Content-Type: application/json ），再加上没有过滤 callback 参数，直接当 html 解析了，就是一个赤裸裸的 XSS 了。

解决方法：严格定义 Content-Type: application/json，然后严格过滤 callback 后的参数并且限制长度（进行字符转义，例如<换成&lt，>换成&gt）等，这样返回的脚本内容会变成文本格式，脚本将不会执行。

服务器被黑，返回一串恶意执行的代码

可以将执行的代码转发到服务端进行校验JSONP内容校验，再返回校验结果。

CSRF攻击

前端构造一个恶意页面，请求JSONP接口，收集服务端的敏感信息。如果JSONP接口还涉及一些敏感操作或信息（比如登录、删除等操作），那就更不安全了。

解决方法：验证JSONP的调用来源（Referer），服务端判断Referer是否是白名单，或者部署随机Token来防御。

2: CORS:

  CORS（跨域资源共享 Cross-origin resource sharing）允许浏览器向跨域服务器发出XMLHttpRequest请求，从而克服跨域问题，它需要浏览器和服务器的同时支持。
https://juejin.im/post/5d690c726fb9a06b155dd40d#heading-20

 

JSONP和CORS的对比

• JSONP只支持GET请求，CORS支持所有类型的HTTP请求
• JSONP的优势在于支持老式浏览器，以及可以向不支持CORS的网站请求数据

其他跨域解决方案

• Nginx反向代理  配置config文件
• postMessage   HTML5属性 通过绑定window的message事件来监听发送跨文档消息传输内容。
• document.domain  前提条件： 一级域名必须相同   协议和端口也必须一致