综述
出于防范跨站脚本攻击的同源安全策略,浏览器禁止客户端脚本(如Javascript)对不同域名的服务进行跨域调用。
同源策略(Same Origin)中的源有着严格的定义,参见RFC6454,第4章节。一般而言,Origin由{protocol, host, port}三部分组成。
下面是同源检查的一些实例:
可能有点意外的是,一般我们会认为不同的子域名应该被当做同域名,是安全的调用,但实际上浏览器同源策略甚至禁止了不同子域名和端口的服务之间的调用。
解决方法
有时候上述限制过于严格,为了在两个不同Origin的网页(服务)之间进行通讯,我们可以采用如下的一些技术方法:
1、服务代理模式
即在web服务器上封装第三方服务,然后给自己同源的web页面调用。
2、跨子域名的调用
如果想从www.example.com调用api.example.com的html/xml数据服务,那么可以通过使用iframe,并在document和iframe中均设置相同的document.domain属性,那么document和iframe所对应的页面直接就可以通信而不会有任何安全冲突(security violation),注意必须设置相同的一级域名(document.domain="example.com"),不要设置子域名。代码示例如下:
t.html
<html>
<head>
<script type="text/javascript">
document.domain = "example.com";
function update_me(result) {
document.getElementById('update-me').innerHTML = "Result: " + result;
}
function load() {
var c = document.createElement('iframe');
c.style.display = "none";
c.src = "http://api.example.com/cross-subdomains-ajax/t-frame.html#" + document.domain;
document.body.appendChild(c);
}
</script>
</head>
<body onload="load();">
<div id="update-me"></div>
</body>
</html>
t-frame.html
<html>
<head>
<script type="text/javascript">
function spoof(status, headers, result) {
var old_domain = document.domain;
document.domain = example.com;
window.parent.update_me("Ok, got it from the frame !");
try {
document.domain = old_domain;
} catch (e) { }
}
spoof();
</script>
</head>
</html>
3、跨源资源共享
这是已经标准化的技术方法,参见W3规范文档Cross OriginResouceSharing:http://www.w3.org/TR/cors/
通过在服务端设置Access-Control-Allow-Origin
响应头(一般回填$_SERVER['HTTP_ORIGIN']),
header('Access-Control-Allow-Origin: '.$_SERVER['HTTP_ORIGIN']);
来告诉浏览器该服务允许来自特定源的访问或者允许所有人访问。
尽管该规范支持使用origin list的形式,但实际浏览器实现只支持了单个origin、*、null,如果要配置多个访问源,可以在代码中处理如下(PHP):
$allowed_origins = array(
"http://www.example.com" ,
"http://app.example.com" ,
"http://cms.example.com" ,
);
if (in_array($_SERVER['HTTP_ORIGIN'], $allowed_origins)){
@header("Access-Control-Allow-Origin: " . $_SERVER['HTTP_ORIGIN']);
}
或者在httpd配置或.htaccess文件(如果使用的是Apache服务器)中添加如下语句:
SetEnvIf Origin "^(.*\.example\.com)$" ORIGIN_SUB_DOMAIN=$1
Header set Access-Control-Allow-Origin "%{ORIGIN_SUB_DOMAIN}e" env=ORIGIN_SUB_DOMAIN
如用的是nginx,配置类似如下:
location / {
# this will echo back the origin header
if ($http_origin ~ "example.com$") {
add_header "Access-Control-Allow-Origin" $http_origin;
}
}
4、使用JSONP协议
出于同源策略,HTML禁止在两个页面之间进行通讯,但<script>元素是个例外,JSONP利用这个开放特性来实现跨域调用,
在客户端调用提供JSONP支持的URL Service,获取JSONP格式数据,然后在callback函数中处理返回的json协议数据:
<script type="text/javascript" src="http://api.example.com/getdata?jsonp=callback"></script>
如使用jQuery的ajax调用方式,示范代码如下:
$.ajax({
dataType: 'jsonp',
data: 'id=10',
jsonp: 'jsonp_callback',
url: 'http://api.example.com/getdata',
success: function () {
// do stuff
},
});
5、跨文档消息(Cross-documentMessaging)
这个是HTML5引入的一个在跨域页面之间通讯的方法,参见W3规范 http://dev.w3.org/html5/postmsg/
postMessage API应用范围主要有2个,1是文档和内嵌frame之间的消息通信,2是文档和自身通过脚本打开的windows之间的消息通信
by iefreer
分享到:
相关推荐
jquery跨域调用,js跨域调用,jsonp,跨域调用
1.文件夹SilverlightFrmWcf : winform程序托管wcf服务Silverlight调用wcf 跨域解决方案 (1)解决方案frmWcfService:winform程序托管wcf服务 (2)Silverlight项目调用wcf解决方案 2.文件夹SilverlightWCFDemo: iis...
在做Web开发中,常常会遇到跨域的问题,到目前为止,已经有非常多的跨域解决方案...下面这篇文章主要给大家介绍了关于ASP.net WebAPI跨域调用问题的解决方法,文中通过示例代码介绍的非常详细,需要的朋友可以参考下。
JS调用WCF服务实例(WCF服务宿主到控制台),解决Js跨域调用问题 源码实例 wcf宿主到控制台上,并内置js调用服务的源码
使用JS调用Window服务,使用WCF技术和WebServiceHost类实现跨域调用。可以用于读取本机MAC地址、获取硬件设备信息等。
解决taro h5在调用接口时出现跨域的情况 修改config下的index.js
前端跨域解决方案,jsonp和cros两种解决方式。我们发现,Web页面上调用js文件时不受是否跨域的影响,凡是拥有"src"这个属性的标签都拥有跨域的能力,比如[removed]、、<iframe>。那就是说如果要跨域访问数据,...
由于跨域访问存在安全漏洞,所以,默认情况下,Silverlight2不允许跨域进行服务的调用。要实现跨域调用Web服务,需要在被调用的Web服务的网站跟目录下放置一个策略配置文件:clientaccesspolicy.xml。该文件的内容...
该文档介绍了vue和普通web页面中iframe实现跨域的解决方案,解决了主页面中无法调用iframe方法的问题
主要介绍了解决Vue调用springboot接口403跨域问题,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
本实例是JS跨域调用webservice!
能够完美解决arcgis js跨域解决问题,该文档详细说明了.NET或者java环境下跨域解决
jquery跨域调用webservice,采用jsonp,在webservice返回端采用HttpContext.Current.Response.Write返回json格式。,回调函数返回执行结果。
【ASP.NET编程知识】ASP.net WebAPI跨域调用问题的解决方法.docx
ajax跨域调用wcf实例
解决arcgis server跨域问题: 1、停掉ArcGIS Server的服务。 2、 打开<ArcGIS Server> \framework\runtime\tomcat\conf\web.xml,注册跨域bean 3、lib下拷贝 cors-filter-2.5.jar java-property-utils-1.9.1.jar包 4...
服务端解决跨域方法服务端解决跨域方法服务端解决跨域方法
ASP.NET配合jQuery解决跨域调用的问题
js跨域解决方案
解决tomcat在IP 和端口不同时引起的跨域问题,解决方案,通过编写crossDomain.xml文件