chrome 115+ iframe内css不生效，首要排查控制台csp拦截日志，因该版本对content-security-policy执行更严格，未显式配置style-src或frame-src会导致样式静默阻止、网络无请求、布局错乱。
iframe内CSS不生效，先看控制台有没有CSP拦截日志
Chrome 115+ 对 Content-Security-Policy 的执行更严格，只要页面启用了 CSP，且未显式允许样式加载源，iframe 内部的 <link rel="stylesheet"> 或 <style></style> 就会被静默阻止——现象是 HTML 渲染了，但文字没颜色、布局错乱、字体没加载，Network 面板里也看不到 CSS 请求。
打开 DevTools → Console，搜索关键词：Refused to apply inline style、Refused to load stylesheet 或 violates the following Content Security Policy directive。如果出现这类报错，基本可锁定是 CSP 问题。
- 检查来源：报错里会明确写出被拦截的是
inline、unsafe-inline还是某个域名（如https://cdn.example.com） - 注意作用域：CSP 是对整个页面生效的，包括 iframe 内部文档；但 iframe 的 src 若跨域，其内部 CSP 由自身响应头决定，外层页面的 meta 标签不传递
- 临时验证：在 Chrome 地址栏输入
chrome://settings/content/siteDetails?site=https%3A%2F%2Fyoursite.com，查看是否启用了“增强型保护”，它可能叠加额外限制
frame-src 和 style-src 必须分开配，不能只写 default-src
default-src 'self' 不会自动继承给 frame-src 或 style-src。Chrome 115 默认收紧策略，漏配任意一项都可能导致 iframe 白屏或样式失效。
常见错误配置：
<meta http-equiv="Content-Security-Policy" content="default-src 'self';">
这会导致：iframe 的 src 被拒绝（因缺 frame-src），且所有内联样式、外部 CSS 全部失效（因缺 style-src）。
- 必须显式声明：
frame-src 'self' https://trusted-embeds.com（允许哪些源可被嵌入） - 样式相关必须加：
style-src 'self' 'unsafe-inline' https://fonts.googleapis.com（'unsafe-inline'是为支持<style></style>标签，但生产环境建议用nonce替代） - 若 iframe 内容本身也发请求（如加载图片、字体），还需补
img-src、font-src等
同域 iframe 的 CSS 加载失败，可能是路径解析异常
即使 CSP 放宽，Chrome 115 在隐藏容器中初始化 iframe 时，会跳过对相对路径 CSS 的解析（比如 <link href="css/app.css">）。此时 Network 面板无请求，控制台也无 CSP 报错，纯属路径没 resolve 成绝对 URL。
- 验证方式：右键 iframe → “检查” → 切换到 iframe 的 Elements 面板 → 手动点击
href值，看是否 404 - 修复办法：把所有相对路径 CSS 改成绝对路径，例如
/static/css/app.css或https://yoursite.com/static/css/app.css - 服务端渲染场景：确保后端输出的 HTML 中，CSS 路径已根据当前请求上下文正确补全，不要依赖浏览器 base 标签或 JS 拼接
开发阶段快速绕过CSP调试，但别上生产
临时关闭 CSP 是最快验证手段，但仅限本地或测试环境。
- 移除所有
<meta http-equiv="Content-Security-Policy">标签 - 检查响应头：用 curl 或 Network 面板确认服务器没通过
Content-Security-Policy响应头下发策略（优先级高于 meta） - 禁用 Chrome 实验性功能：访问
chrome://flags/#unsafely-treat-insecure-origin-as-secure，把涉及 CSP 的实验项设为Disabled（仅调试用）
真正上线前，必须回归最小权限原则：只放开必要源，避免用 'unsafe-inline' 或 *，尤其当 iframe 内容可被用户控制时，CSP 绕过可能直接导致 XSS。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
