题目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里面拿回数据
，作跨页面通信更加适合.
网友评论