也谈谈同源策略和跨域问题那么先定义下什么是同源，所谓同源，就是指两个页面具有相同的协议，主机（也常说域名），端口，三个要素缺一不可。 URL1 URL2 说明 是否允许通信
http://www.foo.com/js/a.js http://www.foo.com/js/b.js 协议、域名、端口都相同 允许
http://www.foo.com/js/a.js http://www.foo.com:8888/js/b.js 协议、域名相同，端口不同 不允许
https://www.foo.com/js/a.js http://www.foo.com/js/b.js 主机、域名相同，协议不同 不允许
http://www.foo.com/js/a.js http://www.bar.com/js/b.js 协议、端口相同，域名不同 不允许
http://www.foo.com/js/a.js http://foo.com/js/b.js 协议、端口相同，主域名相同，子域名不同 不允许其实不然，同源策略限制的不同源之间的交互主要针对的是js中的XMLHttpRequest等请求，下面这些情况是完全不受同源策略限制的。 页面中的链接，重定向以及表单提交是不会受到同源策略限制的。 链接就不用说了，导航网站上的链接都是链接到其他站点的。而你在域名www.foo.com下面提交一个表单到www.bar.com是完全可以的。跨域资源嵌入是允许的，当然，浏览器限制了Javascript不能读写加载的内容 。如前面提到的嵌入的<script src="..."></script>，<img>，<link>，<iframe>等。当然，如果要阻止iframe嵌入我们网站的资源(页面或者js等)，我们可以在web服务器加上一个X-Frame-Options DENY头部来限制。nginx就可以这样设置add_header X-Frame-Options DENY;。前置条件是我们在WEB服务器或者服务端脚本中设置ACCESS-CONTROL-ALLOW-ORIGIN头部，如果设置了这些头部并允许某些域名跨域访问，则浏览器就会跳过同源策略的限制返回对应的内容。此外，如果你不是通过浏览器去获取资源，比如你通过一个python脚本去调用接口或者获取js文件，也不在这个限制之内。 2.1 Ajax跨域 XMLHttpRequest cannot load http://www.bar.com/js/test.js.
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'http://www.foo.com' is therefore not allowed access.当然这里有一点要注意，其实这个跨域请求是发送成功了的，服务器也有返回test.js内容，只是浏览器禁止Javascript去取response的数据而已 。如果要设置ACCESS-CONTROL-ALLOW-ORIGIN头部，nginx可以使用下面的代码add_header 'Access-Control-Allow-Origin' 'http://www.foo.com';
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Methods' 'GET,POST';另外，我们看到直接通过Javascript去取iframe中的元素也是会报错的，因为域名不同。报错如下所示注意，是两个域名下面的文件都要设置，即便是同样的主域名。 当然这是特例，如果是两个完全不同的域名，是没有办法的，你不能把www.foo.com的domain设置成www.163.com。# index.html
<!DOCTYPE html>
<html>
<head>
<title>test cross domain</title>
<script src="/js/jquery.js"></script>
<script src="http://www.bar.com/js/test.js"></script>
<script>
$(function(){
document.domain = 'foo.com'; //1 注释掉则会报错
var ifr = document.getElementById("testframe");
ifr.onload = function(){
var doc = ifr.contentDocument || ifr.contentWindow.document;
alert(doc.getElementsByTagName("h1")[0].childNodes[0].nodeValue);
}
});
$.ajax("http://www.bar.com/js/test.js"); //2 报错
</script>
</head>
<body>
<h1>Test Cross Domain</h1>
<iframe id="testframe" src="http://foo.com/test.html"></iframe>
</body>
</html>.2 JSONP跨域访问 # jsonp.html
<script type="text/javascript">
function callback(data) {
alert(data.message);
}
function addScriptTag(src){
var script = document.createElement('script');
script.src = src;
document.body.appendChild(script);
}
window.onload = function(){
addScriptTag("http://www.foo.com/js/outer.js");
}
</script>
# outer.js
callback({message:"success"}); 
网络安全
发布于：2021-07-17 17:35
|
阅读数：187
|
评论：0
QQ好友和群
QQ空间
