记录黑客技术中优秀的内容,传播黑客文化,分享黑客技术精华

Web安全概念巩固:CORS——请问你今天要来把椅子吗

2020-06-03 17:36

声明:由于我个人也正在学习之中,因此可能会存在架构上的疏漏,尽管如此,我会尽力保证所写内容的准确性,欢迎各位读者指证。如有想要看到的内容,也可以在评论区中提出。

1. 前言

此系列文章会对所有常见的Web安全概念进行分析,并根据情况从实际案例出发加深理解,建立起不同安全概念之间的联系,从而形成一个整体的架构。由于这是第一篇文章,因此会额外介绍一些基础概念,然后对CORS进行分析,并引出下一个讨论主题。

 

2. 建立网络的形象

在理解各种网络安全相关概念的时候,为了加深理解,我希望在大脑中建立一个具体的形象,把网络上的每个源(这一概念会在下文解释,这里可以暂时当作一个站点)当作是一个商铺,商铺会售卖自己的商品,商铺之间存在货物的流通,拥有自己的仓库,我不确定这一类比在之后的学习中是否会发生冲突,但是至少在本篇文章中,它是有助于概念的理解的,也希望在之后其他概念的理解过程中,类比能够成为一个重要的辅助手段。

 

3. 一些基础概念

3.1 诶,那个谁,帮我把那把椅子搬过来——URL

“哪把椅子?”

“那把啊!”

“哦,是这一把吗?”

“不是,是那一把!”

我们在网络上定位资源的时候当然不能用“这”、“那”、“哪”来说明自己想要的内容,事实上即便是人们在进行上述交流的时候,也一定添加了手势和动作,才能够明确各自指代的是哪把椅子。

在移动椅子的过程中,我们要明确椅子的归属(不能随便拿走别的人啊)、椅子的位置,移动的方式,所以定位网络上的资源,也需要类似的信息:

<scheme>://<user>:<pwd>@<host>:<port>/<path>;<params>?<query>#<fragment>

上面就是我们称作URL(统一资源定位符)的东西,看起来有点复杂啊,所以你可以忽略上面的格式(并不是),因为这里介绍URL只是为了引出下一小节的内容,可以URL本身也是网络中一个很基础的概念,这里先留下一个印象,如果之后再次涉及到相关内容的话,再具体介绍各组成结构的作用。目前,我们只关注下面这个简单的形式:

<scheme>://<host>:<port>/<path>

在浏览器中打开一个页面,看一下地址栏:

https://developer.mozilla.org/en-US/docs/Web/Security

scheme(协议)httpshost(主机)developer.mozilla.orgpath(路径)en-US/docs/Web/Security,嗯?port(端口)是什么呢?如果没有明确的说明,端口就是80

3.2 这把椅子是我家店的——同源策略

3.2.1 源的概念

在一开始我们把一个源类比成了一家商铺,在一家商铺中,店面、员工、家具设施……当然都是这家店铺所有,那么一个资源,我们又怎么知道它属于哪个源呢?

这里就要用到上面的简化URL格式,我们需要找到这个资源的scheme(协议)host(主机)还有port(端口),只要这三者都相同,就说明资源属于同一个源。

资源m资源n是否同源
http://host-A.com/files/m.htmlhttps://host-A.com/files/n.html
http://host-A.com/files/m.htmlhttp://host-B.com/files/n.html
http://host-A.com/files/m.htmlhttp://host-A.com:8080/files/n.html
http://host-A.com/files/m.htmlhttp://host-A.com/files/n.html

3.2.2 不同源间的交互方式

不同商铺之间可能会进行员工交流,活动联动,或者货品的相互补充支持,源A在和源B之间也有各种不同的交互方式。

比如说源A中有这样的一个表单:

<form action="http://originB.com/profile.php" method="post">
<p>姓名:<input type="text" name="name" /></p>
<p>年龄:<input type="text" name="age" /></p>
<input type="submit" value="提交" />
</form>

或者使用各种不同类型的标签包含了源B中的资源:

<script src="http://img403.hackdig.com/imgpxy.php?url=sj.Btpircs%2Fmoc.Bnigiro%2F%2F%3Aptth"></script>
<link rel="stylesheet" href="http://originB.com/cssB.css">
<img src="http://img403.hackdig.com/imgpxy.php?url=gepj.Bgmi%2Fmoc.Bnigiro%2F%2F%3Aptth" />
<video src="http://img403.hackdig.com/imgpxy.php?url=4pm.Boediv%2Fmoc.Bnigiro%2F%2F%3Aptth"> </video>
<iframe src="http://img403.hackdig.com/imgpxy.php?url=lmth.Begapemos%2Fmoc.Bnigiro%2F%2F%3Aptth"></iframe>
……

或者在页面的JavaScript脚本中使用XMLHttpRequest(XHR)请求源B的资源:

var oReq = new XMLHttpRequest();
var url = "http://originB.com/resourceB.html";
oReq.open("GET", url);
……

还可以使用JavaScript的API对不同源的资源进行访问:

window.open()
iframe.contentWindow
targetWindow.postMessage(message, targetOrigin, [transfer]);

3.3.3 对于交互的限制

商铺a当然不会随便就让自己的员工到商铺b中工作,之前肯定要经过一系列复杂的手续,同样,源A和源B之间也不会随便访问彼此的资源。

一般来说,使用表单实现的源之间的交互需要对token进行验证(看,CSRF!);frameiframeembed以及object标签也有了属于自己的头部X-Frame-Options用来规定页面是否能够包含在这几个标签中;使用XMLHttpRequest进行跨域访问也有自己的验证方式;JavaScript中的API在使用时本身就存在很多限制。不过其他类似imgscript这样的标签对于跨域资源访问则没有什么限制。

本文所要讲解的CORS(Cross-Origin Resource Sharing)概念,针对的就是使用XMLHttpRequest进行跨域访问的情况。

 

4. CORS的基本情况

现在假设一个场景,在一条大街上有相邻的两家商铺A和B,商铺A卖烧烤,商铺B卖早点。夜幕降临,商铺A座无虚席,新的客人没有座位,商铺A想要借用商铺B的椅子


知识来源: https://www.anquanke.com/post/id/207487

阅读:24196 | 评论:0 | 标签:无

想收藏或者和大家分享这篇好文章→复制链接地址

“Web安全概念巩固:CORS——请问你今天要来把椅子吗”共有0条留言

发表评论

姓名:

邮箱:

网址:

验证码:

公告

❤人人都能成为掌握黑客技术的英雄❤

ADS

标签云