非localhost环境下ngx-cookie-service设置带secure属性Cookie失败如何解决

核心原因 #

• 浏览器对标记了Secure属性的Cookie有强制规范约束：仅当站点通过HTTPS协议访问时，才允许设置、存储和携带这类Cookie。
• localhost是浏览器为了方便本地开发特意设置的唯一豁免场景，即使走HTTP协议也允许设置Secure Cookie，这就是你本地访问正常、但IP访问HTTP站点失效的本质原因。
• 浏览器静默丢弃不符合规范的Cookie设置，不会抛出明确报错，所以你看不到相关警告信息。

可行解决方案 #

• 方案1：给测试服务器的IP站点配置HTTPS协议（可以使用内网可信证书、自签证书），只要访问地址协议变为https://<server_ip>:<port_number>，Secure属性的Cookie就能正常设置。
• 方案2：代码中增加环境判断，仅在生产HTTPS环境开启secure参数，测试HTTP环境临时关闭secure，满足安全要求的同时不影响测试流程，示例代码调整如下：

// 根据当前环境是否为HTTPS决定是否开启secure
const isHttps = window.location.protocol === 'https:';
this.cookieService.set("cookieName", "value", null, "/", null, isHttps, "Lax");

额外说明 #

你之前调整SameSite、Domain配置不生效，是因为问题根因和这两个配置无关，没有满足HTTPS的前提条件下，其他配置调整都不会让Secure Cookie在HTTP站点生效。

内容的提问来源于stack exchange，提问作者Caio Tsubake