时间戳

首页 > 解决方案 > 当我的应用程序在 iframe 中时，如何在我的域中设置一个 cookie，以便我可以在客户端打开我的应用程序时访问它抛出我的域？

javascript - 当我的应用程序在 iframe 中时，如何在我的域中设置一个 cookie，以便我可以在客户端打开我的应用程序时访问它抛出我的域？

问题描述

我有一个托管在域上的 Angular 应用程序"ourDomain"，它将位于托管在"clientDomain".

我正在尝试在我的域中设置一个 cookie，但我收到以下警告，阻止将 cookie 保存在浏览器控制台中：

在“ourDomain”中设置了与跨站点资源关联的 cookie，但未设置该SameSite属性。SameSite=None它已被阻止，因为 Chrome 现在仅在使用和设置时才提供带有跨站点请求的 cookie Secure。

我尝试使用此库 https://www.npmjs.com/package/ngx-cookie-service设置 cookie ，并在设置 cookie 时设置域名，如下所示：

cookieService.set('key', 'value', 2, '/', 'ourDomain', true, 'Lax');

我还尝试使用包含的标头对我的 spring API 进行 REST 调用{withCredentials: true}

并且响应头包含

Cookie cookie = new Cookie("username", req.getHeader("Origin"));
cookie.setMaxAge(2 * 24 * 60 * 60); // expires in 2 days
cookie.setSecure(true);
cookie.setPath("/");
cookie.setHttpOnly(true);
cookie.setDomain("dev.siliconexpert.com");
response.addCookie(cookie);
response.setHeader("Access-Control-Allow-Origin", "ourDomain");
response.setHeader("Access-Control-Allow-Methods", "POST");
response.setHeader("Access-Control-Allow-Credentials", "true");

但不幸的是，我仍然收到同样的警告。

那么我的解决方案有问题吗？或者，是否有另一种解决方案来完成这项工作？

标签： javascriptangularspring

解决方案

如果您的站点在iframe不同站点上运行，则意味着其所有 cookie 都在第三方或跨站点上下文中。因此，随着 Chrome、Firefox 和 Edge 即将发生的变化，这些 cookie 将需要标记为SameSite=None; Secure.

该ngx-cookie-service库不支持新None值，目前正在寻找新的维护者，因此不太可能很快更新。但是，查看您提供的服务器端代码，这看起来是另外一回事。

要么使用您的服务器端库添加Secure属性和SameSite带有None值的属性，要么使用SetHeader()方法自己编写Set-Cookie标头。

您可以在https://web.dev/samesite-cookies-explained找到更多上下文，并在https://github.com/GoogleChromeLabs/samesite-examples上找到一些示例

推荐阅读