咨询：Secure设置为何会阻止Cookie在部分浏览器中被设置？

• 刚接触Cookie相关技术，排查用户点击Cookie接受按钮后警告仍持续弹出的问题时，发现部分Webkit内核浏览器（偶现于Firefox）中Cookie未被成功设置。
• 移除Cookie字符串中的Secure设置后功能恢复正常，不清楚该设置导致Cookie无法设置的原因，求解答。

参考代码：

acceptCookies() {
        let expiry = new Date();
        let months = 1;
        let d = expiry.getDate();
        expiry.setMonth( expiry.getMonth() + months );
        if ( expiry.getDate() !== d ) {
            expiry.setDate( 0 );
        }

        document.cookie = 'acceptsCookies=1 expires=' + expiry.toUTCString() + '; SameSite=lax; Secure';
    }

原因分析 #

• Secure属性的核心要求是：Cookie只能通过HTTPS协议传输到服务器，如果当前页面是通过HTTP协议加载的，浏览器会直接拒绝设置带有Secure属性的Cookie。
• Webkit内核浏览器（如Chrome、Safari）对这个属性的校验更为严格，哪怕是本地开发的localhost环境，部分版本也会要求HTTPS才能设置Secure Cookie；Firefox偶现的情况，大概率是因为某些场景下HTTP连接被浏览器判定为不安全，触发了相同的限制。
• 你移除Secure后Cookie能正常生效，说明你的页面运行环境是HTTP协议（比如本地开发用HTTP服务，或者生产环境未配置HTTPS）。

解决建议 #

• 若生产环境已配置HTTPS，确认页面是否通过HTTPS访问，避免混合内容（HTTPS页面嵌入HTTP资源）导致的Cookie设置失败。
• 本地开发时，可以暂时去掉Secure属性，或者配置本地HTTPS环境（比如用mkcert生成自签名证书）。
• 推荐通过判断当前页面协议动态添加Secure属性，适配HTTP和HTTPS环境，示例代码：

acceptCookies() {
        let expiry = new Date();
        let months = 1;
        let d = expiry.getDate();
        expiry.setMonth( expiry.getMonth() + months );
        if ( expiry.getDate() !== d ) {
            expiry.setDate( 0 );
        }

        const secureFlag = window.location.protocol === 'https:' ? '; Secure' : '';
        document.cookie = `acceptsCookies=1 expires=${expiry.toUTCString()}; SameSite=lax${secureFlag}`;
    }

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