背景
最近有个全站迁移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了。