在localhost的情况下如何克服chrome的samesite cookie更新的影响？答案

【问题标题】：How to overcome the effect of chrome's samesite cookie update in the case of localhost?在localhost的情况下如何克服chrome的samesite cookie更新的影响？
【发布时间】：2022-01-09 15:58:57
【问题描述】：

我有一个网站需要从另一个网站进行身份验证才能登录。两者是不同的域。

默认情况下，我已启用来自 chrome://flags 的相同站点 cookie 标志。就是来看看我网站上chrome的新更新效果如何。

它在我部署的站点中运行良好。但是当我尝试在我的本地主机中运行相同的内容时，我无法登录。我丢失了第三方 cookie。

如果有人解释原因，那就太好了。

【问题讨论】：

标签： google-chrome security cookies localhost samesite

【解决方案1】：

不幸的是，所有带有SameSite=None 的cookie 也必须有一个Secure 参数。由于您不太可能在开发服务器上运行 HTTPS，这意味着您的 cookie 将无法工作，因为 cookie 不是通过 HTTPS 发送的。

我目前知道的唯一解决方法是检查您的环境，并将 cookie 设置为 SameSite=Lax 用于您的开发环境，并设置为 SameSite=None; Secure 用于生产。

在 Express 中，您可以使用 secure 参数来检查您是否在 HTTPS 上运行，然后将您的 cookie 设置如下：

const {secure} = req;
res.cookie('key', 'contents', {
  secure,
  httpOnly: true,
  sameSite: secure ? 'None' : 'Lax',
});

【讨论】：

【解决方案2】：

如您所知，对于跨站点 cookie，我们必须指定属性 SameSite=None 和 Secure。假设您的本地主机上没有 SSL 证书，它停止工作的原因是只有通过 HTTPS 发送的 cookie 可能使用 Secure 属性。

【讨论】：

【解决方案3】：

我遇到了这个问题，没有简单的方法可以解决这个问题，除非我使用使用 SameSite: None 的 API 时必须使用 HTTPS。

于是我创建了a software 来解决这个问题。

npx secure-localhost 3000

这会将所有https://localhost 请求代理到http://localhost:3000。请注意，此软件会自动在当前用户级别的 Windows 上生成并安装自签名证书（目前仅适用于 Windows）。

【讨论】：

【解决方案4】：

您可以创建并使用反向代理来解决此问题。

创建一个文件夹并创建一个名为

的文件

nginx.conf

server {
    listen       8080;
    server_name  yourapp-gateway-service api.yourapp.co;
    
    error_page  404              /404.html;
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

    location / {
        proxy_pass https://api.yourapp.com/;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Scheme $scheme;
        proxy_ssl_server_name on;
        client_max_body_size 50M;
    }
}

创建一个泊坞窗图像

Dockerfile

FROM nginx:1.17
ADD nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 8080
ENTRYPOINT ["nginx", "-g", "daemon off;"]

您现在可以构建容器并将其推送到注册表，或者直接使用它。我使用 gitlab，我的 gitlab-ci.yaml 看起来像这样

image: docker:latest
services:
  - docker:dind

stages:
- package

variables:
  DOCKER_DRIVER: overlay
  CONTAINER_IMAGE: registry.gitlab.com/MYGROUP/projects/MYPROJECT-gateway:${CI_COMMIT_SHORT_SHA}
  CONTAINER_IMAGE_LATEST: registry.gitlab.com/MYGROUP/projects/MYPROJECT-gateway:LATEST

docker-build:
  stage: package
  script:
    - docker build -t ${CONTAINER_IMAGE} .
    - docker login -u gitlab-ci-token -p $CI_BUILD_TOKEN registry.gitlab.com
    - docker tag ${CONTAINER_IMAGE} ${CONTAINER_IMAGE}
    - docker tag ${CONTAINER_IMAGE} ${CONTAINER_IMAGE_LATEST}
    - docker push ${CONTAINER_IMAGE}
    - docker push ${CONTAINER_IMAGE_LATEST}

【讨论】：