在线html运行环境无法通过服务端注入脚本，只能依赖平台提供的自定义js入口（如codepen的resources面板）或内联脚本，且需绕过csp、跨域和执行时机限制。
服务侧注入 HTML 在线运行环境的原理限制
HTML 在线运行环境（如 CodePen、JSFiddle、HTML5 Editor）本质是沙盒 iframe 或 CSP 严格隔离的页面，服务端无法直接修改其响应体——ngx_http_sub_module 和 Service Worker 注入都失效。你看到的“注入”，实际是这些平台自身提供的「自定义 JS 执行入口」或「预置 snippet 插槽」，不是通用 HTTP 层能力。
CodePen / JSFiddle 等平台的真实挂载方式
这类平台不开放 Nginx 配置，也不允许你控制 HTML 响应流，唯一可控点是它们暴露的设置面板：
- CodePen：在「Settings → JavaScript → Add External Scripts」中填入探针 URL，它会自动插入到
末尾，且带defer - JSFiddle：在左侧面板「Resources」里添加脚本链接，或在「JavaScript」编辑区顶部用
document.write模拟注入（不推荐） - 自建 HTML 编辑器（如基于 Monaco 的本地调试页）：可直接在模板 HTML 中硬编码
<script src="/probe.js?env=dev"></script>，但仅限你完全控制服务端渲染逻辑时有效
注意：sub_filter 对这些平台完全无用——你根本没权限改它们的 Nginx 配置；Service Worker 也无法注册到第三方 iframe 里。
为什么不能靠 <script src></script> 标签自动上报
即使你把探针脚本地址塞进在线编辑器的 HTML 源码，大概率会失败：
- CSP 报错：
Refused to load the script 'https://xxx/probe.js' because it violates the following Content Security Policy directive—— 这些平台默认禁止外链脚本执行 - 跨域限制：探针若调用
fetch('/api/report')，目标域名未配Access-Control-Allow-Origin就会被浏览器拦截 - 执行时机错乱：在线环境常延迟执行 JS，而监控探针需在
DOMContentLoaded前就位，否则漏采首屏错误
真正能跑通的只有平台官方支持的加载路径（如 CodePen 的 Resources 面板），其他都是障眼法。
可行的最小闭环方案
若必须用在线环境做快速验证，只有一条路走得通：
- 把探针逻辑压缩成单文件内联脚本，用
<script>...</script>直接贴进 HTML 编辑区（避开 CSP 外链限制） - 上报 endpoint 改为
navigator.sendBeacon+ 同源路径（如/synth/log），并确保你的后端已配好接收路由和 CORS - 手动在脚本开头加
if (location.hostname === 'localhost' || location.hostname.endsWith('codepen.io')) { ... }做环境兜底，防止误发生产数据
别试图让探针“自动感知”运行环境——在线编辑器没有 $host 变量，也没有 request_uri 上下文，所有环境标识必须硬编码或靠 window.location 运行时读取。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
