必考知识（上）
【考点简介】
【例题示例】
1.1 请问什么是同源策略？
【考点映射】
-
浏览器的同源策略
【频率】★★★★★（前端岗必考题）
【难度】☆
【参考答案】
源：就是协议、域名和端口号
同源策略：SOP（Same origin policy）是由Netscape公司1995年引入浏览器的一种约定，是浏览器最核心、最基本的安全功能，若缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同，若两个URL的协议、域名、端口号都相同，则两者为同源，有一个不同则非同源，即便两个不同的域名指向同一个ip地址，也是非同源的
非同源的URL在没有明确授权的情况下，不能读写对方资源（不能相互通信）
举一些实际例子，判断各URL是否符合同源策略：
|
URL |
是否同源 |
是否允许通信 |
|
|
同源，不同文件或路径 |
允许 |
|
|
||
|
|
非同源，不同端口 |
不允许 |
|
|
||
|
|
非同源，不同协议 |
不允许 |
|
|
||
|
|
非同源，不同域名 |
不允许 |
|
http://192.168.4.12/b.js |
||
|
|
非同源，不同域名 |
不允许 |
|
|
||
|
|
||
|
|
非同源，不同域名 |
不允许
|
|
|
同源策略将限制以下几种行为：
（1）Cookie、LocalStorage 和 IndexDB 无法读取
（2）DOM 和 Js对象无法获得
（3）AJAX 请求不能发送
以下两种不受同源策略的限制：
（1）页面中的链接，重定向以及表单提交是不会受到同源策略限制
（2）跨域资源的引入，但是js不能读写加载的内容，如嵌入到页面中的<script src="..."></script>，<img>，<link>，<iframe>等
注意：
同源策略是浏览器做的限制，对服务器与服务器之间的通信不做限制
当A与B非同源时，从域名A下的一个页面获取域名B下的一个资源，是不被浏览器允许的， 浏览器还是会发出这个请求，但是它会拦截响应内容（因为非同源，不安全）（请求是页面发出的，页面在浏览器中显示，故发出的请求是通过浏览器代为执行）
1.2 请问什么是跨域？有哪些常用的跨域方式？
【考点映射】
-
常见跨域方式
【频率】★★★★★（前端岗必考题）
【难度】☆☆
【参考答案】
受浏览器同源策略的限制，非同源的两个URL间不能通信，非同源的脚本不能操作其他源下面的对象，但在实际开发场景中， 这种情况经常出现， 此时需要通过跨域进行非同源通信
常见跨域解决方式：
（1）通过jsonp跨域
注意：jsonp和json并没有什么关系
原理：利用<script>标签进行跨域 只能实现GET请求
举例：a.com/jsonp.html想得到b.com/main.js中的数据
在a.com的jsonp.html里创建一个回调函数，动态添加<script>元素，向服务器发送请求，请求地址后面加上查询字符串，通过callback参数指定回调函数的名字，请求地址为：http://b.com/main.js?callback=xxx，在main.js中调用这个回调函数xxx，并且以JSON数据形式作为参数传递，完成回调，我们来看看代码：
function addScriptTag(src) {
var script = document.createElement('script');
script.setAttribute("type","text/javascript");
script.src = src;
document.body.appendChild(script);
}
window.onload = function () {
addScriptTag('http://b.com/main.js?callback=foo');
} //window.onload是为了让页面加载完成后再执行
function foo(data) {
console.log(data.name+"欢迎您");
};
（2）nginx反向代理跨域
原理： 同源策略是浏览器的安全策略，不是HTTP协议的一部分，服务器端调用HTTP接口只是使用HTTP协议，不会执行JS脚本，不需要同源策略，也就不存在跨越问题。
实现：通过nginx配置一个代理服务器（域名与domain1相同，端口不同）做跳板机，反向代理访问domain2接口，并且可以顺便修改cookie中domain信息，方便当前域cookie写入，实现跨域登录
（3） 跨域资源共享（CORS）
普通跨域请求：只服务端设置Access-Control-Allow-Origin即可，前端无须设置
带cookie请求：前后端都需要设置。
// 前端设置是否带cookie xhr.withCredentials = true
注意：由于同源策略的限制，所读取的cookie为跨域请求接口所在域的cookie，而非当前页
（4）WebSocket协议跨域
WebSocket 是HTML5一种新的协议，实现了浏览器与服务器全双工通信，同时允许跨域通讯，是server push技术的一种很好的实现（具体原理分析详见第三章-1.1-延伸考点4）
（5）document.domain + iframe跨域
注意：仅限主域相同，子域不同的跨域应用场景
原理：两个页面都通过js强制设置document.domain为基础主域，就实现了同域
（6）location.hash + iframe
原理： a与b跨域相互通信，通过中间页c来实现， 三个页面，不同域之间利用iframe的location.hash传值，相同域之间直接js访问来通信
A域：a.html -> B域：b.html -> A域：c.html
a与b不同域只能通过hash值单向通信，b与c也不同域也只能单向通信，但c与a同域，所以c可通过parent.parent访问a页面所有对象
//a.html
<iframe id="iframe" src="http://www.domain2.com/b.html" style="display:none;"></iframe>
<script>
var iframe = document.getElementById('iframe');
// 向b.html传hash值
setTimeout(function() {
iframe.src = iframe.src + '#user=admin';
}, 1000);
// 开放给同域c.html的回调方法
剩余60%内容，订阅专栏后可继续查看/也可单篇购买
前端岗位面试求职攻略及真题解析~~
查看7道真题和解析