你可能不知道的CORS跨域资源共享-创新互联
什么是CORS?
创新互联是一家专注于
成都做网站、成都网站制作与策划设计,临颍网站建设哪家好?
创新互联做网站,专注于网站建设十多年,网设计领域的专业建站公司;建站业务涵盖:临颍等地区。临颍做网站价格咨询:18980820575
默认情况下,为预防某些而已行为,浏览器的XHR对象只能访问来源于同一个域中的资源。但是我们在日常实际开发中,常常会遇到跨域请求的需求,因此就出现了一种跨域请求的方案:CORS(Cross-Origin Resource Sharing)跨域资源共享。
CORS背后的原理是:使用自定的HTTP头部与服务器进行沟通,从而由服务器决定响应是否成功。
了解下同源策略
- 源(origin)*:就是协议、域名和端口号;
- 同源: 就是源相同,即协议、域名和端口完全相同;
- 同源策略:同源策略是浏览器的一个安全功能,不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源;
- 同源策略的分类:
- DOM 同源策略:即针对于DOM,禁止对不同源页面的DOM进行操作;如不同域名的 iframe 是限制互相访问。
- XMLHttpRequest 同源策略:禁止使用 XHR 对象向不同源的服务器地址发起 HTTP 请求。
- 不受同源策略限制:
- 页面中的链接,重定向以及表单提交(因为表单提交,数据提交到action域后,本身页面就和其没有关系了,不会管请求结果,后面操作都交给了action里面的域)是不会受到同源策略限制的。
- 资源的引入不受限制,但是js不能读写加载的内容:如嵌入到页面中的,,,
为什么要跨域限制
- 如果没有 DOM 同源策略:那么就没有啥xss的研究了,因为你的网站将不是你的网站,而是大家的,谁都可以写个代码操作你的网站界面
- 如果没有XMLHttpRequest 同源策略,那么就可以很轻易的进行CSRF(跨站请求伪造)攻击:
- 用户登录了自己的网站页面 a.com,cookie中添加了用户标识。
- 用户浏览了恶意页面 b.com,执行了页面中的恶意 AJAX 请求代码。
- b.com 向 a.com发起 AJAX HTTP 请求,请求会默认把 a.com对应cookie也同时发送过去。
- a.com从发送的 cookie 中提取用户标识,验证用户无误,response 中返回请求数据;数据就泄露了。而且由于Ajax在后台执行,这一过程用户是无法感知的。
- (附)有了XMLHttpRequest 同源策略就可以限制CSRF攻击?别忘了还有不受同源策略的:表单提交和资源引入,(安全问题下期在研究)
跨域决解方案
- JSONP 跨域:借鉴于 script 标签不受浏览器同源策略的影响,允许跨域引用资源;因此可以通过动态创建 script 标签,然后利用 src 属性进行跨域;
- 缺点:
- 所有网站都可以拿到数据,存在安全性问题,需要网站双方商议基础token的身份验证。
- 只能是GET,不能POST。
- 可能被注入恶意代码,篡改页面内容,可以采用字符串过滤来规避此问题。
- 服务器代理:浏览器有跨域限制,但是服务器不存在跨域问题,所以可以由服务器请求所要域的资源再返回给客户端。
- document.domain、window.name 、location.hash:借助于iframe决解DOM同源策略
- postMessage:决解DOM同源策略,新方案
- CORS(跨域资源共享):这里讲的重点
CORS(跨域资源共享)
- HTML5 提供的标准跨域解决方案,是一个由浏览器共同遵循的一套控制策略,通过HTTP的Header来进行交互;主要通过后端来设置CORS配置项。
CORS简单使用
之前说得CORS跨域,嗯嗯,后端设置Access-Control-Allow-Origin:*|[或具体的域名]就好了;
第一次尝试:
app.use(async(ctx,next) => {
ctx.set({
"Access-Control-Allow-Origin": "http://localhost:8088"
})
网页名称:你可能不知道的CORS跨域资源共享-创新互联
分享链接:
http://kswjz.com/article/jjsdg.html
扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流