首页 > 语言 > JavaScript > 正文

JavaScript同源策略和跨域访问实例详解

2024-05-06 15:20:13
字体:
来源:转载
供稿:网友

本文实例讲述了JavaScript同源策略和跨域访问。分享给大家供大家参考,具体如下:

1. 什么是同源策略

理解跨域首先必须要了解同源策略。同源策略是浏览器上为安全性考虑实施的非常重要的安全策略。

何谓同源:

URL由协议、域名、端口和路径组成,如果两个URL的协议、域名和端口相同,则表示他们同源。

同源策略:

浏览器的同源策略,限制了来自不同源的"document"或脚本,对当前"document"读取或设置某些属性。 (白帽子讲web安全[1])

从一个域上加载的脚本不允许访问另外一个域的文档属性。

举个例子:

比如一个恶意网站的页面通过iframe嵌入了银行的登录页面(二者不同源),如果没有同源限制,恶意网页上的javascript脚本就可以在用户登录银行的时候获取用户名和密码。

在浏览器中,<script>、<img>、<iframe>、<link>等标签都可以加载跨域资源,而不受同源限制,但浏览器限制了JavaScript的权限使其不能读、写加载的内容。

另外同源策略只对网页的HTML文档做了限制,对加载的其他静态资源如javascript、css、图片等仍然认为属于同源。

代码示例(http://localhost:8080/和http://localhost:8081由于端口不同而不同源):

http://localhost:8080/test.html

<html>  <head><title>test same origin policy</title></head>  <body>    <iframe id="test" src="http://localhost:8081/test2.html"></iframe>    <script type="text/javascript">      document.getElementById("test").contentDocument.body.innerHTML = "write somthing";    </script>  </body></html>

http://localhost:8081/test2.html

<html>  <head><title>test same origin policy</title></head>  <body>    Testing.  </body></html>

在Firefox中会得到如下错误:

Error: Permission denied to access property 'body'

Document对象的domain属性存放着装载文档的服务器的主机名,可以设置它。

例如来自"blog.Vevb.com"和来自"bbs.Vevb.com"的页面,都将document.domain设置为"Vevb.com",则来自两个子域名的脚本即可相互访问。

出于安全的考虑,不能设置为其他主domain,比如//www.Vevb.com/不能设置为sina.com

2. Ajax跨域

Ajax (XMLHttpRequest)请求受到同源策略的限制。

Ajax通过XMLHttpRequest能够与远程的服务器进行信息交互,另外XMLHttpRequest是一个纯粹的Javascript对象,这样的交互过程,是在后台进行的,用户不易察觉。

因此,XMLHTTP实际上已经突破了原有的Javascript的安全限制。

举个例子:

假设某网站引用了其它站点的javascript,这个站点被compromise并在javascript中加入获取用户输入并通过ajax提交给其他站点,这样就可以源源不断收集信息。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表

图片精选