frontend9 / fe9-interview

前端九部 - 面试题库

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

网易考拉:表单可以跨域吗 (一面)

acodercc opened this issue · comments

commented

这是一个示例模板,请大家遵照这个issue的格式来提交面试题(直接使用issue的面试题模板即可生成以下格式)

To:
https://github.com/acodercc

面试公司:
网易考拉

面试环节:
一面

问题:
表单可以跨域吗

commented

答案:

form表单是可以跨域的。

浏览器遵从同源策略,限制ajax跨域的原因在于ajax网络请求是可以携带cookie的(通过设置withCredentials为true),比如用户打开了浏览器,登录了weibo.com,然后又打开了百度首页,这时候百度首页内的js,向weibo.com用withCredentials为true的ajax方式提交一个post请求,是会携带浏览器和weibo.com之间的cookie的,所以浏览器就默认禁止了ajax跨域,服务端必须设置CORS才可以。

而form提交是不会携带cookie的,你也没办法设置一个hidden的表单项,然后通过js拿到其他domain的cookie,因为cookie是基于域的,无法访问其他域的cookie,所以浏览器认为form提交到某个域,是无法利用浏览器和这个域之间建立的cookie和cookie中的session的,故而,浏览器没有限制表单提交的跨域问题。

解答思路:
面试官应该不是只想问form表单能否跨域,而是想要考量我是否理解浏览器为什么禁止ajax跨域,又为什么允许form表单来跨域。

进而涉及到,浏览器为什么禁止跨域,如果不禁止跨域会有什么问题,等一系列的问题。

所以回答时,要说清楚form表单为什么允许跨域,浏览器如果不遵守同源策略也允许ajax跨域,会具体造成什么问题。

@zWingz 技术问题不要什么什么的吧,你实践试一下不就知道了,不要在这误导别人。我试了不会带cookie

form表单确实是会带cookie的

假设在a.com下,表单提交到baidu.com, 请求会带上baidu.com的cookie。 但不会带上a.com的cookie

<form action="baidu.com"></form>

我认为的原因是, 同源策略主要是限制js行为,form表单提交的结果js是无法拿到,所以没有去限制.
当然不限制也是有漏洞了,csrf攻击就能利用form表单能带cookie的特点. 而cookie的新属性SameSite就能用来限制这种情况

@eightHundreds 确实,你说的对

commented

是的,能传到后台。 ajax请求会读取返回内容,form表单提交不会。 所以ajax做了同源限制,form表单提交没有

额,事实上,在HTTP的时候,withCredentials并不能携带跨域cookie。

跨域携带cookie,需要同时满足3个前提:
1、服务端允许跨域(Access-Control-Allow-Origin、Access-Control-Allow-Credentials);
2、客户端声明跨域(withCredentials=true / credentials=include);
3、协议为https。

@zWingz 技术问题不要什么什么的吧,你实践试一下不就知道了,不要在这误导别人。我试了不会带cookie

不懂瞎bb

withCredentials

哪里看到的资料显示withCredentials必须配合https使用的,我想学习一下?

目前看到的资料和自己代码都是http就可以,不知道你是从哪看见的资料我想考证一下,谢谢