js同源策略详解

本文较为详细的分析了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]www.jb51.net[/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程序设计有所帮助。

赞 (0)

相关推荐

  • 完美解决AJAX跨域问题

    从AJAX诞生那天起,XMLHttprequest对象不能跨域请求的问题就一直存在.这似乎是一个很经典的问题了.是由于javascript的同源策略(这里不作深入探讨)所导致. 解决的办法,大概有如下几种: 1. 使用中间层过渡的方式(可以理解为"代理"): 中间过渡,很明显,就是在AJAX与不同域的服务器进行通讯的中间加一层过渡,这一层过渡可以是PHP.JSP.c++等任何具备网络通讯功能的语言,由中间层向不同域的服务器进行读取数据的操作.拿asp.net做一个例子,如果需要对不同域

  • 使用jsonp完美解决跨域问题

    使用jsonp完美解决跨域问题

    调用web接口,get请求,发现提示:No 'Access-Control-Allow-Origin' header is present on the requested resource. 这个和安全机制有关,默认不允许跨域调用 处理手段:使用jsonp格式, ajax请求参数dataType:'JSONP'. 复制代码 代码如下: $.ajax({         url: "http://.......",         type: 'GET',         dataTy

  • 关于JavaScript跨域问题及实时刷新解决方案

    在自己页面显示其他网站上面的数据,需要用Ajax,就涉及到跨域问题, 解决方案:jQuery.support.cors = true; (浏览器支持跨域访问), 实例: 复制代码 代码如下: //浏览器支持跨域访问 jQuery.support.cors = true; $.ajax({ url: "http://www.rj99999.com/Price/ListPrice.html", dataType: 'html', success: function (data, textS

  • AJAX的跨域访问-两种有效的解决方法介绍

    新的W3C策略实现了HTTP跨域访问,还亏我找了很久的资料解决这个问题:只需要在servlet中返回的头部信息中添加Access-Control-Allow-Origin这个既可.比如我要开放所有我本地的跨域访问,就设置如下:response.setHeader("Access-Control-Allow-Origin", "http://127.0.0.1/*");这样我本地的A工程中的AJAX请求就可以跨域请求B工程中的servlet.代码如下:HTML的JS的

  • PHP如何利用P3P实现跨域

    有别于JS跨域.IFRAME跨域等的常用处理办法,还可以利用P3P来实现跨域. P3P是什么P3P(Platform for Privacy Preferences)是W3C公布的一项隐私保护推荐标准,以为用户提供隐私保护. P3P标准的构想是:Web 站点的隐私策略应该告之访问者该站点所收集的信息类型.信息将提供给哪些人.信息将被保留多少时间及其使用信息的方式,如站点应做诸如 "本网站将监测您所访问的页面以提高站点的使用率"或"本网站将尽可能为您提供更合适的广告"

  • IE9版本以下ajax 跨域问题可行解决方法

    ajax跨域请求数据在谷歌火狐我本地IE11都是没问题的. 让测试就发现问题了,IE8下请求不到数据,然后我查看一下自己写的js看有没有不兼容问题,可是都没有啊,为什么就请求不到呢. 我把ajax的error打印出来提示no transport,网上找了资料在js中第一行加这个就可以了jQuery.support.cors = true; 好了这个问题没有了,可是又有另一个error没有权限.这个问题百度了好多都没有我想要的,最后看了一篇文章让我豁然开朗这是IE浏览器的安全性设置问题, 解决方法

  • JQuery的Ajax跨域请求原理概述及实例

    今天在项目中需要做远程数据加载并渲染页面,直到开发阶段才意识到ajax跨域请求的问题,隐约记得Jquery有提过一个ajax跨域请求的解决方式,于是即刻翻出Jquery的API出来研究,发 JQuery对于Ajax的跨域请求有两类解决方案,不过都是只支持get方式.分别是JQuery的 jquery.ajax jsonp格式和jquery.getScript方式. 什么是jsonp格式呢?API原文:如果获取的数据文件存放在远程服务器上(域名不同,也就是跨域获取数据),则需要使用jsonp类型.

  • php跨域cookie共享使用方法

    A 机器所在的域:a1.main.com,A 有应用 main.phpB 机器所在的域:b1.test.com,B 有应用 test.php 1.在 main.php 里设置 cookie 的时候, cookie 的设置方法如下: 复制代码 代码如下: setcookie( "TestCookie",  "okol",  time() + 3600,  "/", "b1.test.com", 1 ); 这样在 test.php

  • 基于Jquery的跨域传输数据(JSONP)

    后端: 复制代码 代码如下: <?php $json_str = json_encode(array("ddd"=>"11111111")); echo $_GET['ja'].'('.$json_str.')'; ?> 前端: 复制代码 代码如下: $.getJSON('http://www.liushan.cn/test.php?ja=?',function (json){ alert(json); }); 纯JS实现(JSONP): 复制代码

  • 使用JSON实现数据的跨域传输的php代码

    后台profile.php代码: 复制代码 代码如下: <?php $arr = array( 'firstname' => iconv('gb2312', 'utf-8', '非诚'), 'lastname' => iconv('gb2312', 'utf-8', '勿扰'), 'contact' => array( 'email' =>'fcwr@jb51.net', 'website' =>'http://www.jb51.net', ) ); //将一个数组JS

  • js跨域问题浅析及解决方法优缺点对比

    什么是跨域? 概念:只要协议.域名.端口有任何一个不同,都被当作是不同的域. 复制代码 代码如下: URL                      说明       是否允许通信 http://www.a.com/a.js http://www.a.com/b.js 同一域名下 允许 http://www.a.com/lab/a.js http://www.a.com/script/b.js 同一域名下不同文件夹 允许 http://www.a.com:8000/a.js http://www

  • jquery下异步提交表单 异步跨域提交表单

    1.使用post提交方式 2.构造表单的数格式 3.结合form表单的submit调用ajax的回调函数. 使用 jQuery 异步提交表单代码: 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>无标题页</title> </head> <script src="js/jquery-1.4.2.js">&l

  • 如何设置iframe高度自适应在跨域情况下的可用方法

    在页面上使用iframe来动态加载页面内容是网页开发中比较常见的方法.在父页面中给定一个不带滚动条的iframe,然后对属性src指定一个可加载的页面,这样当父页面被访问的时候,子页面可以被自动加载.iframe的高度需要根据子页面的实际高度来进行调整.如果iframe的高度小于子页面的实际高度,超出的部分无法显示:相反,如果iframe的高度过高,则页面上会出现大量的空白区域.我们可以通过属性或者CSS来设置iframe的高度,当不确定子页面内容的高度时,也可以通过脚本来进行动态指定.但是如果

  • JS跨域总结

    javascript跨域有两种情况: 1.基于同一父域的子域之间,如:a.c.com和b.c.com 2.基于不同的父域之间,如:www.a.com和www.b.com 3.端口的不同,如:www.a.com:8080和www.a.com:8088 4.协议不同,如:http://www.a.com和https://www.a.com 对于情况3和4,需要通过后台proxy来解决,具体方式如下: a.在发起方的域下创建proxy程序 b.发起方的js调用本域下的proxy程序 c.proxy将请

  • 深入浅析同源策略和跨域访问

    1. 什么是同源策略 理解跨域首先必须要了解同源策略.同源策略是浏览器上为安全性考虑实施的非常重要的安全策略. 何谓同源: URL由协议.域名.端口和路径组成,如果两个URL的协议.域名和端口相同,则表示他们同源. 同源策略: 浏览器的同源策略,限制了来自不同源的"document"或脚本,对当前"document"读取或设置某些属性. (白帽子讲web安全[1]) 从一个域上加载的脚本不允许访问另外一个域的文档属性. 举个例子: 比如一个恶意网站的页面通过ifra

  • 用iframe设置代理解决ajax跨域请求问题

    今天在项目中需要做远程数据加载并渲染页面,直到开发阶段才意识到ajax跨域请求的问题.于是想用代理的方式来解决这个跨域问题. 什么是跨域? 简单的来说,出于安全方面的考虑,页面中的JavaScript无法访问其他服务器上的数据,即"同源策略".而跨域就是通过某些手段来绕过同源策略限制,实现不同服务器之间通信的效果. 方案:在服务器端创建一个静态的代理页面,在客户端用iframe调用这个代理,然后通过iframe的document.getElementById("proxy&q

  • 用jQuery与JSONP轻松解决跨域访问的问题

    时间过得好快,又被拉回js战场时, 跨域问题这个伤疤又开疼了. 好在,有jquery帮忙,跨域问题似乎没那么难缠了.这次也借此机会对跨域问题来给刨根问底,结合实际的开发项目,查阅了相关资料,算是解决了跨域问题..有必要记下来备忘. 跨域的安全限制都是指浏览器端来说的.服务器端是不存在跨域安全限制的,所以通过本机服务器端通过类似httpclient方式完成"跨域访问"的工作,然后在浏览器端用AJAX获取本机服务器端"跨域访问"对应的url.来间接完成跨域访问也是可以的

  • js iframe跨域访问(同主域/非同主域)分别深入介绍

    js跨域是个讨论很多的话题.iframe跨域访问也被研究的很透了. 一般分两种情况: 一. 是同主域下面,不同子域之间的跨域: 同主域,不同子域跨域,设置相同的document.domian就可以解决; 父页访问子页,可以document.getElementById("myframe").contentWindow.document来访问iframe页面的内容:如果支持contentDocument也可以直接document.getElementById("myframe&

  • 5种处理js跨域问题方法汇总

    前两天碰到一个跨域问题的处理,使用jsonp可以解决.(http://www.jb51.net/article/57889.htm) 最近再整理了一下: 1.jsonp. ajax请求,dataType为jsonp.这种形式需要请求在服务端调整为返回callback([json-object])的形式.如果服务端返回的是普通json对象.那么调试的时候,在chrome浏览器的控制台会报"Uncaught SyntaxError: Unexpected token"错误:在firefox

  • 借助script进行Http跨域请求:JSONP实现原理及代码

    <script>元素的src属性能设置URL并发起HTTP GET请求, 使用<script>元素实现脚本操作HTTP可以跨域通信而不受限与同源策略. 通常, 使用基于<script>的Ajax传输协议时, 服务器响应采用JSON编码的数据格式, 当执行脚本时候, JavaScript解析器能够自动将其解码. 由于它使用JSON数据格式, 因此这种Ajax传输协议也叫做"JSONP". 所以使用jsonp技术, 只需要设置<script>

  • jquery ajax jsonp跨域调用实例代码

    客户端代码 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApp.WebForm1" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:

  • jquery的ajax和getJson跨域获取json数据的实现方法

    很多开发人员在使用jquery在前端和服务器端进行数据交互,所以很容易会认为在前端利用jquery就可以读取任何站点的数据了.近日在进行开 发时,因为要和第三方公司的一个项目进行数据的共享,因为考虑多不占用服务器的资源,遂决定直接在html进行数据的读取,不走服务器端进行中转了.然后 正好就遇到了浏览器端跨域访问的问题. 跨域的安全限制都是指浏览器端来说的,服务器端不存在跨域安全限制的问题. 目前浏览器端跨域访问常用的两种方法有两种: 1.通过jQuery的ajax进行跨域,这其实是采用的jso

  • jquery ajax跨域解决方法(json方式)

    最近公司开发的项目中很多地方需要跨域ajax请求,比如几个子域名下 http://a.****.com/index123.aspx, http://b.****.com/index2.aspx 都要请求用户json信息,然后再对数据进行处理,起初我和同事们试了很多种方法,使用$.ajax() 无论是get或post方法都会引起uri deny的错误.一番GG之后发现了解决方法,也了解其中的原因. jquery从1.2开始,.getJSON就支持跨域操作了.使用jquery.getJSON()方法

  • JavaScript使用HTML5的window.postMessage实现跨域通信例子

    JavaScript由于同源策略的限制,跨域通信一直是棘手的问题.当然解决方案也有很多: 1.document.domain+iframe的设置,应用于主域相同而子域不同: 2.利用iframe和location.hash,数据直接暴露在了url中,数据容量和类型都有限 3.Flash LocalConnection, 对象可在一个 SWF 文件中或多个 SWF 文件间进行通信, 只要 在同一客户端就行,跨应用程序, 可以跨域. window.name 保存数据以及跨域 iframe 静态代理动

  • Webkit的跨域安全问题说明

    Webkit的跨域安全问题说明

    这里有个简单的测试页面:IE.火狐弹出"hello world",而chrome,safari,opera毫无反应. 以下是小段测试代码(刻意修改domain,让父页面和子页面为不同域页面): 1.父页面代码: 复制代码 代码如下: <script> document.domain = "nunumick.me"; function doTest(){ alert('hello world'); } </script> <iframe

  • UEditor 编辑器跨域上传解决方法

    解决的方法: 1.在 ueditor\dialogs\internal.js 加入 document.domain = '根域名'; 2.在当前页面同样指定根域名: 复制代码 代码如下: <script type="text/javascript">    document.domain = "根域名";</script> 这样在 chrome.firefox 下没有问题,但在 ie 下还需要简单修改下 UEditor,在 editor.js

  • jquery下利用jsonp跨域访问实现方法

    复制代码 代码如下: $.ajax({ async:false, url: '', // 跨域URL type: 'GET', dataType: 'jsonp', jsonp: 'jsoncallback', //默认callback data: mydata, //请求数据 timeout: 5000, beforeSend: function(){ //jsonp 方式此方法不被触发.原因可能是dataType如果指定为jsonp的话,就已经不是ajax事件了 }, success: fu

  • Ajax跨域代理访问网络资源的实现代码

    smart.asp 复制代码 代码如下: <script language="jscript" runat="server"> /* 在VBS里面的调用方法 dim myhttp set myhttp = SmartHttp(url,method,data); //三个参数均可选 属性: url:String,请求的URL地址 method:String,请求的方法 data:String,请求的数据 charset:String,请求的URL返回数据的

  • jquery $.getJSON()跨域请求

    1,同一域名下和其他的请求可以是一样的 js: 复制代码 代码如下: var url="http://localhost:2589/a.ashx"; $(function(){ $.getJSON(url,function(data){ alert (data.Name); }) }); 服务器返回字符串: {"Name":"loogn","Age":23} 2,不同域名下 js: 复制代码 代码如下: var url=&qu

  • Ajax跨域查询完美解决通过$.getJSON()实现

    原因:浏览器安全上做了限制,禁止ajax跨域获得数据. 解决方法:通过jquery提供的$.getJSON()可以跨域获得JSON格式的数据.优点:兼容性强. Java后台代码: 复制代码 代码如下: protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { String callback =req.getParameter("cal

  • AJAX跨域请求json数据的实现方法

    我们都知道,AJAX的一大限制是不允许跨域请求. 不过通过使用JSONP来实现.JSONP是一种通过脚本标记注入的方式,它是可以引用跨域URL的js脚本,不过需要提供一个回调函数(必须在您自己的页面上),因此,你可以自己处理结果. 让我们看看JSONP的是怎么在jQuery,MooTools的,Dojo Toolkit中实现的. jQuery的JSONPjQuery.getJSON方法: Js代码 复制代码 代码如下: jQuery.getJSON("http://search.twitter.

随机推荐