跨域请求-jsonp和cors

目录

同源策略

JSONP

实例

服务端

客户端

JSONP安全问题

CORS

简单模型

协商模型/预检请求

CORS的安全问题

参考

---

同源策略

由于浏览器安全限制，数据是不可以直接跨域(包括不同的根域名、二级域名、或不同的端口)请求的,除非目标域名授权你可以访问。

jsonp是使用方法回调的原理。在网页里，你如果引入其他网页的js，那这个页面的js是可以调用你网页的代码的。

JSONP

JSONP实现跨域请求的原理简单的说，就是动态创建

客户端声明函数， 将函数名传过去。服务端返回数据，客户端运行js代码 callback(['lady','killer9'])，显示结果。

结果

JSONP安全问题

JSONP劫持 类似csrf, 利用jsonp接口没验证referer, 或者验证错误, 窃取信息。

防御：

检测referer

使用token 让攻击者对接口未知（csrf也可以这么防御）

使用CORS代替jsonp

CORS

CORS(Cross-Origin Resource Sharing，跨域资源共享）是一种允许当前域（domain）的资源（html/js/web service）被其他域（domain）的脚本请求访问的机制，通常由于同域安全策略（the same-origin security policy）浏览器会禁止这种跨域请求。

简单模型

下列请求为简单模型：

• HEAD
• GET
• POST

post数据格式有限制，只支持‘text/plain','application/x-www-urlencoded'and'multipart/form-data'

对于简单请求，浏览器直接发出CORS请求。具体来说，就是在头信息之中，增加一个Origin字段。如果Origin指定的域名在许可范围内，服务器返回的响应，会多出几个头信息字段。

（1）Access-Control-Allow-Origin

该字段是必须的。它的值要么是请求时Origin字段的值，要么是一个*，表示接受任意域名的请求。

（2）Access-Control-Allow-Credentials

该字段可选的。它的值是一个布尔值，表示是否允许发送Cookie。默认情况下，Cookie不包括在CORS请求之中。设为true，即表示服务器明确许可，Cookie可以包含在请求中，一起发给服务器。这个值也只能设为true，如果服务器不要浏览器发送Cookie，删除该字段即可。

（3）Access-Control-Expose-Headers

该字段可选。CORS请求时，XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段，就必须在Access-Control-Expose-Headers里面指定。

协商模型/预检请求

请求方法为PUT或Content-Type字段的类型是application/json。

除了Origin字段，"预检"请求的头信息包括两个特殊字段。

（1）Access-Control-Request-Method

该字段是必须的，用来列出浏览器的CORS请求会用到哪些HTTP方法。

（2）Access-Control-Request-Headers

该字段是一个逗号分隔的字符串，指定浏览器CORS请求会额外发送的头信息字段。

响应

除了Access-Control-Allow-Credentials，还有：

（1）Access-Control-Allow-Headers

表明它允许跨域请求包含content-type头

（2）Access-Control-Allow-Methods

表明它允许的外域请求。

（3）Access-Control-Max-Age

该字段可选，用来指定本次预检请求的有效期，单位为秒。例如，有效期是20天（1728000秒），即允许缓存该条回应1728000秒（即20天），在此期间，不用发出另一条预检请求。

一旦服务器通过了"预检"请求，以后每次浏览器正常的CORS请求，就都跟简单请求一样，会有一个Origin头信息字段。服务器的回应，也都会有一个Access-Control-Allow-Origin头信息字段。

CORS的安全问题

目前解决跨域的标准方案 Access-Control-Allow-Origin和Access-Control-Allow-Credentials配置不当会导致信息泄露

简单请求, GET, POST, HEAD (content-type: x-www-form-urlencoded, multipart/form-data、text/plain)

分为简单请求(simple request)和非简单请求(not-so-simple request)简单请求，就是在头信息之中，增加一个Origin字段说明此跨域请求来自哪个域，如果请求的服务器返回Access-Control-Allow-Origin满足该域则可返回资源

其实还有其他的限制origin的东西

CORS与JSONP的使用目的相同，但是比JSONP更强大。JSONP只支持GET请求，CORS支持所有类型的HTTP请求。JSONP的优势在于支持老式浏览器，以及可以向不支持CORS的网站请求数据。

window.postMessage也可跨域访问资源

参考

JSONP教程

 更多内容查看：网络安全-自学笔记

喜欢本文的请动动小手点个赞，收藏一下，有问题请下方评论，转载请注明出处，并附有原文链接，谢谢！如有侵权，请及时联系。如果您感觉有所收获，自愿打赏，可选择支付宝18833895206（小于），您的支持是我不断更新的动力。