cosine - 前端人の日常频道

#优质博文 #React #安全 #RSC #前端 这就是 R！S！C！（逃 叠甲：任何东西都会有漏洞的啦只是想吐槽一下再说我们也没用 RSC 连服务器组件都没用没影响的没影响的。 Critical Security Vulnerability in React Server Components – React AI 摘要：React 官方披露了一个在 React Server Components (RSC) 中的严重远程代码执行漏洞（CVE-2025-55182），影响多个版本的 react-server…

#优质博文 #前端 #React #安全 #RCE #POC
CVE-2025-55182 React Server Components RCE POC

AI 摘要：作者展示了 CVE-2025-55182 漏洞的具体利用方式，说明该漏洞出现在 React Server Components 的反序列化机制中。通过伪造 Chunk 对象以及操控 then 方法触发链式调用，攻击者可以利用 Next.js 的服务端组件解析逻辑实现远程代码执行 (RCE)。文章详细讲述了漏洞的产生原理、攻击向量和具体请求示例，说明此问题的严重性与利用条件。

[以下是方便搜索索引的大纲 (AI 生成)，请读原文]

1. 漏洞背景与影响范围
• 漏洞编号为 CVE-2025-55182，影响 React Server Components 的反序列化过程
• 可在 Next.js 16.0.6 环境下触发
• 利用对象结构中的 $@ 标记机制篡改 Chunk 引用并控制反序列化流程

2. 核心利用思路 (Exploit 原理)
• 使用 $@ 引用构造伪造的 Chunk 实例
• 将 Chunk.prototype.then 作为根对象的 then 属性，使得在 Promise 处理时自动触发攻击逻辑
• 通过修改 status 为 RESOLVED_MODEL 调用 initializeModelChunk 以执行受控对象的代码路径

3. 攻击链实现与触发机制
• 攻击目标是触发 Blob 反序列化流程
• response._formData.get 被重写为 JavaScript Function 构造器，实现任意代码执行
• 构造的 multipart/form-data 请求载荷通过控制 _prefix 字段注入任意命令（例如 child_process.execSync('xcalc')）

4. 安全意义与防护思考
• 漏洞本质源于反序列化信任边界不明与模型解析机制的未过滤输入
• 需加强 React Server Components 的反序列化安全校验
• 建议暂时限制相关功能或升级框架版本

Source

Gist

CVE-2025-55182 React Server Components RCE POC

CVE-2025-55182 React Server Components RCE POC. GitHub Gist: instantly share code, notes, and snippets.

#前端 #CSS #demo
这太酷了~

jhey ʕ•ᴥ•ʔ (@jh3yy): This CSS trick is fascinating ⭐️
By setting: [type=range] { overflow: hidden; }
You can create a view timeline on the handle:
::-webkit-slider-thumb { view-timeline: --thumb inline; }
And then you can use that to build all sorts of custom range sliders 🚀

https://fixupx.com/jh3yy/status/1816290576087515620

#音乐
喜欢
「蝴蝶（冰火歌会）」- 洛天依/沢渡禾安
专辑: 蝴蝶
#网易云音乐 #flac 21.28MB 809.94kbps

走吧就算我们无法让大雨停下
还有我陪你在雨里放肆奔跑啊

地球上天空下我们做一对傻瓜
你我生来时就注定天真而伟大

你啊就算永远无法被世界回答
没关系还有名为自己的魔法

你啊就算下一秒全世界都崩塌
还有我在你身边说我爱你啊

via @Music163bot

蝴蝶（冰火歌会）

洛天依, 沢渡禾安

#demo #codepen #WebGL #前端
好萌 🎄

https://codepen.io/creativeocean/pen/zxqEWYd

Tom Miller 用这段精美的 JavaScript 圣诞树点亮视频拉开了节日季的序幕。将鼠标悬停在树上，即可让它闪耀夺目！

https://blog.cloudflare.com/waf-rules-react-vulnerability/
可以使用 Cloudflare Rule 临时拦截 React CVE-2025-55182 漏洞

The Cloudflare Blog

Cloudflare WAF proactively protects against React vulnerability

Cloudflare offers protection against a new high profile vulnerability for React Server Components: CVE-2025-55182. All WAF customers are automatically protected as long as the WAF is deployed.

#优质博文 #React #安全 #RSC #前端
这就是 R！S！C！（逃
叠甲：任何东西都会有漏洞的啦只是想吐槽一下再说我们也没用 RSC 连服务器组件都没用没影响的没影响的。
Critical Security Vulnerability in React Server Components – React

AI 摘要：React 官方披露了一个在 React Server Components (RSC) 中的严重远程代码执行漏洞（CVE-2025-55182），影响多个版本的 react-server-dom 系列包。问题出在 RSC 的负载反序列化逻辑中，攻击者可通过构造恶意 HTTP 请求在服务器上执行任意代码。相关漏洞获评 CVSS 10.0（最高等级），已在 19.0.1、19.1.2、19.2.1 等版本修复。React 团队建议开发者立即升级，并说明了受影响的框架包括 Next.js、React Router、Waku 等。

[以下是方便搜索索引的大纲(AI 生成)，请读原文]

1. 漏洞概述与影响范围
• 披露的漏洞是针对 React Server Components 的未授权远程代码执行 (Remote Code Execution, RCE) 问题。
• 漏洞编号为 CVE-2025-55182，CVSS 评分为 10.0（极高严重度）。
• 所有使用 RSC 的 React 应用，即使没有定义特定 Server Function 接口，也可能受影响。

2. 受影响版本与安全修复
• 受影响版本：19.0、19.1.0、19.1.1、19.2.0。
• 修复版本：19.0.1、19.1.2、19.2.1。
• 修复建议：立即升级至修复版本的 react-server-dom-webpack、react-server-dom-parcel、react-server-dom-turbopack。

3. 受影响的框架与构建工具
• 部分框架与构建工具依赖或内置受影响包，包含 Next.js、React Router、Waku、@parcel/rsc、@vitejs/plugin-rsc、rwsdk。
• React 团队后续将更新具体升级指令。

4. 技术细节与漏洞原理
• RSC 机制允许客户端通过 HTTP 请求触发服务器端函数。
• 漏洞源于 React 在反序列化客户端请求载荷 (payload) 时的处理缺陷，导致攻击者可执行任意代码。
• 目前细节暂未完全公开，以防在修复完成前遭滥用。

5. 漏洞披露时间线
• 11 月 29 日：由安全研究员 Lachlan Davidson 通过 Meta Bug Bounty 计划报告漏洞。
• 11 月 30 日：Meta 安全部门确认漏洞并与 React 团队协作修复。
• 12 月 1 日：完成修复并与受影响项目共同测试与部署缓解措施。
• 12 月 3 日：在 npm 发布修复版本并正式公开 CVE。

6. 致谢与归属
• 感谢安全研究员 Lachlan Davidson 的发现、报告及协助修复贡献。

author The React Team

react.dev

Critical Security Vulnerability in React Server Components – React

The library for web and native user interfaces

#demo #codepen #WebGL #前端
Cinematic Ocean Scroll Scene

在这个由 Filip Zrnzevic 创作的交互式 Three.js/GSAP Pen 中，您可以漫步于 JavaScript 海洋，欣赏日落美景，感受宁静祥和的氛围。别忘了尝试各种控件，打造属于您自己的独特体验。

#优质博文 #前端 #CSS #浏览器 #新动态
New in Chrome 143

AI 摘要：Chrome 143 正式发布，本次更新带来了对锚点定位元素（anchor positioned elements）的新式容器查询（anchored fallback container queries），改进了背景图像定位语法（side-relative background-position），并新增对 font-language-override 的支持，使开发者可精确控制字体替代语言标签。在提高 CSS 表现力的同时，也强化了排版的一致性与多语言支持。

[以下是方便搜索索引的大纲(AI 生成)，请读原文]

1. CSS 新特性
• Anchored fallback container queries：新增 @container anchored(fallback)，可基于元素定位的备用状态（position-try-fallbacks）设置不同样式，用于调整锚点元素的连线或动画表现。
• Side-relative background positioning：现在可在 background-position-x/y 长属性中直接使用相对边位置语法（如 left 30px、bottom 20px），提高图像定位灵活性，该特性现已进入 Baseline 新可用级别。
• Font language override：新增 font-language-override 属性，允许为 OpenType 字形替换指定自定义四字语言代码，从而覆盖系统语言设置，便于实现多语言、特殊字体排版控制。

2. 版本信息与资源链接
• 详细更新内容见 Chrome 143 release notes。
• 开发者工具更新详情：What's new in Chrome DevTools (143)。
• 功能状态更新在 ChromeStatus.com。
• Chrome release calendar 提供未来版本发布时间表。

3. 社区与后续更新
• 推荐订阅 Chrome Developers YouTube channel 获取最新视频提示。
• 关注 Chrome 团队在 X 或 LinkedIn 的最新发布。
• 官方将于 Chrome 144 发布时继续更新新功能说明。

author Rachel Andrew

Chrome for Developers

New in Chrome 143  |  Blog  |  Chrome for Developers

CSS anchored fallback container queries, side-relative positioning for background position longhands, and more.

#优质博文 #CSS #前端 #新特性
Gallery of Skewed Images with Hover Effect

AI 摘要：本文展示了如何利用现代 CSS 的新特性 corner-shape 创建一个具备悬停 (hover) 交互的倾斜图片库。通过使用逻辑属性和自定义变量，只需少量代码即可实现具有方向感知 (direction-aware) 的图像倾斜效果。当用户悬停图片时，相邻形态会流畅过渡，视觉上极具动感。文末还比较了使用 clip-path 的替代实现，强调虽然兼容性更好，但缺乏方向感知的智能特性。

[以下是方便搜索索引的大纲(AI 生成)，请读原文]

1. 组件与功能简介
• 主题为一个倾斜 (skewed) 图片库，展示如何简单实现经典布局。
• 利用现代 CSS 新属性 corner-shape 让图片边角自动响应文字方向。
• 通过 flex 布局与 transition 结合，实现平滑扩展的悬停动画。

2. 核心实现原理
• 定义变量 --s 控制倾斜程度和形状曲率。
• 使用逻辑属性如 border-start-start-radius、border-end-end-radius 确保布局在不同书写方向中正常表现。
• 通过伪类 :hover、:has() 与相邻选择器的配合，让图片在交互时动态调整边形与间距。

3. 替代方案与兼容性
• 提供使用 clip-path 的另一种实现方法。
• 虽然 clip-path 方式浏览器支持度较高，但不具备方向感知能力。
• 建议根据实际兼容需求在项目中选择适合的实现。

4. 延伸与参考
• 推荐阅读作者的其他作品：Direction-Aware Arrow Shape using corner-shape 与 Dynamic Tooltip Position with Anchor Positioning IV。
• 这些示例共同展示了现代 CSS 如何简化复杂动效组件的实现。

author Temani Afif

Css-Tip

Gallery of Skewed Images with Hover Effect

Using modern CSS and corner-shape to add a fancy galley of images with a reveal hover effect

#优质博文 #数据库工具 #Electron #全栈 #tools #开源
data-peek

一个为开发者设计的轻量级桌面数据库客户端应用，支持 PostgreSQL、MySQL 与 Microsoft SQL Server。功能包括 SQL 查询编辑、多标签页、行内编辑、ERD 关系图可视化、查询计划分析、快捷键等。
采用 Electron + React + TypeScript 技术栈构建，UI 使用 shadcn/ui 与 Tailwind CSS。
项目开源（MIT License），鼓励社区贡献并提供商业使用许可。

author Rohithgilla12
Source

GitHub

GitHub - Rohithgilla12/data-peek: A minimal, fast, database client desktop application. Built for developers who want to quickly…

A minimal, fast, database client desktop application. Built for developers who want to quickly peek at their data without the bloat. - Rohithgilla12/data-peek

#优质博文 #AI #上下文工程 #ClaudeCode
Writing a good CLAUDE.md

AI 摘要：本文介绍了如何编写一个高质量的 CLAUDE.md （或AGENTS.md）文件，以帮助大型语言模型如 Claude 在每次会话中准确理解项目上下文。作者强调 Claude 是无状态（stateless）的，需要通过 CLAUDE.md 主动引导项目背景和结构。文中指出主文件应聚焦通用信息、减少冗余指令、避免让模型充当代码检查工具，并提出了“渐进揭示(Progressive Disclosure)”原则来管理上下文信息。结论是：精简、聚焦、人工精心编写的 CLAUDE.md 才能真正成为助力开发的高杠杆点。

[以下是方便搜索索引的大纲(AI 生成)，请读原文]

1. LLM 基础与 CLAUDE.md 的角色
• 强调 LLM 是无状态的，推理时并不会记忆过往对话。
• CLAUDE.md 文件是让模型理解代码库的唯一常驻入口，每次对话都会自动加载。
• 它的作用类似于为 Claude 提供项目结构图与工作指南。

2. CLAUDE.md 的内容原则：WHAT / WHY / HOW
• WHAT：介绍项目栈、架构与子模块结构，是 Claude 的“路线图”。
• WHY：说明项目目标与各部分用途，帮助 Claude 理解设计动机。
• HOW：告诉 Claude 如何执行任务，如构建流程、测试方式、工具链（例如使用 bun 还是 node）。
• 提醒不要塞入所有命令，应保持“够用、通用、可解释”。

3. Claude 忽略 CLAUDE.md 的原因及机制
• Claude 会根据系统提醒(<system-reminder>)判断上下文是否相关。
• 若文件含过多不相关信息，Claude 会选择性忽略。
• 这种机制是为防止用户使用 CLAUDE.md 添加无关“热修复”指令所设计。

4. 编写高质量 CLAUDE.md 的建议
• 遵循 context engineering best practices。
• 少即是多 (Less is more)：避免过多指令或与代码无关的规则。
• 研究表明 LLM 对 150–200 条指令的响应最为稳定，超过会急剧下降。
• Claude Code 的系统提示占掉约 50 条指令空间，因此应控制在极简范围内。

5. 文件长度与通用性建议
• 上下文窗口应专注于高相关的内容，而非填充冗余背景。
• 建议文件 <300 行，理想情况下 <60 行。
• 仅包含“通用适用”的指令与信息。

6. 渐进揭示 (Progressive Disclosure) 原则
• 将不同任务的指令拆分为独立的 Markdown 文件（如 agent_docs/ 目录）。
• 在主文件中只列出这些文件及简要说明，让 Claude 按需访问。
• 避免代码复制，推荐使用 file:line 引用；引用比拷贝更可维护。

7. Claude 不是代码检查工具
• 不应让 Claude 替代 linter 或 formatter。
• 代码风格应由确定性工具（如 Biome）自动处理。
• 可使用 Stop hook 或 Slash Command 将检查与格式化过程外挂给 Claude 参考，而非直接放入主文档中。

8. 避免自动生成或使用 /init
• 自动生成的文件通常内容冗余或缺乏针对性。
• CLAUDE.md 是高杠杆点，一旦草率配置，会对所有阶段输出产生负面连锁影响。
• 建议人工精雕细琢每一行指令，使其精准可靠。

9. 结论与最佳实践总结
• 明确项目的 WHY / WHAT / HOW。
• 内容简洁、普适、避免多余。
• 采用渐进式信息揭示策略。
• 使用独立工具执行语法或格式检查任务。
• 谨慎维护 CLAUDE.md——它影响整个代理（agent）表现的核心。

author Kyle Mistele

www.humanlayer.dev

Writing a good CLAUDE.md

`CLAUDE.md` is a high-leverage configuration point for Claude Code. Learning how to write a good `CLAUDE.md` (or `AGENTS.md`) is a key skill for agent-enabled software engineering.

#碎碎念
我干过这种事儿？
太幼稚啦！

#优质博文 #前端 #AI #工程化 #bun #新动态
Bun 被 Anthropic 收购。
Bun is joining Anthropic

AI 摘要：Bun 宣布被 Anthropic 收购，将作为 Claude Code、Claude Agent SDK 等产品的核心基础设施。Bun 保持开源与 MIT 许可证，团队与路线图不变，继续专注于高性能 JavaScript 工具和 Node.js 兼容性建设。此次加入为 Bun 带来长期稳定性与更充足资源，也让团队处于 AI 编码革命的前线，加速产品迭代，助力 AI 驱动的开发模式未来。

[以下是方便搜索索引的大纲(AI 生成)，请读原文]

1. 加入 Anthropic 的背景与不变之处
• Anthropic 收购 Bun，旨在让其成为 Claude Code 与未来 AI 编程工具的运行基础。
• Bun 将继续开源（MIT 许可）、在 GitHub 公开开发，保持原团队管理与代码维护。
• 路线图不变，持续聚焦高性能 JavaScript 工具与 Node.js 替代能力。

2. 与 Anthropic 合作后的变化
• 更紧密参与 Claude Code 与 Claude Agent SDK 的性能优化，让工具更快更轻。
• 获得 AI 工具一手开发动态，Bun 能优先适配未来 AI 编程需求。
• 加速发布周期，强化生态深度。

3. Bun 的起源与演进
• 起点是开发浏览器 voxel 游戏时的性能瓶颈，促生对编译与运行时系统的探索。
• 从 esbuild 移植 JSX/TypeScript 编译器到 Zig，用 JavaScriptCore 构建自有运行时。
• 2022 年发布 Bun v0.1，集打包器、编译器、运行时、测试与包管理于一体。
• 后续版本：
• v1.0（2023 年）正式稳定，融资并扩张团队；
• v1.1 补齐 Windows 支持；
• v1.2 强化 Node.js 兼容与扩展数据库客户端；
• v1.3 加入前端开发服务器、Redis/MySQL 驱动，生产应用激增。

4. AI 编码工具的崛起与契合
• 2024 年后 AI 编码工具突飞猛进，Bun 的单文件可执行特性非常适合 CLI 与 Agent 分发。
• Claude Code、FactoryAI、OpenCode 等关键 AI 工具均基于 Bun。
• 团队自用 Claude Code 实现自动提交与错误修复，提升开发效率。

5. 可持续性与发展方向
• Bun 至今无直接营收，原计划构建云产品，但 AI 生态发展已重塑商业逻辑。
• 加入 Anthropic 避免了 VC 变现压力，转而获得长期稳定支持与核心地位。
• 与其在未来 AI 开发趋势之外摸索，不如进入中心参与制定。

6. 未来展望与愿景
• 目标成为 AI 时代的标准运行时，让 Bun 承载“AI 驱动软件开发”的基础层。
• Anthropic 为其提供长期资源、战略支持与招聘扩展。
• 持续对社区开放、保持 Node.js 兼容、加速工具链性能提升。
• 预期形态类似「Claude Code <> Bun」关系，类比于「Chrome <> V8」等组合。

author Jarred Sumner

Bun

Bun is joining Anthropic

Bun has been acquired by Anthropic. Anthropic is betting on Bun as the infrastructure powering Claude Code, Claude Agent SDK, and future AI coding products & tools.

WeTab / Infinity 产品团队回应浏览器扩展后门事件：Clean Master 恶意更新系第三方所为

WeTab / Infinity 产品团队12 月 2 日发布声明，回应国外安全公司将 Clean Master、WeTab、Infinity 等浏览器扩展与恶意活动关联的指控。该公司称，Clean Master 在 2024 年后推送的恶意更新并非由原团队发布。

据声明，Clean Master 的 Chrome 版本已被整体出售给第三方，该公司自出售完成后不再拥有任何控制权。Edge 版本已于 2024 年主动下架。而 WeTab 与 Infinity 扩展由公司团队独立开发运营，代码架构与早期 Clean Master 完全不同，经内部安全自查未发现恶意行为。目前两款扩展因开发者账号受 Clean Master 事件波及而被临时下架，公司正积极沟通恢复上架。

WeTab / Infinity 产品团队

🍀在花频道 🍵茶馆 📮投稿新鲜事

#codepen #demo #CSS #前端 #新特性
Can You Build A Swipe UI With Only CSS?

这个 Codepen 例子使用了现代 CSS 的 Scroll Snap (滚动捕捉) 和 Container Queries (容器查询) 特性，来实现类似原生应用的滑动操作（如左滑删除、右滑收藏）

虽然 CSS 处理了滑动交互，但浏览器默认的滚动位置通常是 0（最左边）。因为左边有一个按钮，所以默认会显示左边的红色按钮。这段 JS 代码在页面加载时，自动将滚动条位置设置到中间元素的位置，确保用户一开始看到的是正常内容，而不是操作按钮。（注：视频中是说在 Safari 上的位置）

视频讲解在这里

这种方式比传统的监听 touchmove 事件来计算位移要流畅得多，因为滚动是在合成线程上处理的。

Refs:
1. Practical CSS Scroll Snapping
2. CSS scroll snap
3. https://web.dev/articles/rendering-performance#3_js_css_style_composite

codepen.io

Swiper

...

#优质博文 #React #前端
好文
React has changed, your Hooks should too

AI 摘要：文章指出当前主流项目仍以传统方式使用 React Hooks（如滥用 useEffect），忽视了 React 在并发模式与异步数据处理上的演变。作者从设计理念出发，提出现代 Hook 的核心精神是“架构化的状态与逻辑管理”，强调使用 useSyncExternalStore、useDeferredValue、useEffectEvent 等新 API 优化性能和可测试性，鼓励开发者更多关注派生状态（derived state）而非副作用（side effects），并顺势迎接以数据为中心的 React 架构。

[以下是方便搜索索引的大纲（AI 生成），请读原文]

1. Hook 的角色转变与 React 的新方向
• Hooks 不只是生命周期函数重写，而是模块化、架构化的设计思想。
• React 18/19 的并发特性改变了异步数据处理逻辑，Server Components 与 use() 带来更高层数据抽象。
• 目标是构建“数据先行”的渲染流程，而非依靠组件内部副作用。

2. useEffect 的陷阱与替代方案
• 常见问题是将数据请求、派生计算塞入 useEffect，导致过度触发渲染。
• React 的最佳实践是：所有可在渲染阶段派生的内容应在渲染过程中完成，而非放入 effect 中。
• 引入 useEffectEvent 以访问最新的 state/props 而不触发额外渲染。
• 使用 useMemo、useCallback 处理纯计算逻辑，减少组件不必要的波动。

3. 自定义 Hooks：从重用到封装
• 自定义 Hook 不只是提炼通用逻辑，更是对业务域逻辑的封装。
• 示例：将 window 尺寸监听封装为 useWindowWidth，实现 UI 与逻辑分离。
• 优点包括更高的可测试性以及更干净的组件结构。

4. 外部订阅与 useSyncExternalStore
• React 18 新增 useSyncExternalStore 解决数据源订阅同步、性能与 tearing 问题。
• 适用于浏览器 API（如 matchMedia）、外部状态管理库（Redux、Zustand）等。
• 提供可靠的订阅模式与一致的渲染行为。

5. 并发工具与性能优化
• 使用 startTransition 与 useDeferredValue 在高频输入或筛选操作中保持响应式体验。
• startTransition() 用于延后状态更新，useDeferredValue() 延后派生计算。
• 合理组合能避免输入滞后，同时保护性能。

6. 可测试、可调试的 Hook 架构
• 将业务逻辑封装为 Hooks，以便隔离测试并增强可维护性。
• 借助 React DevTools 检查自定义 Hook 状态流动。
• 提倡将上下文逻辑（如认证、数据提供）提炼为 provider 级 Hook，例如 useAuthProvider。

7. 数据优先的 React 应用与未来趋势
• React 正向 Server Components、Action-based 数据流演进，弱化客户端副作用依赖。
• 新 API：[use()](https://react.dev/reference/react/use)、useActionState、useEffectEvent 等用于处理并发与异步状态。
• 重点是减少 “万能 useEffect” 模式，构建清晰、声明式的数据驱动结构。

8. Hook 作为架构模式
• Hooks 体现的是一种思考方式：派生状态应在渲染时生成，副作用仅限外部交互。
• 推荐模式：小而专注的 Hooks、明确的客户端/服务端边界、结合并发机制以优化用户体验。
• React 正在从“组件驱动”走向“数据驱动”阶段，现代 Hooks 是这种转变的核心载体。

author Matt Smith

Allthingssmitty

React has changed, your Hooks should too - Matt Smith

Modern React has moved beyond overusing useEffect. Discover the Hook patterns that enable cleaner logic, fewer bugs, and scalable architecture in 2026.

#优质博文 #CSS #前端 #SVG
这把 Safari 居然打赢了（草
Non-Square Image Blur Extensions

AI 摘要：本文由 Ana Tudor 撰写，灵感来自 Vivi Tseng 的 CodePen 实验，探索如何用极简的 CSS 实现一种“非正方形图片模糊扩展”效果——图片在较短边方向通过自身的模糊副本自然填补为方形背景。文章逐步从理论四行 CSS 实现入手，延伸到浏览器兼容性问题、替代方案（CSS 变量、SVG filter）以及跨浏览器处理方式，并在最后提出动态方向渐隐和计算图像纵横比的方案。整体展示了 CSS filter、backdrop-filter、container query、mask、attr() 等高级特性的组合运用。

[以下是方便搜索索引的大纲(AI 生成)，请读原文]

1. 简介与问题动机
• 作者想用单个 img 元素与最少的 CSS 声明，实现非方形图片的模糊填充背景。
• 对比现有需额外元素的方案，希望找到更优雅的实现。
• 展示目标效果：图片保持比例，四周模糊延伸成方形视觉。

2. 基本实现思路（四行 CSS 方案）
• 第一步：固定 width: min(100%, 23em) 以控制尺寸。
• 第二步：设定 aspect-ratio: 1 让图片框为正方形。
• 第三步：使用 object-fit: contain 保持图片纵横比并留白。
• 第四步：用 background: filter(src(attr(src)), blur() …) 将自身模糊版本作为背景。
• 说明 filter() 与 src() 的 CSS 机制、attr() 的动态属性取参功能。

3. 浏览器支持问题（Support Sadness）
• Safari 支持 filter()，Chromium 家族支持新版 attr()，但尚无浏览器支持全部特性。
• Chrome、Firefox、Safari 当前的支持状态 bug 链接一览。
• 因此四行完美方案暂无法跨浏览器落地。

4. 实用替代办法（Current Options）
• 用 CSS 变量 --img 保存图片 URL 代替不支持的 src(attr(src))。
• Safari-only 测试用 Epiphany 浏览器可验证。
• 模糊边缘透明问题原因：blur() 会在边缘像素引入透明度。
• 使用 SVG filter + edgeMode="duplicate" 替代 CSS blur() 修复边缘透明。
• 展示最终无半透明边缘的 Safari 可运行版本 Demo。

5. 跨浏览器版本设计（backdrop-filter 方案）
• 结构：在 .wrap 容器上设置背景为图片，img 叠在上面。
• backdrop-filter: blur() 模糊容器背景，实现视觉层叠。
• 修复 inline 元素底部空隙，建议 display: grid 保持对齐。
• 完整方案兼容主流浏览器，效果与原始类似。

6. 增强与 fading 效果
• 实现图片边缘平滑过渡到模糊背景：利用伪元素 ::before。
• 采用 grid 堆叠控制层级，通过 z-index 调整前后关系。
• 利用 mask: linear-gradient() 按方向渐隐；
• 若已知方向，可用 data-orientation 属性。
• 若有已知宽高比，可利用 sign() 函数自动判定横竖。
• 特殊情况：正方形图片需中间值（--bit 标志）避免对角线渐隐。

7. 当图像比例未知（Unknown Aspect Ratio）
• 提出两种策略：
• SVG filter 模糊生成 alpha mask（Safari 专用）。
• 详细分解 feGaussianBlur 和 feComponentTransfer 原理；
• 调整 alpha 映射以强化平滑透明带；
• 结果非线性渐变更自然但控制困难。
• 纯 CSS 容器比例计算方案：
• 结构上引入额外 .rect 容器与隐藏副本 img；
• 利用 container query 的 100cqw/100cqh 算出纵横比；
• 自动生成 mask 渐隐角度，适配所有主流浏览器。

8. 拓展与实验方向
• 可在 backdrop-filter 链中加入更多视觉特效（如 sepia()、hue-rotate()）。
• 展望未来 CSS 函数全面支持后的更简洁实现。

author Ana Tudor

Frontend Masters

Non-Square Image Blur Extensions

I recently came across this CodePen demo by Vivi Tseng, which creates the blur extension effect by placing a square div with a blur() beneath the img element and I couldn’t help but think a simpler solution should be possible with a single img element and…

#优质博文 #浏览器扩展 #恶意软件 #安全 #插件
老生常谈的扩展投毒问题（
「信任本身是最大的漏洞」

用 Infinity 新标签页 (Pro) 和We Tab 新标签页的注意啦，扩展被黑产投毒啦

4.3 Million Browsers Infected: Inside ShadyPanda's 7‑Year Malware Campaign

AI 摘要：Koi Security 揭露了名为 ShadyPanda 的威胁行为者在过去七年间通过伪装的浏览器扩展发动攻击，从最初的联盟欺诈到最终的远程代码执行 (RCE, Remote Code Execution) 与间谍软件(SPYWARE) 操控，总计感染了超过 430 万 Chrome 与 Edge 用户。该攻击者利用浏览器商店的信任与自动更新机制，先积累用户再通过静默更新“武器化”扩展。研究揭示，此类威胁并非单一事件，而是浏览器扩展生态系统的结构性安全缺陷——信任被系统性滥用。

[以下是方便搜索索引的大纲 (AI 生成)，请读原文]

1. 威胁概述与发现经过
• Koi 研究团队追踪到长达七年的浏览器扩展攻击链，命名为 ShadyPanda。
• 总计影响 430 万 Chrome 与 Edge 用户，两条主要恶意活动：一为 RCE 后门感染 30 万用户，另一为间谍软件监控 400 万用户。
• 攻击者通过合法推广与 Google 认证获得用户信任，再利用静默更新执行恶意代码。

2. 第一阶段：壁纸欺诈与联盟滥用 (2023)
• 共 145 个伪装成壁纸或效率工具的扩展程序，在 Chrome 与 Edge 市场上发布。
• 利用联盟营销注入追踪代码、窃取佣金，并通过 Google Analytics 收集与兜售浏览数据。
• 攻击者学会了三大关键经验：审核只关注初次上架；用户信任“高安装量+好评”；伪装时间越长危害越大。

3. 第二阶段：搜索劫持与主动控制 (2024 初)
• 改以控制浏览器核心行为为目标，如 Infinity V+ 劫持搜索请求、篡改结果。
• 实施 Cookie 数据外泄与实时键入监控，通过明文 HTTP 发送用户输入数据。
• 攻击者虽被多次下架，但逐渐提升隐蔽性与数据利用能力。

4. 第三阶段：长线布局与后门植入 (2018–2024)
• 多个扩展（如 Clean Master）先以合法身份运营多年，获得“精选(Featured)”与“验证(Verified)”标记。
• 于 2024 年中期推送恶意更新，触发远程代码执行框架。
• 恶意负载可每小时从 C&C (Command and Control) 服务器获取命令，具备完全浏览器访问权限。
• 收集完整浏览数据、设备指纹、加密外传；能躲避分析并执行中间人攻击 (MITM)。
• 尽管部分扩展被移除，后端基础设施仍活跃于受感染浏览器。

5. 第四阶段：间谍网络与大规模监控 (2023–今)
• Clean Master 背后的同一发行商 Starlab Technology 推出 5 款新扩展，在 Edge 市场累积超 400 万安装。
• WeTab 新标签页 alone 拥有 300 万用户，持续收集访问记录、搜索输入、点击轨迹与完整指纹。
• 数据实时传输至多个中国服务器与 Google Analytics，用于行为分析与潜在情报搜集。
• 当前仍在 Edge 市场上架，具有全面权限且可随时被“武器化”。

6. 七年战术演进与系统漏洞
• 几个阶段由浅入深：从简单的联盟欺诈到长期潜伏与数据控制。
• 共通特征：代码签名相似、基础架构重叠、混淆方式演化一致。
• 核心问题在于浏览器扩展生态的信任模型：审核仅限初期、缺乏动态监控。
• 自动更新机制成为主要攻击向量，无需钓鱼或社工即可实现大范围感染。

7. 结语与安全启示
• 根本教训：信任本身是最大的漏洞。
• 静态代码审核无法应对多年潜伏的攻击链。
• Koi Security 推出行为分析与风险评分方案，关注“扩展安装后实际行为”而非声称功能。
• 呼吁浏览器平台与企业加大对行为监测与扩展生态安全的关注。

author Koi Security Research Team

小众软件官方论坛

用 Infinity 新标签页 (Pro) 和We Tab 新标签页的注意啦，扩展被黑产投毒啦

扩展会上传包括网页浏览历史、搜索记录，键盘按键记录、鼠标点击位置（账号密码）、本地/会话存储和 cookie等多种隐私数据。劫持多种购物网站的返利链接 根据报道整个布局可能从18、19年就开始，亦或者是黑产在24年逐步收购了这些知名项目进行投毒。 消息来源：ShadyPanda 浏览器扩展在恶意活动中累计安装 430 万次