ARTICLE DETAIL

资讯详情

深耕郑州网站建设与运营推广的一线实战洞察。

Claude Code Artifact 外部资源白名单详解:CSP 强制约束下的 CDN 与字体加载规范

Claude Code Artifact 外部资源白名单详解:CSP 强制约束下的 CDN 与字体加载规范 文档提示工程人工智能【免费下载链接】claude-code-system-promptsAll parts of Claude Codes system prompt, 27 builtin tool descriptions, sub agent prompts (Plan/Explore/Task), utility prompts (CLAUDE.md, compact, statusline, magic docs, WebFetch, Bash cmd, security review, agent creation). Updated for each Claude Code version.项目地址https://gitcode.com/gh_mirrors/cl/claude-code-system-prompts点击查看免费下载导读本文基于 Claude Code 系统提示词仓库中的 tool-description-artifact-external-resource-allowlist.md 展开系统讲解 Artifact 页面在 CSP内容安全策略强制下允许加载的外部资源范围五个脚本 CDN 主机、Google Fonts 字体链路以及其余一切皆被静默拦截的边界。读完本文你将掌握在 Claude Code 的 Artifact 查看器中正确引用第三方库与字体的唯一合法姿势——从精确版本号的 UMD 脚本到带真实回退栈的字体栈并理解为什么页面自有 CSS、JS 与资源必须全部内联为 data: URI。一、外部资源白名单的总体规则Artifact 页面的查看器运行在一个由 CSP 锁定的沙箱框架中。该提示词文档开宗明义地给出了完整清单外部脚本只能从以下五个主机加载https://cdnjs.cloudflare.com首选https://cdn.jsdelivr.net/npm/https://unpkg.comhttps://cdn.tailwindcss.comTailwind 的 play-CDN 脚本https://code.jquery.com外部样式表只允许来自https://fonts.googleapis.com而它所拉取的字体文件则来自https://fonts.gstatic.com且每个字面都必须配备真实的回退字体栈。除上述主机之外的一切资源请求都会被静默拦截——没有任何可见报错。这意味着以下行为全部无效其他任何主机esm.sh 也在禁止之列即便在这五个白名单 CDN 上非脚本类型的资源样式表、图片、媒体文件同样被拒绝对任意外部主机的fetch/XMLHttpRequest/WebSocket请求第三方库自身在运行时发起的网络请求runtime fetches。因此Artifact 页面的正确做法是所有其余 CSS 与 JS 一律内联进页面所有资源一律以 data: URI 形式内嵌。这条规则在 Claude Code 系统提示词中并非孤例tool-description-artifact-page-implementation-requirements-app-wording.md 与 tool-description-artifact-design-fallback-requirements.md 中均有完全一致的白名单表述只是后者强调这是在 Artifact 设计 skill 尚未加载、页面已先行书写时的兜底契约。二、白名单的演进历史从 CHANGELOG 看规则沉淀这份白名单并非一成不变仓库根目录的 CHANGELOG.md 完整记录了它的演进过程可以作为理解为什么是这五个主机的历史证据最初Artifact 的外部脚本源只有少量受限 CDN非脚本资源与页面自有代码必须内嵌见 CHANGELOG 第 685 行附近允许从 CSP 批准的 CDN 主机加载固定版本pinned的 UMD 脚本优先使用 cdnjs并要求库脚本必须放在依赖它的内联脚本之前同时继续要求非脚本资源与页面自有代码内嵌。随后Artifact external resource allowlist 与 Artifact page implementation requirementsapp wording两个文档片段同步新增https://unpkg.com进入外部脚本 CDN 白名单CHANGELOG 第 238 行附近与既有脚本主机并列。再之后Artifact design fallback requirements 进一步放宽允许的外部脚本源为 cdnjs首选、jsDelivr、unpkg、Tailwind CDN 与 jQueryCHANGELOG 第 144 行附近形成当前五主机格局。这条历史脉络说明白名单是逐主机评审后放行而非开放任意 CDN新增主机都伴随明确的使用场景如 Tailwind 的 play-CDN 服务于零构建的样式方案且优先 cdnjs、精确固定版本的原则始终不变。三、如何正确加载一个第三方库tool-description-artifact-publishing-and-update-guidance.md 给出了加载库的规范 URL 形态script srchttps://cdnjs.cloudflare.com/ajax/libs/lib/exact version/file/script三条硬性要求选择 UMD 构建UMD 构建会定义全局变量例如 React 的react/18.3.1/umd/react.production.min.js随后再加载react-dom的对应 UMD 文件必须固定精确版本号exact version不可省略杜绝浮动的 latest / 主版本号通配库脚本必须放在使用它的内联script之前——依赖顺序是加载成功的前提这与浏览器同步脚本的天然执行顺序一致。一个典型的组合加载示意!-- 先加载库精确版本 UMD 全局 -- script srchttps://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/umd/react.production.min.js/script script srchttps://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/umd/react-dom.production.min.js/script !-- 后写使用库的内联脚本 -- script const root ReactDOM.createRoot(document.getElementById(app)); root.render(React.createElement(h1, null, Hello)); /script注意这里script src是白名单唯一放行的外部资源形态而业务逻辑代码永远以内联形式存在不单独成文件外链。四、字体加载规范Google Fonts 链路与回退栈样式表唯一的外链出口是 Google Fonts在head中以link relstylesheet hrefhttps://fonts.googleapis.com/...引入字体族浏览器随之从https://fonts.gstatic.com拉取字体文件。这一点在仓库的 Slides 工作流中有真实可循的用法——system-reminder-new-slides-deck-parallel-appifactrepl-workflow.md 的 deck 索引示例中就写明了字面配置deck.faces { lora: { family: Lora, href: https://fonts.googleapis.com/css2?familyLora:wght400;600displayswap } };文档同时强调每个字面face都必须配备真实的回退字体栈fallback stack。原因是字体文件加载在沙箱内同样可能失败或被延迟没有回退栈的页面会退回丑陋的系统默认字体甚至出现不可读内容。例如使用 Lora 时应写成font-family: Lora, Georgia, Times New Roman, serif;五、被静默拦截的边界明确做不到清单白名单的反面是强约束文档用没有可见错误no visible error来描述拦截方式——页面无法通过报错感知资源被拒绝因此必须从设计层面规避而非运行时探测。结合 tool-description-artifact-publishing-and-update-guidance.md 中对查看器框架的整体说明以下能力在 Artifact 中一律不可用类别具体被拒绝的行为外部主机除五脚本主机与 Google Fonts 外的任何请求esm.sh 明确点名资源类型白名单 CDN 上的样式表、图片、媒体、字体文件网络 API对外的fetch/XHR/WebSocket含库自身的运行时请求页面发起的下载a download、data:/blob:链接、脚本驱动的保存一律无效对话框alert()/confirm()立即返回 false/prompt()立即返回 null设备 API摄像头、麦克风、定位、屏幕捕获等站点嵌入iframe 其他网站、object/embed这也是为什么 tool-description-artifact-page-implementation-requirements-app-wording.md 明确要求表单提交必须在脚本中preventDefault()处理、确认步骤要构建进页面本身、文件不能通过普通链接提供、mailto:/tel:/sms:链接只作为可能无效的便利并同时展示可选中复制的文本。此外该文档还补充了与外部资源强相关的两条配套约束页面大小渲染后的页面含内嵌 data: URI不得超过MAX_ARTIFACT_BYTES换算为 MB 的配置变量——内联策略会膨胀 HTML 体积因此 data: URI 的体积被明确计入上限资源内联的物理基础tool-description-artifact-html-document-skeleton.md 说明发布时页面会被包裹进!doctype html骨架head 中只有 charset、viewport 与最小 reset作者需自行在文件顶部放置title与style——这恰好是全部内联策略下的常规书写位置。六、实战落地清单综合白名单文档及其配套约束写一个合规的 Artifact 页面应遵循以下顺序盘点依赖仅允许 UMD 构建的库脚本且只从 cdnjs首选、jsDelivr、unpkg、Tailwind CDN、jQuery CDN 五者中选择其余任何库一律放弃外链精确固定版本lib/exact version/file三段式 URLUMD 全局变量先行定义库脚本置于使用它的内联脚本之前字体走 Google Fonts样式表外链仅限fonts.googleapis.com字体文件来自fonts.gstatic.com每个字面配真实回退栈其余全部内联自有 CSS、自有 JS、图片图标与媒体一律转 data: URI 嵌入并复核总大小不超过 MAX_ARTIFACT_BYTES绕开被拦能力不提供下载链接、打印按钮、alert 确认、外部 fetch表单提交与确认逻辑构建在页面脚本内#anchor之外的 URL 状态一律不进location.hash。七、总结Artifact 外部资源白名单是一份封闭默认deny by default 少量显式放行explicit allow的 CSP 策略脚本只认五个 CDN 主机的精确版本 UMD样式只认 Google Fonts 链路其余一切包括 esm.sh、同 CDN 的非脚本资源、所有运行时网络请求都被无痕拦截。对 Claude Code 而言这条提示词直接决定了 Artifact 页面的编写范式——能外链的极少能内联的必须内联对开发者而言理解这份白名单是排查资源加载失败却无报错类问题的第一把钥匙。其演进记录CHANGELOG.md也表明这是一份随版本评审更新的活文档实际以当前 ccVersion 对应的系统提示词为准。赞分享文档提示工程人工智能【免费下载链接】claude-code-system-promptsAll parts of Claude Codes system prompt, 27 builtin tool descriptions, sub agent prompts (Plan/Explore/Task), utility prompts (CLAUDE.md, compact, statusline, magic docs, WebFetch, Bash cmd, security review, agent creation). Updated for each Claude Code version.项目地址https://gitcode.com/gh_mirrors/cl/claude-code-system-prompts点击查看免费下载相关推荐Claude Code Artifact 页面实现硬性要求CSP 资源白名单、浏览器存储、体积、响应式与主题适配完整指南Claude Code Artifact 页面实现硬性要求CSP 资源白名单、浏览器存储、体积、响应式与主题适配完整指南 本篇技术指南基于 Claude Co文档提示工程人工智能stylelint media-feature-name-allowed-list 规则详解用白名单约束媒体特性名称stylelint media feature name allowed list 规则详解用白名单约束媒体特性名称 media feature name a代码质量静态分析前端stylelint function-allowed-list 规则详解用白名单约束 CSS 函数的使用stylelint function allowed list 规则详解用白名单约束 CSS 函数的使用 导读 function allowed list 是代码质量静态分析前端上一篇百度网盘命令行管理工具BaiduPCS-Go5个核心场景提升文件管理效率下一篇QTTabBar终极教程为Windows资源管理器添加标签页功能的完整指南创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表