本地环境嵌入测试 ✓ 允许
场景: 本地开发环境嵌入当前应用
状态: 本地域名已在白名单中,应该正常显示
用途: 验证本地开发时的嵌入效果
状态: 本地域名已在白名单中,应该正常显示
用途: 验证本地开发时的嵌入效果
api.tu-zi.com 嵌入测试 ✓ 允许
场景: 模拟 api.tu-zi.com 网站嵌入当前应用
状态: api.tu-zi.com 已在白名单中,应该正常显示
用途: 验证生产环境中的嵌入效果
状态: api.tu-zi.com 已在白名单中,应该正常显示
用途: 验证生产环境中的嵌入效果
注意: 这个测试页面本身运行在当前域名下,所以可以成功嵌入。在实际部署中,api.tu-zi.com 的页面可以通过同样的方式嵌入此应用。
未授权域名嵌入测试 ✗ 应该被阻止
场景: 模拟未授权域名尝试嵌入当前应用
状态: 应该被CSP策略阻止
用途: 验证安全策略的有效性
状态: 应该被CSP策略阻止
用途: 验证安全策略的有效性
说明: 由于这个测试页面运行在当前域名下,无法真实模拟外部域名的阻止效果。但在实际部署中,其他未授权域名将无法嵌入此应用。
❌ 未授权域名将被阻止嵌入
实际效果需要在不同域名下测试嵌入参数测试
测试不同的URL参数和嵌入选项
CSP 策略配置
为了允许当前应用被其他域名通过iframe嵌入,需要配置以下HTTP响应头:
Content-Security-Policy: frame-ancestors 'self' localhost:* 127.0.0.1:* https://api.tu-zi.com X-Frame-Options: ALLOWALL
当前策略允许嵌入的父域名:
• localhost (任意端口) - 本地开发环境
• 127.0.0.1 (任意端口) - 本地IP访问
• https://api.tu-zi.com - 生产环境授权域名
• 同域名 (self) - 同域内嵌入
• localhost (任意端口) - 本地开发环境
• 127.0.0.1 (任意端口) - 本地IP访问
• https://api.tu-zi.com - 生产环境授权域名
• 同域名 (self) - 同域内嵌入
使用说明:
1. 在 api.tu-zi.com 的网站中可以使用
2. 其他未授权域名将收到 "Refused to frame" 错误,无法嵌入
3. 配置已添加到 Vite 开发服务器、Netlify _headers 文件和 netlify.toml 中
4. Netlify 部署后会自动应用这些CSP策略
1. 在 api.tu-zi.com 的网站中可以使用
<iframe src="你的应用URL"></iframe> 来嵌入此应用2. 其他未授权域名将收到 "Refused to frame" 错误,无法嵌入
3. 配置已添加到 Vite 开发服务器、Netlify _headers 文件和 netlify.toml 中
4. Netlify 部署后会自动应用这些CSP策略
验证部署:
部署后可以通过浏览器开发者工具的 Network 标签查看响应头,确认包含:
部署后可以通过浏览器开发者工具的 Network 标签查看响应头,确认包含:
Content-Security-Policy: frame-ancestors 'self' localhost:* 127.0.0.1:* *.localhost:* https://api.tu-zi.com