网易考拉：表单可以跨域吗 （一面） about fe9-interview HOT 8 OPEN

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就能用来限制这种情况

from fe9-interview.

答案：

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跨域，会具体造成什么问题。

from fe9-interview.

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

from fe9-interview.

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

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

from fe9-interview.

@eightHundreds 确实，你说的对

from fe9-interview.

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

from fe9-interview.

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

不懂瞎bb

from fe9-interview.

withCredentials

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

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

from fe9-interview.