AI 摘要：本期 JavaScript Weekly 聚焦于 JavaScript 生态的最新动态，包括高性能工具库 es-toolkit 对 Lodash 的取代、React/Next.js 复杂项目的重构建议、WebAssembly (WASM) 与 DOM 支持现状、npm 供应链安全问题、以及一系列重量级项目和社区新闻。此外，涵盖新版本发布、实用代码与工具、开发者经验反思、前端性能提升案例和社区趣闻等，内容丰富，覆盖了当下前端开发的热点话题和实践建议。

1. 社区与安全动态
• 细节剖析近期 JavaScript 生态的供应链安全事件，如 npm 上 is 包被劫持导致的恶意代码传播，以及 stylus 包下架风波。
• 介绍供西班牙语开发者使用的 EsJS，探索非英语语境下的 JavaScript 编程创新。
• 对比 Biome 与 Oxlint 两款 Lint 工具，在类型智能与速度上的表现差异。

2. 工具与库更新
• es-toolkit：兼容 Lodash、更快且更小（97% 体积减小），被 Storybook、CKEditor、Nuxt 推荐，利于代码体积优化。
• Bun v1.2.19：现在支持带有 bun install 的 pnpm 风格的隔离 node_modules ，提供交互式依赖更新功能等。Bun 1.3 也有望很快推出。
• React Native Reanimated 4.0、PythonMonkey 1.2、Oxlint、Jasmine 等多款工具新版本。
• Transformers.js 3.7：支持在浏览器借助 ONNX 运行时运行预训练模型，加入语音转录及 LFM2 和 ModernBERT 支持。
• npq：包安装前安全审核，集成 Snyk 漏洞库并审核包活跃度，有助于抗击恶意依赖。
• Untitled UI React：基于 Tailwind CSS 和 React Aria 的大型 UI 组件库，原生开源并配备 PRO 版本。
• ts-regexp：为 TypeScript 带来严格静态类型的正则表达式（RegExp）。 #正则
• ApexCharts 5.3：流行的 JS 图表库。现在具有数据解析功能 ，可将原始数据对象直接映射到图表。 演示
• vue-multiselect 3.3：Vue 的通用选择 / 多选 / 标记组件。 #vue
• eslint-plugin-unicorn 60.0：100+ 有用的 ESLint 规则集中在一个地方。

3. 实用开发经验与案例分享
• React/Next.js 开发最佳实践：避开 useState 与 useEffect 过度使用、数据嵌套、表单扩展及隐式状态共享陷阱。
• WASM 与 DOM：讨论 WebAssembly 直接访问 DOM 的前景，以及现代工具链对 WASM 生态的支持改进。
• 移除 SPA 的现代 CSS 实践建议，呼吁回归服务端渲染和真实页面体验利于性能与交互。
• Next.js 站点迁移到 Eleventy 提升 24% 性能，展示静态站点生成器的新优势。
• JS Event Listener 参数处理、构建字体搜索引擎、Three.js+WebGPU 的文本破坏交互等创新项目实践。

4. 社区趣闻与行业动向
• SVG 图形教程，鼓励开发者解锁矢量图形能力。
• HTML 2025 状态调查开放，鼓励开发者参与获取前沿信息。
• Google 推出 OSS Rebuild 以提升开源软件安全，MDN 庆祝 20 周年，前端表单规范问题(三个 HTTP 版本之后，表单仍然一团糟)

Socket

npm ‘is’ Package Hijacked in Expanding Supply Chain Attack -...

The ongoing npm phishing campaign escalates as attackers hijack the popular 'is' package, embedding malware in multiple versions.

AI 摘要：npm 不慎移除了被广泛使用的 Stylus 库，导致全球开发者构建和 CI/CD 流程中断。移除原因是 Stylus 的一位维护者发布了无关的恶意软件包，导致其账户及关联软件包被禁，Stylus 库也因此受牵连。目前，npm 和 GitHub 正在努力恢复 Stylus，并提供了临时解决方案以帮助开发者通过直接引用 GitHub 仓库或使用 overrides 功能来恢复其项目。

1. 事件总览
• Stylus 库被意外下架： 全球最大的软件注册表 npm 意外地移除了所有版本的 Stylus 库，并替换为一个“安全占位页面”，导致依赖该库的全球构建和 CI/CD 流程中断。
• 开发者与维护者回应： Stylus 开发者 Lei Chen 在 GitHub 和 X（原 Twitter）上声明 Stylus 被 npmjs 意外禁用，并寻求帮助以尽快恢复。
• 广泛的影响： 每周近 300 万次下载的 Stylus 库被下架后，大量依赖它的项目如 typescript-plugin-css-modules、Frappe/ERPNext 和 Angular 12 等的构建相继失败，引发开发者不满和担忧。
• 事件真相揭示： 供应链安全公司 Mend.io 的安全研究员 Tom Abai 调查发现，Stylus 库本身是干净且功能正常的。问题在于 Stylus 的一位维护者“panya”发布了三个无关的恶意软件包（如包含依赖混淆漏洞的 PoC），导致其账户被封禁，进而关联的 Stylus 库也被错误地移除。
• 临时解决方案： 针对 Stylus 库被移除，开发者可采取以下临时措施：
• 在 package.json 的 dependencies 中动态引用 GitHub 上的 Stylus 特定版本（例如："stylus": "github:stylus/stylus#version-you-need"）。
• 使用 npm v8.3.0 及更高版本支持的 overrides 功能来指定 Stylus 版本。
• 在应用上述更改后，需清除 npm 缓存（npm cache clean --force）。
• 维护者建议： Stylus 维护者 Lei Chen 确认 Stylus 不含恶意代码，并指出 npmmirror.com（由阿里巴巴赞助的非营利镜像）已恢复对该库的访问。他建议受影响的公司重新评估 npmjs 与 npm mirror 的关系，并设计更可靠的开发流程。
2. 安全事件分析
• 恶意行为与误伤： 事件起因是 Stylus 维护者之一“panya”发布了恶意软件包，但这些恶意软件包与 Stylus 库本身无关。npm 采取封禁账户并移除所有关联软件包的措施，却无意中“误伤”了无辜且重要的 Stylus 库。
• 官方回应： GitHub Trust & Safety 团队已回复 Stylus 维护者，确认问题是由于一名维护者发布了恶意软件包导致账户被暂停及关联软件包被移除，并表示工程师正在努力恢复 Stylus。
• 事件特殊性： 此次事件是首例由注册表因管理错误而下架整个合法开源项目的重要案例，与此前开发者因争议或抗议而自行撤回库的情况不同。

BleepingComputer

npm 'accidentally' removes Stylus package, breaks builds and pipelines

npm has taken down all versions of the Stylus library and replaced them with a "security holding" page, breaking pipelines and builds worldwide that rely on the package.

AI 摘要：本文由白帽黑客 Sharon Brizinov 撰写，详细描述了他如何通过 GitHub Archive 和 GitHub Event API 扫描自 2020 年以来所有公开的“Oops Commits”（即被开发者通过强制推送删除的提交）以寻找泄露的秘密信息。他发现了价值 25,000 美元的漏洞赏金，并与 Truffle Security 合作开源了一款工具 Force Push Scanner，用于帮助组织检测隐藏的提交中的秘密。文章深入探讨了 GitHub 如何永久存储被删除的提交、如何利用 API 和自动化工具发现这些提交中的敏感信息，以及如何通过手动和 AI 辅助的方式筛选出高价值的秘密。

1. 背景介绍
• Sharon Brizinov 是一位专注于 OT/IoT 设备漏洞研究的白帽黑客，偶尔参与漏洞赏金狩猎。
• 此前发表过关于 GitHub 仓库中隐藏秘密的文章，与 Truffle Security CEO Dylan 交流后，决定进一步探索大规模秘密狩猎的新方法。
• 使用 GitHub Event API 和 GH Archive 项目，专注于扫描“零提交推送事件”（即被删除的提交）以发现秘密。

2. 什么是删除提交？
• 解释了开发者通过 git reset 和 git push --force 删除提交的过程，目的是隐藏误提交的敏感信息。
• 指出即使提交被删除，GitHub 仍会永久存储这些“悬挂提交”（dangling commits），通过提交哈希值即可访问。
• 通过示例展示了如何在自己的仓库中模拟删除提交，并证明即使本地看不到，GitHub 依然保留记录。
• 探讨了 GitHub 保留这些提交的原因，可能是为了支持拉取请求、分支、审计等功能。

3. GitHub Event API 的作用
• 介绍了 GitHub Event API，用于获取 GitHub 上的各种事件数据（如推送代码、创建仓库等）。
• 结合 GH Archive 项目（一个开源的 GitHub 事件归档服务），可以访问历史事件数据，避免手动猜测提交哈希。
• 通过筛选“零提交推送事件”（PushEvent Zero-Commit），快速定位被删除的提交。

4. 自动化构建
• 描述了如何通过自动化工具扫描 GH Archive 数据，提取“Oops Commits”，并使用 TruffleHog 扫描其中的秘密。
• 与 Truffle Security 合作开源了 Force Push Scanner 工具，支持组织或用户扫描自己的“Oops Commits”。
• 强调工具的道德使用，仅用于帮助团队评估潜在风险。

5. 寻找高影响力的秘密
• 扫描自 2020 年以来的数据，发现了数千个活跃的秘密。
• 通过手动搜索（过滤公司邮箱相关提交）、自定义工具（vibe-coded 平台用于分类和可视化）和 AI 辅助分析，筛选出高价值秘密。
• 数据显示：MongoDB 秘密泄露最多，但 GitHub PAT 和 AWS 凭据最具价值；.env 文件是泄露最频繁的文件类型。

6. 案例研究：阻止供应链攻击
• 发现了一个开发者泄露的 GitHub PAT，具有对 Istio 项目（一个开源服务网格，拥有 36k 星标）的管理员权限。
• 该权限可能导致大规模供应链攻击，如修改代码、创建发布或删除项目。
• 通过 Istio 的漏洞报告页面及时报告，团队迅速撤销了 PAT，阻止了潜在风险。

7. 总结与反思
• 项目成功发现了大量秘密，Sharon 通过漏洞赏金获得约 25,000 美元。
• 强调“删除提交并不安全”的观念，一旦秘密被提交，应视为已泄露并立即撤销。
• 开源工具和研究成果旨在帮助社区提高安全意识和防护能力。

Trufflesecurity

Guest Post: How I Scanned all of GitHub’s “Oops Commits” for Leaked Secrets ◆ Truffle Security Co.

GitHub Archive logs every public commit, even the ones developers try to delete. Force pushes often cover up mistakes like leaked credentials by rewriting Git history. GitHub keeps these dangling commits, from what we can tell, forever. In the archive, they…

AI 摘要：本文详细介绍了 HTML 规范的一项重要更新，即在属性中对 < 和 > 字符进行转义，以防止变异型跨站脚本攻击 (mXSS) 漏洞。此更新已于 2025 年 5 月 20 日纳入 HTML 规范，并在 Chrome 138 版本中实现，预计于 2025 年 6 月 24 日正式发布为稳定版。文章分析了这一变化对 Web 开发者的影响，涵盖了变化的具体内容、不受影响的场景、可能导致问题的场景以及解决方案，旨在帮助开发者适应这一安全增强措施。

Chrome for Developers

HTML spec change: escaping < and > in attributes  |  Blog  |  Chrome for Developers

What you need to know about this change to how attributes are escaped.

AI 摘要： 本文详细介绍了如何使用 Node.js 和 Llama Stack 实现 AI 应用程序的安全机制（guardrails）。作为系列文章的第三部分，文章重点探讨了 Llama Stack 内置的安全工具 LlamaGuard 和 PromptGuard 的功能、设置和使用方法，旨在确保大型语言模型（LLM）在应用范围内的回答安全、准确且无偏见。通过具体的代码示例和配置步骤，作者展示了如何在 Node.js 环境中设置和运行 Llama Stack，并结合守卫机制过滤不安全内容和防止绕过安全措施的尝试。此外，文章还讨论了安全机制在节省 GPU 资源方面的额外优势。

1. 什么是守卫机制（Guardrails）？
• 守卫机制是大型语言模型（LLM）的安全措施，确保模型仅回答应用范围内的问题，并提供准确、无偏见的回答。
• 应用示例：防止保险报价应用中回答违法问题，或避免在保险审批中对某些群体产生偏见。
• Llama Stack 提供内置守卫机制，并支持注册自定义守卫提供者。

2. 内置守卫机制
• LlamaGuard：用于人类与 AI 对话，识别不安全内容（如暴力犯罪、性犯罪、仇恨、自残等 13 类内容），过滤人类问题和模型回答。
• PromptGuard：防御绕过安全机制的尝试（如“越狱”），与 LlamaGuard 互补，提升整体安全水平。

3. 设置 Llama Stack
• 描述了如何通过容器快速启动 Llama Stack 实例，使用 Ollama 服务大型语言模型。
• 提供了启动脚本，包含模型选择（如 Llama-3.1-8B-Instruct）和安全模型配置。

4. 运行 Llama Stack 实例
• 详细说明了容器配置和运行步骤，包括修改 run.yaml 文件以启用 PromptGuard。
• 解决 CPU 环境下运行 PromptGuard 的问题，通过修改容器代码实现支持。

5. 结合 Node.js 使用 LlamaGuard 和 PromptGuard
• 提供了代码示例，包括注册 LlamaGuard 和 PromptGuard 模型、配置护盾（shields）、手动运行护盾检测输入输出内容。
• 使用 Agent API 自动应用护盾，测试问题如“如何制作假文件”，展示了护盾如何阻止不安全内容的回答。
• 对比了护盾开启和关闭时的响应差异，验证了护盾的有效性。

6. 安全之外的额外优势
• 护盾不仅提升安全性，还能减少 GPU 资源浪费，因为护盾能快速拒绝不适合回答的问题，而无需模型耗费时间处理。

Red Hat Developer

Implement AI safeguards with Node.js and Llama Stack | Red Hat Developer

With Llama Stack being released earlier this year, we decided to look at how to implement key aspects of an AI application with Node.js and Llama Stack. In this post, we will discuss AI safety and

AI 摘要：本文介绍了从 Chrome 138 版本开始，Chrome 扩展中用户脚本（chrome.userScripts API）的启用方式发生了变化，旨在增强安全性和提供更精细的用户控制。过去依赖全局开发者模式开关的方式存在安全风险、功能过载和企业管理难题，现在转变为逐个扩展的“允许用户脚本”开关，用户可以在扩展详情页单独控制每个扩展的用户脚本权限。这一更新基于开发者社区的反馈，旨在提升安全性和用户体验，同时为管理员提供了新的管理策略。

Chrome for Developers

Enabling chrome.userScripts in Chrome Extensions is changing  |  Blog  |  Chrome for Developers

We are making a series of changes to the chrome.userScripts API.