返回

SameSite属性默认值变更引起的bug以及规避建议

前端

SameSite属性对嵌入式iFrame的影响：应对策略

SameSite属性简介

SameSite属性是一个HTTP header，旨在防止跨站点请求伪造(CSRF)攻击。在2020年，其默认值从"None"更改为"Lax"，以提升网站安全性。然而，此变更对使用嵌入式iFrame的网站造成了影响。

默认值变更对嵌入式iFrame的影响

SameSite属性的默认值更改导致浏览器不再在嵌入式iFrame中发送Cookie。这会影响依赖于Cookie正常运作的嵌入式iFrame。

规避影响的策略

为了解决SameSite属性默认值变更对嵌入式iFrame的影响，可以采取以下措施：

  • 将SameSite属性显式设置为"None" ：这将允许浏览器在所有请求中发送Cookie，包括嵌入式iFrame中的请求。然而，此方法可能会增加CSRF攻击的风险。

  • 使用postMessage() API ：这种方法不依赖于Cookie，通过父页面和嵌入式iFrame之间的通信来实现。

  • 将嵌入式iFrame托管在与父页面相同的域名上 ：这将确保浏览器在嵌入式iFrame中发送Cookie，因为请求将与父页面同源。

代码示例

将SameSite属性设置为"None" ：

Response.Headers.Add("Set-Cookie", "cookieName=cookieValue; SameSite=None");

使用postMessage() API ：

父页面：

<script>
  const iframe = document.getElementById("iframe");

  iframe.onload = () => {
    const iframeWindow = iframe.contentWindow;
    iframeWindow.postMessage("message", "*");
  };

  iframeWindow.addEventListener("message", (event) => {
    if (event.origin === "http://example.com") {
      console.log(event.data);
    }
  });
</script>

嵌入式iFrame：

<script>
  window.addEventListener("message", (event) => {
    if (event.origin === "http://example.com") {
      console.log(event.data);
      window.postMessage("response", "http://example.com");
    }
  });
</script>

常见问题解答

  1. 为什么SameSite属性的默认值会更改？

    • 默认值更改是为了提高网站安全性，防止CSRF攻击。

  2. 为什么嵌入式iFrame会受到影响？

    • 因为SameSite属性更改后，浏览器不再在嵌入式iFrame中发送Cookie。

  3. 哪种规避策略最有效？

    • 最佳策略取决于网站的具体需求和安全性要求。

  4. 将嵌入式iFrame托管在与父页面相同的域名上安全吗？

    • 如果子域的安全策略与父域一致，则此方法通常是安全的。

  5. 如果所有规避策略都无效怎么办？

    • 可以联系浏览器制造商寻求支持或探索替代解决方案，例如使用JSON Web令牌(JWT)。