通过Nginx设置HttpOnly Secure SameSite参数解决Cookie跨域丢失

在前面的文章中“谷歌浏览器Chrome 80版本默认SameSite导致跨域请求Cookie丢失”，我们知道 Chrome 升级到80版本后，默认限制了跨域携带cookie给后端。我们也提到了可以修改Chrome的设置或在服务端添加SameSite设置来解决，但是普通的Web框架需要升级到最新版本才支持SameSite属性，升级Web框架成本太高，因此本文使用Nginx来解决SameSite问题的办法（需要使用Nginx反向代理站点）。

一、Cookie安全相关属性

HttpOnly ：

在Cookie中设置了“HttpOnly”属性，通过程序(JS脚本、Applet等)将无法读取到Cookie信息。

将HttpOnly 设置为true 防止程序获取cookie后进行攻击。

Secure ：

安全性，指定Cookie是否只能通过https协议访问，一般的Cookie使用HTTP协议既可访问。

设置了Secure （没有值），则只有当使用https协议连接时cookie才可以被页面访问。可用于防止信息在传递的过程中被监听捕获后信息泄漏。

SameSite：

Chrome浏览器在51版本后为 Cookie 新增的属性，用来防止 CSRF 攻击和用户追踪。可以设置三个值：Strict、 Lax、 None

Strict：完全禁止第三方 Cookie，跨站点时，任何情况下都不会发送 Cookie。换言之，只有当前网页的 URL 与请求目标一致，才会带上 Cookie。Set-Cookie: CookieName=CookieValue; SameSite=Strict;

Lax：规则稍稍放宽，大多数情况也是不发送第三方 Cookie，但是导航到目标网址的 Get 请求除外。Set-Cookie: CookieName=CookieValue; SameSite=Lax；设置了Strict或Lax以后，基本就杜绝了 CSRF 攻击。当然，前提是用户浏览器支持 SameSite 属性。

None：Chrome 计划将Lax变为默认设置。这时，网站可以选择显式关闭SameSite属性，将其设为None。不过，前提是必须同时设置Secure属性（Cookie 只能通过 HTTPS 协议发送），否则无效。Set-Cookie: key=value; SameSite=None; Secure

二、配置路径

要通过nginx配置SameSite，可以在 nginx.conf 的 location 节点下进行配置：

proxy_cookie_path/"/;httponly;secure;SameSite=Lax";

配置示例：

server {
    listen 443 ssl http2;
    server_name www.demo.com;
ssl_certificate /etc/letsencrypt/live/cat73.org/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/cat73.org/privkey.pem;
    ssl_trusted_certificate /etc/letsencrypt/live/cat73.org/chain.pem;
# add_header X-XSS-Protection "1; mode=block";
    # add_header X-Frame-Options SAMEORIGIN;
    add_header Strict-Transport-Security "max-age=15768000";
location / {
        root /var/www/html;
}
    
    location /api {
        proxy_pass http://localhost;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
# 配置位置如下
        proxy_cookie_path / "/; httponly; secure; SameSite=None";
}
}