题目1: 什么是同源策略
所谓"同源"指的是"三个相同"。协议相同、域名相同、端口相同。
同源政策的目的,是为了保证用户信息的安全,防止恶意的网站窃取数据。
设想这样一种情况:A网站是一家银行,用户登录以后,又去浏览其他网站。如果其他网站可以读取A网站的 Cookie,会发生什么?
很显然,如果 Cookie 包含隐私(比如存款总额),这些信息就会泄漏。更可怕的是,Cookie 往往用来保存用户的登录状态,如果用户没有退出登录,其他网站就可以冒充用户,为所欲为。因为浏览器同时还规定,提交表单不受同源政策的限制。
由此可见,"同源政策"是必需的,否则 Cookie 可以共享,互联网就毫无安全可言了。
随着互联网的发展,"同源政策"越来越严格。目前,如果非同源,共有三种行为受到限制。
(1) Cookie、LocalStorage 和 IndexDB 无法读取。
(2) DOM 无法获得。
(3) AJAX 请求不能发送。
题目2: 什么是跨域?跨域有几种实现形式
跨域:从一个页面去请求读或者写另一个页面的资源,突破同源策略的限制。
跨域的几种方式:
- 主域名相同,子域不同的,如:child.a.html和a.html可通过设置document.domain = a.html达到降域的目的,实现跨域访问。问题:
1、安全性,当一个站点(b.a.com)被攻击后,另一个站点(c.a.com)会引起安全漏洞。
2、如果一个页面中引入多个iframe,要想能够操作所有iframe,必须都得设置相同domain。 - JSONP(json with padding),只支持get请求,无法判断请求是否失败(不会返回各种HTTP状态码),安全性不高,假如提供jsonp的服务存在页面注入漏洞,那么所有调用这个jsonp的网站都会存在漏洞。但它的兼容性很好,在许多老版本浏览器上都可以运行,不想XMLHttpRequest对象实现的Ajax请求那样收到同源策略的限制。
- CORS (cross-origin-resource-sharing)
- html5中新规定的window.postMessage来实现跨域。
题目3: JSONP 的原理是什么
原理是利用script标签的可跨域性,在网页中动态的创建,并添加script标签,请求需要访问的页面资源的url,服务器将数据放在一个知道指定名字的回调函数给传回来,由于网页已经定义的该函数,参数被返回后,便会立即执行。
题目4: CORS是什么
CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing)。它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源使用的限制。CORS需要浏览器和服务器同时支持。目前,所有浏览器都支持该功能,IE浏览器不能低于IE10。整个CORS通信过程,都是浏览器自动完成,不需要用户参与。对于开发者来说,CORS通信与同源的AJAX通信没有差别,代码完全一样。浏览器一旦发现AJAX请求跨源,就会自动添加一些附加的头信息,有时还会多出一次附加的请求,但用户不会有感觉。因此,实现CORS通信的关键是服务器。只要服务器实现了CORS接口,就可以跨源通信。CORS与JSONP的使用目的相同,但是比JSONP更强大。JSONP只支持GET请求,CORS支持所有类型的HTTP请求。JSONP的优势在于支持老式浏览器,以及可以向不支持CORS的网站请求数据。
题目5: 根据视频里的讲解演示三种以上跨域的解决方式
- 更改host文件
- 使用JSONP解决跨域
前端html中写入JavaScript:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Task31</title>
</head>
<body>
<h3>JSONP跨域</h3>
<script>
window.jsonpFunction = function(data){
console.log(data);
}
var script = document.createElement('script');
script.src = "//b.com/Ajax/advance13/advance13.php?callback=jsonpFunction";
document.body.appendChild(script);
</script>
</body>
</html>
后端php
$message = "检测接收";
jsonpFunction($message);
- 使用CORS跨域
前端html中写入JavaScript:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Task31</title>
</head>
<body>
<h1>演示跨域</h1>
<script src="jquery-1.11.1.js"></script>
<script>
$.ajax({
type: 'get',
url: '//b.com/Ajax/advance13/advance13.php',
dataType: 'text',
success: function (data) {
console.log(data);
},
error: function () {
console.log('error');
}
});
</script>
</body>
</html>
- 后端php
header("Access-Control-Allow-Origin: http://a.com");
$message = "检测接收";
echo $message;
- postmessage跨域
在HTML5中新增了postMessage方法,postMessage可以实现跨文档消息传输(Cross Document Messaging),Internet Explorer 8, Firefox 3, Opera 9, Chrome 3和 Safari 4都支持postMessage。
该方法可以通过绑定window的message事件来监听发送跨文档消息传输内容。
使用postMessage实现跨域的话原理就类似于jsonp,动态插入iframe标签,再从iframe里面拿回数据
,作跨页面通信更加适合.