【前端】浏览器跨域同源策略

背景

最近有个全站迁移https的项目，设计十几个页面，起初只改了4行代码。作为一个前端测试门外汉，看到只有4行改动，便单纯的认为这个项目是不需要测试的，毕竟只有4行，研发同学自己评估一下直接上线不就行了嘛，直到研发同学问我：你懂http和https的区别吗？知道什么是跨域不？知道这个项目如果出问题会带来怎样的后果不？带着这些问题，我去详细的了解了一下，然后老实的开始了测试。

一、先说结论

因为浏览器的同源策略会限制页面不能拿到跨域请求的返回值，所以在迁移https时，需要注意所有页面的ajax请求，静态资源，提交等不能出现跨域，避免页面出现无响应或超时的问题。

二、再说原理

1.什么是跨域

页面在当前域下请求另一个域的资源时，为跨域请求；既同协议、同域名、同端口为同一个域，三个当中有任何一个不同，都是不同域。

（下表来源：http://www.cnblogs.com/rainman/archive/2011/02/20/1959325.html）

URL说明是否允许通信http://www.a.com/a.js
http://www.a.com/b.js同一域名下允许http://www.a.com/lab/a.js
http://www.a.com/script/b.js同一域名下不同文件夹允许http://www.a.com:8000/a.js
http://www.a.com/b.js同一域名，不同端口不允许http://www.a.com/a.js
https://www.a.com/b.js同一域名，不同协议不允许http://www.a.com/a.js
http://70.32.92.74/b.js域名和域名对应ip不允许http://www.a.com/a.js
http://script.a.com/b.js主域相同，子域不同不允许http://www.a.com/a.js
http://a.com/b.js同一域名，不同二级域名（同上）不允许（cookie这种情况下也不允许访问）http://www.cnblogs.com/a.js
http://www.a.com/b.js不同域名不允许

2.什么是同源策略

浏览器出于安全考虑，禁止页面获取跨域请求的返回值，这个策略就是浏览器的同源策略。

三、聊聊原因

1.为什么浏览器会有同源策略

从一个案例讲起

先看一下，有同源策略时，网站通常是怎么处理的：在百度首页登录时，实际是在passport.baidu.com域下完成了全部登录流程，并将登录结果的错误码回写到www.baidu.com域，以此通知登录成功并完成后续跳转。但是假设这样一个场景：www.baidu.com的登录页面弹出的是一个某银行网站的登录窗，银行的网站明显和www.baidu.com是不同域的，用户在不经意间输入了自己的用户名密码，并完成了提交。如果没有同源策略，www.baidu.com就可以直接获取用户的登录信息，包含用户名密码等，这是非常危险的。

此外，同源策略还会阻止跨域读取和提交cookie，这里就不举例了，很明显也是因为安全考虑。

所以，同源策略本质上是一个防止网站被恶意使用，保护用户信息的策略。

四、关于测试

了解了同源和跨域的含义，测试其实就相对容易了。网站迁移到https，需要注意前端的所有请求，主要是写在js中的请求，都必须是同域。第二个，因为有服务端返回url供前端请求的场景存在，这时就需要测试特别注意项目中的这一类url，要保证所有前端用来请求的url都是同域的，一旦跨域，将直接导致服务不可用等严重后果。特别强调一下，这类项目有页面自动化就最好了，全量回归就OK了。