js同源策略详解


Posted in Javascript onMay 21, 2015

本文较为详细的分析了js同源策略。分享给大家供大家参考。具体如下:

概念:同源策略是客户端脚本(尤其是Javascript)的重要的安全度量标准。它最早出自Netscape Navigator2.0,其目的是防止某个文档或脚本从多个不同源装载。

这里的同源指的是:同协议,同域名和同端口。

精髓:

它的精髓很简单:它认为自任何站点装载的信赖内容是不安全的。当被浏览器半信半疑的脚本运行在沙箱时,它们应该只被允许访问来自同一站点的资源,而不是那些来自其它站点可能怀有恶意的资源。

为什么要有同源限制?

我们举例说明:比如一个黑客程序,他利用IFrame把真正的银行登录页面嵌到他的页面上,当你使用真实的用户名,密码登录时,他的页面就可以通过Javascript读取到你的表单中input中的内容,这样用户名,密码就轻松到手了。

Ajax应用:

在Ajax应用中这种安全限制被突破。

在普通的Javascript应用中,我们可以修改Frame的href,或者IFrame的src,以实现GET方式的跨域提交,但是却不能访问跨域的Frame/IFrame中的内容。

而Ajax它通过XMLHTTP进行异步交互,这个对象同样能够与远程的服务器进行信息交互,而且更加危险的是,XMLHTTP是一个纯粹的Javascript对象,这样的交互过程,是在后台进行的,不被用户察觉。因此,XMLHTTP实际上已经突破了原有的Javascript的安全限制。

如果我们又想利用XMLHTTP的无刷新异步交互能力,又不愿意公然突破Javascript的安全策略,可以选择的方案就是给XMLHTTP加上严格的同源限制。这样的安全策略,很类似于Applet的安全策略。IFrame的限制还仅仅是不能访问跨域HTMLDOM中的数据,而XMLHTTP则根本上限制了跨域请求的提交

浏览器支持:而IE其实给这个安全策略开了两个想当然的后门,一个是:他假设你的本地文件,自然清楚将会访问什么内容,所以任何你的本地文件访问外部数据, 都不会收到任何的警告。另一个是:当你访问的网站脚本打算访问跨域的信息时, 他居然仅仅是弹出一个对话框来提醒你一下。如果一个欺诈网站,采用这样的手段,提供一个假页面给你,然后通过XMLHTTP帮你远程登录真实的银行服务器。只要10个用户里,有一个用户糊涂一下,点了一个确定。他们的盗取帐号行为,就成功了! 你想想看,这是何等危险的事情!

FireFox就不是这样的做法,缺省的情况下,FireFox根本就不支持跨域的XMLHTTP请求,根本就不给黑客这样的机会。

避免同源策略:

JSON和动态脚本标记

<script type="text/javascript"
src="http://yoursiteweb.com/findItinerary?username=sachiko&
reservationNum=1234&output=json&callback=showItinerary" /> 

当 JavaScript 代码动态地插入 <script> 标记时,浏览器会访问 src 属性中的 URL。这样会导致将查询字符串中的信息发送给服务器。在 清单 1中,所传递的是 username 和 reservation 作为名称值对传递。此外,查询字符串还包含向服务器请求的输出格式和回调函数的名称(即 showItinerary)。<script> 标记加载后,会执行回调函数,并通过回调函数的参数把从服务返回的信息传递给该回调函数。

Ajax代理

Ajax 代理是一种应用级代理服务器,用于调解 Web 浏览器和服务器之间的 HTTP 请求和响应。Ajax 代理允许 Web 浏览器绕过同源策略,这样便可以使用 XMLHttpRequest 访问第三方服务器。要实现这种绕过,有如下两种方法可供选择:
客户端 Web 应用程序知道第三方 URL 并将该 URL 作为 HTTP 请求中的一个请求参数传递给 Ajax 代理。然后,代理将请求转发给 [url]3water.com[/url]。注意,可以把代理服务器的使用隐藏在 Web应用程序开发人员所使用的 Ajax 库的实现中。对于 Web 应用程序开发人员而言,它看上去可能完全不具有同源策略。
客户端 Web 应用程序不知道第三方 URL,并且尝试通过 HTTP 访问 Ajax 代理服务器上的资源。通过一个预定义的编码规则,Ajax 代理将 所请求的 URL 转换为第三方服务器的 URL 并代表客户检索内容。这样一来,Web 应用程序开发人员看上去就像是在和代理服务器直接进行通信。

Greasemonkey

Greasemonkey 是一个 Firefox 扩展,它允许用户动态地对 Web 页面的样式和内容进行修改。Greasemonkey 用户可以把用户脚本(user script)文件与一个 URL 集合建立关联。当浏览器通过该 URL 集合加载页面时,便会执行这些脚本。Greasemonkey 为用户脚本的 API 提供了额外的许可(与运行在浏览器沙盒中的脚本的许可相比较)。

GM_XMLHttpRequest 是其中的一个 API,它从本质上说就是一个不具有同源策略的 XMLHttpRequest。用户脚本可以将浏览的内置 XMLHttpRequest 替代为 GM_XMLHttpRequest,从而许可 XMLHttpRequest 执行跨域访问。

GM_XMLHttpRequest 的使用只能通过用户同意的途径才能受到保护。也就是说,Greasemonkey 只有在建立新用户脚本与特定 URL 的集合之间的关联时才会要求用户配置。然而,不难想象一些用户可能会被欺骗,在没有完全理解其后果时就接受该安装。

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
优化网页之快速的呈现我们的网页
Jun 29 Javascript
ajax上传时参数提交不更新等相关问题
Dec 11 Javascript
JS的get和set使用示例
Feb 20 Javascript
jQuery mobile转换url地址及获取url中目录部分的方法
Dec 04 Javascript
JavaScript获取图片像素颜色并转换为box-shadow显示
Mar 11 Javascript
js弹出框、对话框、提示框、弹窗实现方法总结(推荐)
May 31 Javascript
jquery树形菜单效果的简单实例
Jun 06 Javascript
js两种拼接字符串的简单方法(必看)
Sep 02 Javascript
jquery html5 视频播放控制代码
Nov 06 Javascript
解决vue-cli webpack打包后加载资源的路径问题
Sep 25 Javascript
简单了解node npm cnpm的具体使用方法
Feb 27 Javascript
构建一个JavaScript插件系统
Oct 20 Javascript
js设置document.domain实现跨域的注意点分析
May 21 #Javascript
jQuery+ajax实现无刷新级联菜单示例
May 21 #Javascript
jQuery插件expander实现图片翻转特效
May 21 #Javascript
简单分析javascript面向对象与原型
May 21 #Javascript
jQuery获取上传文件的名称的正则表达式
May 21 #Javascript
js兼容火狐获取图片宽和高的方法
May 21 #Javascript
js兼容火狐显示上传图片预览效果的方法
May 21 #Javascript
You might like
php为什么选mysql作为数据库? Mysql 创建用户方法
2007/07/02 PHP
php实例分享之二维数组排序
2014/05/15 PHP
ThinkPHP中pathinfo的访问模式、路径访问模式及URL重写总结
2014/08/23 PHP
PHP 接入微信扫码支付总结(总结篇)
2016/11/03 PHP
php封装一个异常的处理类
2017/06/08 PHP
解决PhpStorm64不能启动的问题
2020/06/20 PHP
php+mysql+ajax 局部刷新点赞/取消点赞功能(每个账号只点赞一次)
2020/07/24 PHP
深入理解JavaScript系列(8) S.O.L.I.D五大原则之里氏替换原则LSP
2012/01/15 Javascript
JSON无限折叠菜单编写实例
2013/12/16 Javascript
jquery 淡入淡出效果的简单实现
2014/02/07 Javascript
Jquery实现瀑布流布局(备有详细注释)
2015/07/31 Javascript
JS实现slide文字框缩放伸展效果代码
2015/11/05 Javascript
JS正则表达式之非捕获分组用法实例分析
2016/12/28 Javascript
canvas绘制爱心的几种方法总结(推荐)
2017/10/31 Javascript
实例讲解javascript实现异步图片上传方法
2017/12/05 Javascript
详解在React.js中使用PureComponent的重要性和使用方式
2018/07/10 Javascript
Javascript 之封装(Package)
2018/09/14 Javascript
如何检查一个对象是否为空
2019/04/11 Javascript
微信小程序实现带参数的分享功能(两种方法)
2019/05/17 Javascript
eslint+prettier统一代码风格的实现方法
2020/07/22 Javascript
PYTHON正则表达式 re模块使用说明
2011/05/19 Python
python机器学习理论与实战(六)支持向量机
2018/01/19 Python
简单实现Python爬取网络图片
2018/04/01 Python
python实现对指定字符串补足固定长度倍数截断输出的方法
2018/11/15 Python
python合并已经存在的sheet数据到新sheet的方法
2018/12/11 Python
Python正则表达式匹配数字和小数的方法
2019/07/03 Python
在django-xadmin中APScheduler的启动初始化实例
2019/11/15 Python
python matplotlib 绘图 和 dpi对应关系详解
2020/03/14 Python
Pycharm学生免费专业版安装教程的方法步骤
2020/09/24 Python
德国最大的服装、鞋子和配件在线商店之一:Outfits24
2019/07/23 全球购物
2014的自我评价
2014/01/13 职场文书
小学生获奖感言范文
2014/02/02 职场文书
县政协领导班子群众路线教育实践活动四风问题整改方案
2014/10/26 职场文书
公司客户答谢酒会祝酒词
2015/08/11 职场文书
《神奇的鸟岛》教学反思
2016/02/22 职场文书
Golang 字符串的常见操作
2022/04/19 Golang