与 <URL> 处的跨站点资源关联的 cookie 在提交表单时设置为没有 `SameSite` 属性答案

【问题标题】：cookie associated with a cross-site resource at <URL> was set without the `SameSite` attribute when submitting a form与 <URL> 处的跨站点资源关联的 cookie 在提交表单时设置为没有 `SameSite` 属性
【发布时间】：2023-04-06 02:04:01
【问题描述】：

我在客户网站上有一个 worldpay 表单，如果不禁用 safari 上的防止跨站点跟踪，它将无法在 ipad 上运行。好像和跨站cookie有关。

表格如下所示：

<div class="d-none">
    <form action="https://secure.worldpay.com/wcc/purchase" target="payment-iframe" method="post" id="worldpayForm">
        <input type="hidden" id="instId" name="instId">
        <input type="hidden" id="cartId" name="cartId">
        <input type="hidden" id="amount" name="amount">
        <input type="hidden" id="currency" name="currency">
        <input type="submit" id="makePayment" value="Buy This ">
    </form>
</div>

<iframe name="payment-iframe" style="min-width: 760px; min-height: 450px; border: 0;"></iframe>

在 JavaScript 中有这样一行：

$('#worldpayForm').submit();

如果我注释掉该行，我不会收到 chrome 警告。我在某处读到，您可以添加以下内容：

response.setHeader("Set-Cookie", "HttpOnly;Secure;SameSite=Strict");

但这似乎只是在谈论向其他域发出请求。我该如何在我的情况下应用它？

【问题讨论】：

您能提供更多信息吗？您需要在 Safari 中禁用哪些选项？你知道哪个 cookie 受到影响吗？是worldpay.com 还是您的域？您可以尝试查看web.dev/samesite-cookie-recipes，看看您是否认识您的用例。
更新了我的问题并添加了解决方案

标签： javascript google-chrome safari cross-domain

【解决方案1】：

我设法解决了这个问题。是的，我确实已经有了自己的 cookie 解决方案：

export function getCookie(name) {
    var i, x, y;
    const arCookies = document.cookie.split(';');
    for (i = 0; i < arCookies.length; i++) {
        x = arCookies[i].substr(0, arCookies[i].indexOf('='));
        y = arCookies[i].substr(arCookies[i].indexOf('=') + 1);
        x = x.replace(/^\s+|\s+$/g, '');
        if (x === name) {
            return unescape(y);
        }
    }
    return '';
}

export function setCookie(name, value, expiresInDays) {
    const expiryDate = new Date();
    expiryDate.setDate(expiryDate.getDate() + expiresInDays);
    const cookieValue = escape(value) + (expiresInDays === null ? '' : `; expires=${expiryDate.toUTCString()}`);
    document.cookie = `${name}=${cookieValue}`;
}

export function clearCookies() {
    const cookies = document.cookie.split(';');

    for (let i = 0; i < cookies.length; i++) {
        const cookie = cookies[i];
        const eqPos = cookie.indexOf('=');
        const name = eqPos > -1 ? cookie.substr(0, eqPos) : cookie;
        document.cookie = `${name}=;expires=Thu, 01 Jan 1970 00:00:00 GMT;`;
    }
}

我刚刚将其更新为：

export function getCookie(name) {
    var i, x, y;
    const arCookies = document.cookie.split(';');
    for (i = 0; i < arCookies.length; i++) {
        x = arCookies[i].substr(0, arCookies[i].indexOf('='));
        y = arCookies[i].substr(arCookies[i].indexOf('=') + 1);
        x = x.replace(/^\s+|\s+$/g, '');
        if (x === name) {
            return unescape(y);
        }
    }
    return '';
}

export function setCookie(name, value, expiresInDays) {
    const expiryDate = new Date();
    expiryDate.setDate(expiryDate.getDate() + expiresInDays);
    const cookieValue = escape(value) + (expiresInDays === null ? '' : `; expires=${expiryDate.toUTCString()}`);
    document.cookie = `${name}=${cookieValue};SameSite=Strict;secure`;
}

export function clearCookies() {
    const cookies = document.cookie.split(';');

    for (let i = 0; i < cookies.length; i++) {
        const cookie = cookies[i];
        const eqPos = cookie.indexOf('=');
        const name = eqPos > -1 ? cookie.substr(0, eqPos) : cookie;
        document.cookie = `${name}=;expires=Thu, 01 Jan 1970 00:00:00 GMT;SameSite=Strict;secure`;
    }
}

现在一切正常。

【讨论】：