浏览器的同源策略和跨域访问

Posted 2020-10-27 菜菜鸟~NL

1. 什么是同源策略 

    理解跨域首先必须要了解同源策略。同源策略是浏览器上为安全性考虑实施的非常重要的安全策略。
    何谓同源:
        URL由协议、域名、端口和路径组成，如果两个URL的协议、域名和端口相同，则表示他们同源。
    同源策略:
        浏览器的同源策略，限制了来自不同源的"document"或脚本，对当前"document"读取或设置某些属性。
        从一个域上加载的脚本不允许访问另外一个域的文档属性。

 举个例子：
        比如一个恶意网站的页面通过iframe嵌入了银行的登录页面（二者不同源），如果没有同源限制，恶意网页上的javascript脚本就可以在用户登录银行的时候获取用户名和密码。

    在浏览器中，<script>、<img>、<iframe>、<link>等标签都可以加载跨域资源，而不受同源限制，但浏览器限制了JavaScript的权限使其不能读、写加载的内容。
    另外同源策略只对网页的html文档做了限制，对加载的其他静态资源如javascript、css、图片等仍然认为属于同源。

 

 

跨域请求解决方案：

1、 通过jsonp跨域
2、 document.domain + iframe跨域
3、 location.hash + iframe
4、 window.name + iframe跨域
5、 postMessage跨域
6、 跨域资源共享（CORS）
7、 nginx代理跨域
8、 nodejs中间件代理跨域
9、 WebSocket协议跨域

 

一、 通过jsonp跨域

通常为了减轻web服务器的负载，我们把js、css，img等静态资源分离到另一台独立域名的服务器上，在html页面中再通过相应的标签从不同域名下加载静态资源，而被浏览器允许，基于此原理，我们可以通过动态创建script，再请求一个带参网址实现跨域通信。

1.）原生实现：

 <script>
    var script = document.createElement(‘script‘);
    script.type = ‘text/javascript‘;

    // 传参并指定回调执行函数为onBack
    script.src = ‘http://www.domain2.com:8080/login?user=admin&callback=onBack‘;
    document.head.appendChild(script);

    // 回调执行函数
    function onBack(res) {
        alert(JSON.stringify(res));
    }
 </script>

服务端返回如下（返回时即执行全局函数）：

onBack({"status": true, "user": "admin"})

2.）jquery ajax：

$.ajax({
    url: ‘http://www.domain2.com:8080/login‘,
    type: ‘get‘,
    dataType: ‘jsonp‘,  // 请求方式为jsonp
    jsonpCallback: "onBack",    // 自定义回调函数名
    data: {}
});

3.）vue.js：

this.$http.jsonp(‘http://www.domain2.com:8080/login‘, {
    params: {},
    jsonp: ‘onBack‘
}).then((res) => {
    console.log(res); 
})

后端node.js代码示例：

var querystring = require(‘querystring‘);
var http = require(‘http‘);
var server = http.createServer();

server.on(‘request‘, function(req, res) {
    var params = qs.parse(req.url.split(‘?‘)[1]);
    var fn = params.callback;

    // jsonp返回设置
    res.writeHead(200, { ‘Content-Type‘: ‘text/javascript‘ });
    res.write(fn + ‘(‘ + JSON.stringify(params) + ‘)‘);

    res.end();
});

server.listen(‘8080‘);
console.log(‘Server is running at port 8080...‘);

jsonp缺点：只能实现get一种请求。

 

跨域资源共享（CORS）

普通跨域请求：只服务端设置Access-Control-Allow-Origin即可，前端无须设置，若要带cookie请求：前后端都需要设置。

需注意的是：由于同源策略的限制，所读取的cookie为跨域请求接口所在域的cookie，而非当前页。如果想实现当前页cookie的写入，可参考下文：七、nginx反向代理中设置proxy_cookie_domain 和 八、NodeJs中间件代理中cookieDomainRewrite参数的设置。

目前，所有浏览器都支持该功能(IE8+：IE8/9需要使用XDomainRequest对象来支持CORS）)，CORS也已经成为主流的跨域解决方案。

1、 前端设置：

1.）原生ajax

// 前端设置是否带cookie
xhr.withCredentials = true;

示例代码：

var xhr = new XMLHttpRequest(); // IE8/9需用window.XDomainRequest兼容

// 前端设置是否带cookie
xhr.withCredentials = true;

xhr.open(‘post‘, ‘http://www.domain2.com:8080/login‘, true);
xhr.setRequestHeader(‘Content-Type‘, ‘application/x-www-form-urlencoded‘);
xhr.send(‘user=admin‘);

xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        alert(xhr.responseText);
    }
};

2.）jQuery ajax

$.ajax({
    ...
   xhrFields: {
       withCredentials: true    // 前端设置是否带cookie
   },
   crossDomain: true,   // 会让请求头中包含跨域的额外信息，但不会含cookie
    ...
});

3.）vue框架
在vue-resource封装的ajax组件中加入以下代码：

Vue.http.options.credentials = true

2、 服务端设置：

若后端设置成功，前端浏览器控制台则不会出现跨域报错信息，反之，说明没设成功。

1.）Java后台：

/*
 * 导入包：import javax.servlet.http.HttpServletResponse;
 * 接口参数中定义：HttpServletResponse response
 */
response.setHeader("Access-Control-Allow-Origin", "http://www.domain1.com");  // 若有端口需写全（协议+域名+端口）
response.setHeader("Access-Control-Allow-Credentials", "true");

2.）Nodejs后台示例：

 

var http = require(‘http‘);
var server = http.createServer();
var qs = require(‘querystring‘);

server.on(‘request‘, function(req, res) {
    var postData = ‘‘;

    // 数据块接收中
    req.addListener(‘data‘, function(chunk) {
        postData += chunk;
    });

    // 数据接收完毕
    req.addListener(‘end‘, function() {
        postData = qs.parse(postData);

        // 跨域后台设置
        res.writeHead(200, {
            ‘Access-Control-Allow-Credentials‘: ‘true‘,     // 后端允许发送Cookie
            ‘Access-Control-Allow-Origin‘: ‘http://www.domain1.com‘,    // 允许访问的域（协议+域名+端口）
            ‘Set-Cookie‘: ‘l=a123456;Path=/;Domain=www.domain2.com;HttpOnly‘   // HttpOnly:脚本无法读取cookie
        });

        res.write(JSON.stringify(postData));
        res.end();

    });
});

server.listen(‘8080‘);
console.log(‘Server is running at port 8080...‘);