什么是浏览器同源策略?

x33g5p2x  于2022-04-23 转载在 其他  
字(1.7k)|赞(0)|评价(0)|浏览(469)

同源策略限制了从同⼀个源加载的⽂档或脚本如何与来⾃另⼀个源的资源进⾏交互。这是⼀个⽤于隔离潜在恶意⽂件的
重要安全机制。
同源是指"协议+域名+端⼝"三者相同,即便两个不同的域名指向同⼀个ip地址,也⾮同源。
下表给出了http://store.company.com/dir/page.html

URL结果原因
http://store.company.com/dir2/other.html成功只有路径不同
http://store.company.com/dir/inner/another.html成功只有路径不同
https://store.company.com/secure.html失败不同协议(https和http)
http://store.company.com:81/dir/etc.html失败不同端口号(http://80是默认的)
http://news.company.com/dir/other.html失败不同域名(new和store)
浏览器中的大部分内容都受同源策略限制的,但是以下三个标签可以不受限制:
<img src='xxx'>
<link href='xxx'>
<script src='xxx'>

二、如何实现跨域
跨域是一个比较古老的命题了,历史上跨域的实现手段有很多,我们现在主要介绍三种比较流行的跨域方案,企业的方案我们就不深入讨论了,因为使用的场景很少,也没有必要记住。
2.1、jsonp实现跨域

jsonp实现跨域本质是利用:script标签不受同源策略的限制的特性进行跨域操作。
jsonp的优点:实现简单,兼容性较好。
jsonp的缺点:只支持get请求,有安全性问题,容易受到xss攻击,需要服务端配合jsonp进行一定程度的改造。

2.2、最流行的跨域方案cors
cors是⽬前主流的跨域解决⽅案,跨域资源共享(CORS) 是⼀种机制,它使⽤额外的 HTTP 头来告诉浏览器 让运⾏在⼀个 origin (domain) 上的Web应⽤被准许访问来⾃不同源服务器上的指定的资源。当⼀个资源从与该资源本身所在的服务器不同的域、协议或端⼝请求⼀个资源时,资源会发起⼀个跨域 HTTP 请求。
如果你用express,可以这样在后端设置。

//CORS middleware
var allowCrossDomain = function(req, res, next) {
res.header('Access-Control-Allow-Origin', 'http://example.com');
res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
res.header('Access-Control-Allow-Headers', 'Content-Type');
next();
}
//...
app.configure(function() {
app.use(express.bodyParser());
app.use(express.cookieParser());
app.use(express.session({ secret: 'cool beans' }));
app.use(express.methodOverride());
app.use(allowCrossDomain);
app.use(app.router);
app.use(express.static(__dirname + '/public'));
});

在生产环境中建议用成熟的开源中间件解决问题。
2.3、最方便的跨域解决方案Nginx
nginx是一款及其强大的web服务器,其优点是轻量级,启动快,高并发。
现在的新项目中nginx几乎是首选,我们用node或者java开发的服务通常都需要经过nginx的反向代理。
反向代理的原理很简单,即所有客户端的请求都必须先经过nginx的处理,nginx作为代理服务器再讲请求转发给node或者java服务,这样就规避了同源策略。

相关文章