V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
86co
V2EX  ›  前端开发

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

  •  
  •   86co · 2020-03-31 10:09:54 +08:00 · 1760 次点击
    这是一个创建于 1683 天前的主题,其中的信息可能已经有所发展或是发生改变。

    作者:杨彩清(追求极致,热爱技术和生活的 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 可以配置的参数,包括 cachecredentialsheaders等等,重点用到的参数是 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==

    目前尚无回复
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5318 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 32ms · UTC 09:09 · PVG 17:09 · LAX 01:09 · JFK 04:09
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.