Impeccable Live 模式怎么为 localhost:8400 配置 CSP 开发豁免【免费下载链接】impeccableThe design language that makes your AI harness better at design.项目地址: https://gitcode.com/GitHub_Trending/im/impeccableimpeccable 的 Live 模式通过一个本地 helper 服务器向页面注入http://localhost:PORT/live.js?token...脚本端口默认从8400起取第一个空闲端口绑定127.0.0.1再靠/poll等接口维持会话。如果你的项目已经下发了 Content-Security-Policyscript-src和connect-src不豁免http://localhost:8400时live picker 无法加载整个 Live 模式不可用。本文按 skill/reference/live-setup.md 中的一次性设置流程说明如何检测项目里的 CSP、按检测出的 shape 打上仅开发环境生效的豁免补丁并验证 Live 模式恢复可用。前提本地 checkout且有一个带 HMR 的运行中 dev serverVite、Next.js、Bun 等或浏览器打开的静态 HTML 文件。什么时候会走到 CSP 豁免这一步CSP 检测是 Live 模式首次设置的一部分。在{{scripts_path}}/impeccable live启动时{{scripts_path}}是 skill 文档里的模板占位符指代已安装 skill 包中的scripts目录实际执行时由 harness 替换成真实路径出现以下任一情况就需要走一次性设置输出{ ok: false, error: config_missing | config_invalid, path }项目缺少.impeccable/live/config.json默认路径就是 boot 报告里的path已有配置但缺少cspChecked字段。如果配置里config.cspChecked true说明这个问题已经问过用户一次整个 CSP 小节直接跳过。先写入配置文件结构如下files里放浏览器实际加载的 HTML 文件按框架替换**/node_modules/**和**/.git/**是硬排除路径不可覆盖{ files: [index.html], exclude: [], insertBefore: /body, commentSyntax: html, cspChecked: true }files、insertBefore、commentSyntax的取值按框架选例如 Vite/React/纯 HTML SPA 用[index.html]/bodyhtmlNext.js App Router 用[app/layout.tsx]jsxSvelte/SvelteKit 用[src/app.html]。完整对照表见 live-setup.md。运行 detect-csp 判断 CSP 的 shape在项目根目录执行无参数cwd 即项目根impeccable detect-csp该命令会扫描 cwd深度 6跳过node_modules、.git、.next、.turbo、.svelte-kit、.nuxt、.astro、dist、build、out、.vercel输出{ shape, signals }shape指明项目里 CSP 的补丁机制signals是命中文件路径。检测优先级为append-arraysappend-stringmiddlewaremeta-tagnull。按 shape 分四条处理路径null没有 CSP。把配置写成cspChecked: true后直接结束不需要任何补丁append-arrays/append-string可以按下面的模板自动打补丁middleware/meta-tag只检测、不自动补丁需要人工修改所有豁免都仅限开发环境无论是自动补丁、手动 middleware 还是 meta 标签修改都不要为加载 localhost helper 去改已部署的生产站 CSP生产环境检查应使用impeccable detect url或浏览器扩展见 skill/reference/live.md。shape 为 append-arraysCSP 是结构化指令数组适用于 monorepo 里有additionalScriptSrc/additionalConnectSrc的 Next.js helper、SvelteKit 的kit.csp.directives、Nuxt 的nuxt-security插件。第一步在持有 CSP 数组的文件顶部声明一个 dev-only 常量受NODE_ENV保护非 development 环境是空数组// Dev-only allowance so impeccable live mode can load. Guarded by NODE_ENV. const __impeccableLiveDev process.env.NODE_ENV development ? [http://localhost:8400] : [];第二步把...__impeccableLiveDev追加到script-src和connect-src两个数组。具体落点按框架Next.js monorepo helper编辑应用自己的next.config.*不是共享 helper追加到additionalScriptSrc/additionalConnectSrcSvelteKitsvelte.config.js的kit.csp.directives[script-src]和[connect-src]Nuxt nuxt-securitynuxt.config.*的security.headers.contentSecurityPolicy[script-src]和[connect-src]。仓库里有三个可对照的参考输出均为补丁应用后目标文件应达到的形态SvelteKit 示例、Next.js monorepo 示例、Nuxt 场景的字符串形态见下节。幂等性如果文件里已有__impeccableLiveDev补丁只需标记cspChecked: true不要重复插入。shape 为 append-stringCSP 是字面量字符串适用于 Next.js 内联在next.config.*里的headers()以及 Nuxt 的routeRules。这是两点补丁声明 dev-only 字符串注意前导空格保证拼接干净字面量要转成模板字符串// Dev-only allowance so impeccable live mode can load. const __impeccableLiveDev process.env.NODE_ENV development ? http://localhost:8400 : ;然后只在这两处指令里插值script-src self unsafe-inline变为script-src self unsafe-inline${__impeccableLiveDev}connect-src self变为connect-src self${__impeccableLiveDev}参考输出Next.js 内联 headers 示例、Nuxt routeRules 示例可以核对最终文件应该长什么样。shape 为 middleware 或 meta-tag手动修改这两种 shape 只被检测、不被自动补丁。signals会给出命中的文件路径middleware 是middleware.ts/js/mjs里headers.set(Content-Security-Policy, ...)的位置meta-tag 是布局文件里的meta http-equivContent-Security-Policy。操作把检测到的文件展示给用户请其在这两个指令中手动加入http://localhost:8400script-src加http://localhost:8400connect-src加http://localhost:8400改完后同样在.impeccable/live/config.json写入cspChecked: true再继续。如果走的是 agent 协助流程文档建议的确认话术是向用户展示[file: patchTarget]和精确 diff2–5 行并说明改动受NODE_ENV development保护、回滚该文件即可移除用户回答 no 时跳过补丁但仍然写cspChecked: true问题已经问过并记下在豁免手动加好之前 live 不会工作。标记 cspChecked 并重新运行 live补丁落地或确认不需要后确保.impeccable/live/config.json含cspChecked: true然后重新运行impeccable live验证依据来自文档本身的因果链helper 服务器监听后把注入脚本写到http://localhost:PORT/live.js?tokenTOKEN而 consent 话术明确说明没有豁免时 the live picker wont load。所以成功条件是应用页面能打开且 live picker 随 helper 加载impeccable live不再返回config_missing/config_invalid。之后正常进入 live 会话打开应用 URL 开始 poll 循环不需要再跑单独的 CSP 检查命令。live picker 仍不加载时的排查文档给出的一条排查路径用户当初对 CSP 补丁回答了 no后来报告 live 不工作——原因就是 dev CSP 仍拦着http://localhost:8400。处理从.impeccable/live/config.json中删除cspChecked字段重新运行impeccable live设置流程会重新问一次 CSP 问题这次按上面对应 shape 应用豁免再回到标记 cspChecked 并重新运行 live。限制豁免必须开发专用自动补丁模板都以process.env.NODE_ENV development保护手动 middleware/meta 修改同理不要无保护地把http://localhost:8400写进生产响应头。Live 编辑只支持本地 checkout对已部署站点含 HTTPS的注入不受支持也不允许通过削弱生产 CSP 来启用 live 模式。该豁免只服务于 live helper8400起的端口不改变应用自身的 CSP 策略面生产检查走impeccable detect url或浏览器扩展与本文流程无关。【免费下载链接】impeccableThe design language that makes your AI harness better at design.项目地址: https://gitcode.com/GitHub_Trending/im/impeccable创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考