同源策略中关于浏览器限制JS权限的理解

首先给出浏览器“同源策略”的一种经典定义，同源策略限制了来自不同源（相对于当前页面而言）的document或script，对当前document的某些属性进行读取或是设置，举例来说，A网站（www.aaa.com）上有某个脚本，在B网站（www.bbb.com）未曾加载该脚本时，该脚本不能读取或是修改B网站的DOM节点数据。

同源策略是浏览器最核心、最基本的安全策略，现行的web安全策略很多以同源策略为基础。

在浏览器中，<script>、<img>、<ifram>、<link>等标签都可以跨域加载资源，而不受同源策略的限制。这些带“src”的标签每次加载时，实际上是由浏览器发起了一次GET请求。不同于XMLHttpRequest的是，通过src属性加载的资源，浏览器限制了JavaScript的权限，使其不能读写返回的内容。

这是吴瀚清所著《白帽子讲web安全》中有关浏览器安全的一段话，对其中“不同于XMLHttpRequest的是，通过src属性加载的资源，浏览器限制了JavaScript的权限，使其不能读写返回的内容”这一段话有些不太理解。因为，既然通过src属性成功加载了跨域资源，那么浏览器限制JavaScript的权限，使其不能读写返回的内容，这前后不是矛盾的吗？“加载资源”更直白的理解不就是“读写资源”吗？浏览一些资料后，经过几天的思考，有了一些个人的理解。

（1）首先需要深刻理解同源策略限制了“什么资源”的跨域访问？

1.同源策略对网页的HTML文档做了限制，但加载静态资源如javascript、css、图片等是不受限制的。

2.页面中的链接，重定向以及表单提交是不会受到同源策略限制的，比如在网站www.foo.com下提交一个表单到www.bar.com是完全可以的。

3.跨域资源嵌入是允许的。

我们需要重点理解第三项，跨域资源嵌入既是通过src属性来实现的。举例来说，假如A网站（www.aaa.com）需要展示一份豆瓣图书销量前一百的名单，由于同源策略的存在，A网站上的一个脚本（我们把这个脚本记作a）不能通过XHR请求来获取豆瓣上的数据，但是可以通过部分标签的src属性来跨域获取该书单数据。具体过程是，A网站上的a运行，“调用”豆瓣的某个脚本(记作b)，豆瓣通过“脚本”b（应该说是一个接口，但接口的功能也是通过脚本实现的，所以在这里我用“脚本”来表示。）将书单数据传给A网站。我们可以把书单数据当做是b运行的结果，此过程中浏览器会限制a对豆瓣“脚本”b内容的读写，仅仅是只能“调用”，而不是限制对书单数据的读写。脚本b就是运行脚本a的返回内容，所以这样就解释了为什么通过src属性加载的资源，浏览器限制了JavaScript的权限，使其不能读写返回的内容，这段话并不是前后矛盾的。

再来说说浏览器同源策略主要的限制范围。

 

（1） Cookie、LocalStorage、sessionStorage和 IndexDB 无法读取。
（2） DOM 节点无法读取和设置。
（3） AJAX 请求不能发送。

将同源策略的限制范围和非限制范围对比可以更深刻的理解同源策略存在的意义和绕过同源策略的方法总结。

 

PS:本人菜鸟一个，记录这个博客仅为理清自己的思路，有不对的地方欢迎指正。谢谢~~~