Skip to main content

iframe

iframe 能将另一个网页嵌入到当前网页中。

<iframe
  name="oaIframe"
  style="width: 100%; height: calc(100vh - 56px);margin:-20px;border:none"
  src="https://abc.com"
/>
  • 需要注意跨域 CORS、是否允许嵌入等安全隐患限制
  • 最好是通过 js 动态的给 iframe 添加 src 属性
  • allowFullScreen 属性：允许全屏

缺点：

  1. iframe 会阻塞主页面的 onload 事件
  2. 搜索引擎的检索程序无法解读这种页面，不利于 SEO
  3. iframe 和主页面共享连接池，而浏览器对相同域的连接有限制，会影响页面的并行加载

sandbox​

  • allow-scripts
  • allow-top-navigation
  • allow-same-origin
  • allow-forms

X-Frame-Options​

X-Frame-Options

Content-Security-Policy​

Content-Security-Policy

配置 nginx

# 允许所有
add_header Content-Security-Policy "frame-ancestors *"

# 允许指定域名
add_header Content-Security-Policy "frame-ancestors https://abc.com"

iframe 嵌套站点无法登录的问题​

场景：以 iframe 标签嵌入一个现有的项目到网站中，嵌入的网站无法正常登录，直接在浏览器地址栏输入 url 并登录是正常的

观察登录接口的响应头发现：Set-Cookie 后面有一个警告 ⚠️

警告信息显示：写入 Cookie 失败。原因是没有显式设置 cookie 的 SameSite 属性，默认为 Lax，又因为响应的接口属于非顶层导航的跨站请求，浏览器将其屏蔽了

SameSite 是一种用于增强安全性的 Cookie 属性，规定了在跨站点请求时是否发送 Cookie。默认情况下，SameSite 属性是 Lax

解决办法：设置 SameSite=None

以下是在 Spring Boot 中配置 SameSite=None 的步骤：

  1. 首先确保 Spring Boot 版本在 5.1.4 或更高版本，因为在这个版本中添加了对 SameSite 属性的支持
  2. 在 Spring Boot 的配置文件（application.properties 或 application.yml）中添加以下配置：
server.servlet.session.cookie.same-site: none
server.servlet.session.cookie.secure: true

secure 用于指定只在 HTTPS 连接中发送 Cookie