跨域红色报警再见 & 你需要了解的 SameSite Cookie 策略

[86co]

作者：杨彩清（追求极致，热爱技术和生活的 95 后）

本文讲述如何使用 fetch 下的 request 方法的 mode 属性值 no-cors 消除本地开发过程中跨域的错误提示，以及开发中遇到的 SameSite Cookie 问题及其解决方法。

Fetch . Request

使用 fetch 下的 request 方法支持的 mode 属性值 no-cors 消除本地开发过程中跨域的错误提示。

遇到的问题

A 系统是以嵌入 JS 脚本的方式在 B 系统下工作的。A 系统的埋点需要设置一些和个人信息有关的公共字段，这些字段需要通过访问 B 系统的后端接口拿到，而本地开发调试的过程中域名为 localhost，导致调试过程中存在跨域的问题，控制台一直有红色 Error 。

解决思路

1. 使用 webpackdevServer 代理

通过 http-proxy 代理请求。

问题：

• 需要增加额外的 webpackdevServer 的配置，其他的代理都针对有相对固定路径的 api，代理到 mock 调试地址或者测试环境地址。单独的为个别接口增加代理设置不算是一个好的解决方案，可扩展性也不好。

• 并且 webpackdevServer 代理到 B 系统过程还会重定向到登录页

2. 区分开发线上环境来执行请求

if (isDev) {
  //不执行埋点的请求
} else {
  // 执行请求
}

问题：

• 发布到 B-test 测试环境时，还是会有跨域到 B 后端接口的报错

• 不过本地开发看不到红色错误警告了，相对而言可接受

3. 使用 Request 的 mode 参数控制跨域的处理

禁掉跨域的请求，只在同域的情况下发请求。

知识点

Request 是 fetch 下的一个 api，一般很少会显式的用到

// 一般情况下使用 fetch
fetch('url', {
    //config 
}).then...

// 使用 request 的情况下使用 fetch
const request = new Request('url', {
    //config
})
fetch(request)...

Request 下有一些参数，也就是上面代码块的 config 可以配置的参数，包括 cache、 credentials、headers等等，重点用到的参数是 mode。

mode: {'same-origin', 'no-cors', 'cors', ...} 设置跨域请求响应是否有效

1. same-origin 要求必须同源，否则抛出错误, network 没有请求发出

2. cors 允许跨域请求发出，响应是否可用依赖服务端设置，network 有请求发出

3. no-cors 跨域请求不会发送，无法读取 response，network 没有请求发出

浏览器兼容性：chrome 浏览器基本都支持，其他浏览器可参考: https://developer.mozilla.org/en-US/docs/Web/API/Request

你需要了解的 SameSite Cookie 策略

Chrome 80 在 2020 年 2 月后把 cookie 的 same-site 属性默认设置从 None 改为 Lax，对一些系统之间需要相互嵌入且需要同步 cookie 的场景造成了影响；短期的办法可以通过更改浏览器设置来处理。

SameSite Cookie

1. SameSite = None

允许 cross-site 的 Request 携带 3rd-party Cookie，这样在 C 系统嵌入(例如使用 iframe)其他 D 系统的页面，登录后可以正常访问把 cookie 带到对 D 的 request 上，可以正常访问。

2. SameSite = Lax

不允许 cross-site 的 Request 携带 3rd-party Cookie，这样导致无法在 C 系统直接访问内嵌的 D 系统；但是通过 a，link 等顶层的链接是可以携带 3rd-party Cookie 的。

3. SameSite = strict

不允许 cross-site 的 Request 携带 3rd-party Cookie ；通过 a, link 等顶层链接也无法携带 Cookie

问题背景

1. C 系统内有一些 iframe 内嵌了 D 系统（一款在线文档编辑系统）的文档，最近有个别用户反馈在 C 里没有权限查看内嵌的文档，一直跳转到 D 系统的登录页面，重复登录也不管用，点击链接跳转到浏览器打开才能正常使用。

2. 排查过程中发现控制台有相关报警

解决方法

短期：chrome 设置中关闭把默认的 cookie 的 sameSite 设置为 lax 的设置

长期：前后端完成对 cookie 的改造，显示的声明会在 cross-site 场景使用到的 cookie 的 SameSite 属性值。

参考链接：

1. https://developer.mozilla.org/en-US/docs/Web/API/Request
2. 介绍 sameSite 属性的文章

字节跳动商业化前端团队招人啦！可以每日与技术网红畅谈理想、参加技术大牛交流分享、享受一日四餐、顶级极客装备、免费健身房，与优秀的人做有挑战的事情，这种地方哪里找？快来加入我们吧！

简历投递(base64ed)：eWFuZ2NhaXFpbmdAYnl0ZWRhbmNlLmNvbQ==