大家好，我是寒草😈，一只工作一年出头的草系码猿🐒
如果喜欢我的文章，可以关注 ➕ 点赞，与我一同成长吧~
加我微信：hancao97，邀你进群，一起学习交流，成为更优秀的工程师～

「这是我参与2022首次更文挑战的第2天，活动详情查看：2022首次更文挑战」。

背景介绍

故事是这样的，前一阵接到一个任务，一个看似很平常的任务，我和一个实习生同学开开心心的完成并等待联调。

可是事与愿违，服务端同学和对接方没有谈拢，他们就想到一个鬼点子，用 iframe 嵌入他们的页面，以实现我们的需求。可是在调研的过程中我发现了以下问题：

• 部分页面无法嵌入
• 无法通过设置 cookie 绕过该系统的登陆

可能这个问题在各位前辈面前就是常见问题，但是我也去查询了问题出现的原因。于是，就有了这篇文章。

踩坑纪实

X-Frame-Options

部分页面无法嵌入的原因

参考：developer.mozilla.org/zh-CN/docs/…

The X-Frame-Options HTTP 响应头是用来给浏览器指示允许一个页面可否在 <frame>, <iframe>, <embed> 或者 <object> 中展现的标记。站点可以通过确保网站没有被嵌入到别人的站点里面，从而避免 clickjacking 攻击。

X-Frame-Options 有三个可能的值：

X-Frame-Options: deny
X-Frame-Options: sameorigin
X-Frame-Options: allow-from https://example.com/

deny

• 表示该页面不允许在 frame 中展示，即便是在相同域名的页面中嵌套也不允许。 sameorigin
• 表示该页面可以在相同域名页面的 frame 中展示。 allow-from uri
• 表示该页面可以在指定来源的 frame 中展示。

配置方法

• Apache
• nginx
• IIS
• HAProxy
• Express

具体方法请参考上方 mdn 链接

SameSite cookies

无法通过设置 cookie 绕过该系统的登陆的原因

参考：developer.mozilla.org/zh-CN/docs/…

SameSite 是HTTP响应头 Set-Cookie 的属性之一。它允许您声明该Cookie是否仅限于第一方或者同一站点上下文。

SameSite 接受下面三个值：

Lax

• Cookies允许与顶级导航一起发送，并将与第三方网站发起的GET请求一起发送。这是浏览器中的默认值。 Strict
• Cookies只会在第一方上下文中发送，不会与第三方网站发起的请求一起发送。 None
• Cookie将在所有上下文中发送，即允许跨域发送。

以前 None 是默认值，但最近的浏览器版本将 Lax 作为默认值，以便对某些类型的跨站请求伪造 （CSRF） 攻击具有相当强的防御能力。

使用 None 时，需在最新的浏览器版本中使用 Secure 属性。

Chrome76版本更新：拒绝不安全的 samesite=none 的 cookie

结束语

工作中遇到问题在所难免，也请各位做好总结，这样才能进步～

✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨

弓背霞明剑照霜，秋风走马出咸阳。
未收天子河湟地，不拟回头望故乡。

✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨

可以加我微信：hancao97，邀你进群，一起学习交流，成为更优秀的前端工程师～