浏览器安全之同源策略讲解

最新推荐文章于 2023-12-04 14:11:46 发布

稚始稚終

最新推荐文章于 2023-12-04 14:11:46 发布

阅读量600

点赞数 1

分类专栏：系统安全文章标签：前端安全

本文链接：https://blog.csdn.net/qq_37872337/article/details/106789279

版权

系统安全专栏收录该内容

2 篇文章 0 订阅

订阅专栏

0x00前言

       说起同源策略，想必大家都听说过，同源策略可以理解成一种约定，市面上所有的浏览器应该都具有这最基本的安全功能，缺少了它，浏览器可能不能正常工作~
       所谓同源策略，当某个域中的脚本去请求另外一个域中的资源时，必须满足相同的协议、域名、端口号才能够访问成功~
       接下来我们可以用一个有趣的实验来讲解一下同源策略~

0x01同源策略

首先，提前贴上本次实验所用到的代码~

//创建一个index.html文件，并加载一个网页到iframe标签里
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<script>
function getPass(){
	var a=iframe_1.document.form_1.pass.value;
	document.getElementById("get_pass").innerHTML=a;
}
</script>
<iframe name="iframe_1" src="http://127.0.0.1/tongyuan/iframe.html" height="200px" width="400px"></iframe>
<input type="button" value="getPass" onclick="getPass()"></input>
<div id="get_pass"></div>
</body>
</html>

//创建一个iframe.html
<form name="form_1">
用户名：<input type="text" name="user" value=""></input><br>
密码： <input type="password" name="pass" value=""></input>
</form>

本次实验搭建网站使用的是phpstudy软件（本实验和php毫无关系，请忽略~），访问使用的浏览器为火狐浏览器。
文件写入完毕，开始打开火狐访问http://127.0.0.1/tongyuan/index.html，打开的页面效果是这样的：
在这里插入图片描述
我们现在要做的是，在iframe里面输入用户名和密码，点击“getpass按钮”获取iframe里表单的密码，并且显示在本网页中

这里清晰可以看到，点击按钮之后，密码成功显示到了本网页~
接下来呢，让我们使用localhost来访问一下，看清楚哦，上面是127.0.0.1~
在这里插入图片描述
重复上面的操作，发现怎么点击按钮都不会显示出密码，我们点击查看元素，看一下控制台~

我们清楚的看到，出现权限不够，不让访问的报错信息~
看到这里还不理解？没关系，我们来分析一下~

分析

我们首先可以关注一下代码，其中iframe标签中加载的是http://127.0.0.1 这个域下的表单，因此表单中的输入框资源属于此域。当我们第一次访问是以http://127.0.0.1 域的身份加载的网站，所以index.html中的js脚本就属于该域，因此js脚本成功读取iframe的资源并显示，因为脚本所属域和被读取资源所属域具有相同的协议、域名、端口号，满足同源策略，浏览器处理本次js请求。而第二次使用的是http://localhost 加载的网页，使用localhost的js脚本去读取127.0.0.1 的资源不满足同源策略，所以出现访问权限被拒绝（其实localhost和127.0.0.1都指的是本机网站服务器，但是浏览器特严谨，只要协议、域名、端口号有一个不满足，直接干掉~）。
你以为同源策略只保护表单资源吗？当然不是，是一切资源，例如发出的ajax请求还有cookie等等。

0x02跨域访问

既然所有的浏览器都支持同源策略，那如果有跨域访问的需求怎么办呢？可以在服务器的响应头中设置字段~

Access-Control-Allow-Origin: *  //此字段可设置*表示允许所有访问本域，也可指定多个域
Access-Control-Allow-Credentials: true  //这里设置true为允许携带cookie（可选）

ps： 如果想要跨域操作cookie，除了满足以上两条，还要在发出请求的ajax中指定withCredentials的值为true。

0x03总结

不知道经过上面的例子和分析，对大家理解同源策略有没有帮助呢，欢迎评论留言，我会一一回复滴~

The end~

稚始稚終

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
浏览器安全之同源策略讲解

0x00前言       说起同源策略，想必大家都听说过，同源策略可以理解成一种约定，市面上所有的浏览器应该都具有这最基本的安全功能，缺少了它，浏览器可能不能正常工作~       所谓同源策略，当某个域中的脚本去请求另外一个域中的资源时，必须满足相同的协议、域名、端口号才能够访问成功~      &nb
复制链接

扫一扫