如何使用 react.js 设置 SameSite-None答案

【问题标题】：How to set SameSite-None with react.js如何使用 react.js 设置 SameSite-None
【发布时间】：2019-11-03 04:14:24
【问题描述】：

我正在使用 react.js，我正在尝试将 lucky orange 集成到我的网络应用程序中。我在 index.html 文件的 head 标签中添加了代码 sn-p，但我收到一条警告：

与http://luckyorange.net/ 处的跨站点资源关联的cookie 设置为没有SameSite 属性。未来版本的 Chrome 将仅通过设置为 SameSite=None 和 Secure 的跨站点请求传递 cookie。

此外，当测试查看whether lucky orange is working or not 时，它会在“查看页面源”中搜索术语“lo_site_id”。我这样做了，但没有任何反应。我是不是设置错了？

问题

如何正确设置 SameSite=None 和安全，为什么我看不到 lo_site_id？（我没有使用节点。这只是前端）

【问题讨论】：

看起来你已经发布了两次相同的问题：stackoverflow.com/q/58686839/3020057 我可能会关闭这个并在另一个上添加额外的信息/标签。
SameSite Cookie Attribute Warning Isn't getting fixed的可能重复
一个同站点cookie应该由后端添加。您碰巧看到错误，因为您使用的是 chrome。在 Firefox 或 safari 上，您不会看到。 Lucky Orange 应为此目的更新其 cookie。它看起来像一个跟踪功能或其他东西。

标签： reactjs

【解决方案1】：

我遇到了同样的问题，并通过稍微更改 cookie 创建来解决：

const cookies = new Cookies();
cookies.set(key1, value1, {secure: true, sameSite: 'none'});
cookies.set(key2, value2, {secure: true, sameSite: 'none'});

所以添加了最后一个参数，设置 cookie 选项。

我的应用使用了universal-cookie 包，你可以在这里找到文档：https://www.npmjs.com/package/universal-cookie

我不知道lucky-orange应用，如果它设置cookie，你可能需要调整那个嵌入式应用的代码。

顺便说一句。 Chrome/Edge(90) 现在抛出错误（即不会保存不正确的 cookie），而 Firefox(88) 没有那么严格，只记录一个警告。

【讨论】：