同源策略和跨域的理解

  1、同源策略

    同源策略的出现,是为了维护web届各种源(dom等资源)的和平,限制某脚本访问其他域的脚本资源。 比如,一个恶意网站的页面通过iframe嵌入了银行的登录页面(二者不同源),如果没有同源限制,恶意网页上的javascript脚本就可以在用户登录银行的时候获取用户名和密码。

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

   如http://www.depycode.com 与http://depycode.com 就不同源,因为域名不一样,前者为子域名,后者为顶级域名。

  可能很多人想到,为啥页面里可以加载远程的非同源的js、图片等,这就属于特殊情况了。你可以通过img 的src引用远程图片,通过script标签的src加载远程js,这种情况是不受同源策略影响的,可以视为本地资源,即视为同源。 而同源策略主要是限制js(目前主要这样)来读写其他域的dom数据,说白了,就是html。 你也可以这样理解:同源策略只对网页的HTML文档做了限制,对加载的其他静态资源如javascript、css、图片等仍然认为属于同源。

  引用别人的一个例子,来说明同源策略的限制:

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>  

其中

http://localhost:8080/test.html 与 http://localhost:8081/test2.html 非同源,访问受到了限制。 firefox就会提示:   Error: Permission denied to access property ‘body‘

2、理解跨域:

先说说jsonp。  前面说过script标签的src是可以跨域引用js,把js加载到自己的域中来执行。因此我们可以在引用js的同时提交一些参数,这样B站根据参数做出相应的操作后,将操作的结果写入到js文件中,并返回给A站点,这样A站点就得到了B站点的数据了。

  

  第一框中function是A站在加载完B站数据后执行的函数。第二框是一个DOM中添加一个script标签。因此我们现在有必要看看B站后台是怎么实现的:

  

  重点是要输出要确定Content-Type,然后就是拼凑javascript代码了。

  

时间: 2024-10-05 21:00:33

同源策略和跨域的理解的相关文章

同源策略和跨域-总结

目录: 1.同源策略 2.跨域 3.几种跨域技术 1.同源策略 什么叫同源? URL由协议.域名.端口和路径组成,如果两个URL的协议.域名和端口相同,则表示他们同源.相反,只要协议,域名,端口有任何一个的不同,就被当作是跨域. e.g. 对于http://store.company.com/dir/page.html进行同源检测: URL 结果 原因 http://store.company.com/dir2/other.html 成功 仅路径不同 http://store.company.c

第二百七十四节,同源策略和跨域访问

同源策略和跨域访问  什么是同源策略 尽管浏览器的安全措施多种多样,但是要想黑掉一个Web应用,只要在浏览器的多种安全措施中找到某种措施的一个漏洞或者绕过一种安全措施的方法即可.浏览器的各种保安措施之间都试图保持相互独立,但是攻击者只要能在出错的地方注入少许JavaScript,所有安全控制几乎全部瓦解--最后还起作用的就是最弱的安全防线:同源策略.同源策略管辖着所有保安措施,然而,由于浏览器及其插件,诸如Acrobat Reader.Flash 和Outlook Express漏洞频出,致使同

解说同源策略和跨域访问

尽管浏览器的安全措施多种多样,但是要想黑掉一个Web应用,只要在浏览器的多种安全措施中找到某种措施的一个漏洞或者绕过一种安全措施的方法即可.浏览器的各种保安措施之间都试图保持相互独立,但是攻击者只要能在出错的地方注入少许JavaScript,所有安全控制几乎全部瓦解--最后还起作用的就是最弱的安全防线:同源策略.同源策略管辖着所有保安措施,然而,由于浏览器及其插件,诸如Acrobat Reader.Flash 和Outlook Express漏洞频出,致使同源策略也频频告破. 既然web应用的最

同源策略和跨域解决方案

同源策略 一个源的定义 如果两个页面的协议,端口(如果有指定)和域名都相同,则两个页面具有相同的源. 举个例子: 下表给出了相对http://a.xyz.com/dir/page.html同源检测的示例: URL 结果 原因 http://a.xyz.com/dir2/other.html 成功   http://a.xyz.com/dir/inner/another.html 成功   https://a.xyz.com/secure.html 失败 不同协议 ( https和http ) h

同源策略与跨域问题

在前后端通信时,有时会遇到跨域问题,接下来将从以下几个方面进行跨域详解. 1. 为什么会有跨域问题? 2. 什么是同源策略? 3.前后端通信方式有哪些? 4.解决跨域通信的方式有哪些? 5.解决跨域方式详细说明 为什么会有跨域问题? 答:是由于浏览器的同源策略. 什么是同源策略? 答:同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能. 同源策略限制了从一个源加载的文件或脚本如何与另一个源的资源进行交互.这是一个用于隔离潜在恶意文件的安全机制. 那什么

11. cookie_session_原生ajax_readyState的值_同源策略_跨域_jsonp的使用

1. cookie 浏览器存储技术.(服务器将少量数据交于浏览器存储管理) 作用: 存储数据, 解决 http 协议无状态问题 工作流程: 浏览器发送请求给服务器,请求登录 服务器返回响应给浏览器,此时携带了cookie(其中包含着当前用户的唯一标识) 浏览器接受到响应中cookie,得保存下来 浏览器下一次发送请求时,会自动携带上cookie, 服务器接受到请求,解析cookie,从而判断是哪个用户发送的请求(解决http协议无状态问题) 服务器端的使用: 设置cookie        re

浏览器的同源策略及跨域解决方案

同源策略 一个源的定义 如果两个页面的协议,端口(如果有指定)和域名都相同,则两个页面具有相同的源. 举个例子: 下表给出了相对http://a.xyz.com/dir/page.html同源检测的示例: URL 结果 原因 http://a.xyz.com/dir2/other.html 成功   http://a.xyz.com/dir/inner/another.html 成功   https://a.xyz.com/secure.html 失败 不同协议 ( https和http ) h

【转】同源策略和跨域请求解决方案

一.一个源的定义 如果两个页面的协议,端口(如果有指定)和域名都相同,则两个页面具有相同的源.举个例子: 下表给出了相对http://a.xyz.com/dir/page.html同源检测的示例: URL 结果 原因 http://a.xyz.com/dir2/other.html 成功 协议,端口(如果有指定)和域名都相同 http://a.xyz.com/dir/inner/another.html 成功 协议,端口(如果有指定)和域名都相同 https://a.xyz.com/secure

JS同源策略和跨域访问

同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响.可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现. 1. 什么是同源策略 理解跨域首先必须要了解同源策略.同源策略是浏览器上为安全性考虑实施的非常重要的安全策略. 何谓同源: URL由协议.域名.端口和路径组成,如果两个URL的协议.域名和端口相同,则表示他们同源. 同源策略: 浏览器的同源策略,限制了来自不同源的"doc