cosine - 前端人の日常频道

#前端 #安全 #新动态 #React React 在研究 React2Shell 过程中披露了两个新的 RSC 漏洞：CVE‑2025‑55184 与 CVE‑2025‑67779（高危 - 拒绝服务）以及 CVE‑2025‑55183（中危 - 源代码泄露）。这些缺陷可被恶意 HTTP 请求触发，导致服务器无限循环或泄露服务器函数内部代码。React 已在 19.0.3、19.1.4、19.2.3 版本中修复，受影响的框架与打包器（如 Next、React‑Router、Vite 等）亦需同步升级。 …

#碎碎念 #前端
https://fixupx.com/reactjs/status/1999267418846449786

无恶意吐槽：
在研究 React2Shell 的时候发现两个新的漏洞好笑程度：100%
发现针对新的 DoS 漏洞的修复并未彻底保护某些场景，导致又出现新的漏洞（CVE‑2025‑67779）的好笑程度：1000%

好笑吗，不，我只看到了周五的工作量又增多了

#前端 #安全 #新动态 #React
React 在研究 React2Shell 过程中披露了两个新的 RSC 漏洞：CVE‑2025‑55184 与 CVE‑2025‑67779（高危 - 拒绝服务）以及 CVE‑2025‑55183（中危 - 源代码泄露）。这些缺陷可被恶意 HTTP 请求触发，导致服务器无限循环或泄露服务器函数内部代码。React 已在 19.0.3、19.1.4、19.2.3 版本中修复，受影响的框架与打包器（如 Next、React‑Router、Vite 等）亦需同步升级。

• 拒绝服务（高危）： CVE-2025-55184 与 CVE-2025-67779 (CVSS 7.5) 可被恶意 HTTP 请求触发，导致服务器无限循环
• 源代码暴露（中等）： CVE-2025-55183 (CVSS 5.3) 可能会泄露服务器函数内部代码，源代码中硬编码的 secret 可能会被暴露，运行时 secret 如 process.env.SECRET不受影响。

官方解释称：

重大漏洞披露后，往往会发现后续漏洞。当一个重大漏洞被披露后，研究人员会仔细检查相邻的代码路径，寻找变种的利用技术，以测试初始缓解措施是否可以被绕过。
这种模式在整个行业中普遍存在。例如，在 Log4Shell 之后，随着社区对原始修复程序的审查，又报告了其他 CVE。额外的披露可能会令人沮丧，但这通常是健康应对机制的标志。

只有源代码中的 secret 才能被泄露。
源代码中硬编码的 secret 可能会被暴露，但运行时 secret 如 process.env.SECRET不受影响。
暴露代码的范围仅限于服务器函数内部的代码，这可能包括其他功能，具体取决于捆绑器提供的内联支持程度。
一定要核对生产包。

https://nextjs.org/blog/security-update-2025-12-11

Next 用户可以使用 npx fix-react2shell-next 进行升级。

react.dev

Denial of Service and Source Code Exposure in React Server Components – React

The library for web and native user interfaces

#codepen #demo #CSS #动画 #前端
写……写轮眼（x）
花瓣

Riley Shaw 分享了一朵梦幻般的 CSS 和 JS 花朵，花瓣如万花筒般旋转 🪷

#codepen #demo #WebGL #shader #动画 #前端
美丽，有点想改改色放博客头图。
霓虹正弦波效果 GLSL

Fabio E Zola 的这段 GLSL 动画中，闪烁的正弦波脉动着。您可以暂停动画、截屏，或从顶部的控制面板切换像素比例。

cosine - 前端人の日常频道

#博客更新 #AI 我的 Claude Code 使用小记 2 距离我 8 月份写下《我的 Claude Code 使用小记》已经过去了近 4 个月，在这段时间的高强度使用后，是时候分享一些新的体验了。 很短，并且比较支离破碎流水账，主要是为了记录。

#碎碎念 #AI
补充更新一下，Happy CLI 0.11.2 自带的版本是没有 Opus 4.5 只有 Opus 4.1 是因为自带的版本太旧，可以参考这个 issue
https://github.com/slopus/happy-cli/issues/84

cd $(npm root -g)/happy-coder && npm install @anthropic-ai/claude-code@latest --save

更新就可以用上 Opus 4.5 了！

#前端 #demo #CSS #SVG
帅

jhey ʕ•ᴥ•ʔ (@jh3yy): toggle 🌛
brought to life with CSS && SVG

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

🧵 Thread • FixupX

jhey ʕ•ᴥ•ʔ (@jh3yy)

toggle 🌛

brought to life with CSS && SVG

Quoting Viewport UI (@viewportui)

Dark mode toggle by @cerpow

There’s no such thing as over-the-top. I wonder if @frrrnd can implement a similar version on our site? 👀

Just kidding, Fer.

#优质博文 #CSS #前端 #新特性
草案
Fit width text in 1 line of CSS

AI 摘要：本文介绍了 CSS 实验性新属性 text-grow 和 text-shrink，它们旨在用一行代码解决文本与容器宽度匹配的经典布局问题。文章详细解释了其语法、可选值和工作原理，同时也指出了当前存在的开放性问题和可访问性考量，并鼓励开发者参与相关讨论。

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

1. 新属性介绍与语法
• 介绍了实验性 CSS 属性 text-grow 和 text-shrink，它们可以简洁地让文本宽度适配容器。
• 详细解析了语法结构：text-grow: <fit-target> <fit-method>? <length>?;，并解释了 <fit-target> (如 per-line, consistent)、 <fit-method> (如 scale, font-size) 和可选 <length> 参数的含义。

2. 开放问题与社区讨论
• 指出了该属性在可访问性（如用户放大字体时）和具体行为（如最后一行、行高、内联图片的处理）上仍存在待解决的问题。
• 汇总了社区（如 Una Kravets, Donnie D’Amato）对该技术适用场景（如更适合打印样式）的讨论和思考，并提供了参与 W3C GitHub 议题讨论的链接。

3. 发展脉络与展望
• 回顾了从过去依赖 FitText.js 等复杂方案到如今一行 CSS 可能解决问题的技术演进。
• 整体表达了对这一新属性简化前端开发工作流的期待，同时保持了对其成熟度审慎乐观的态度。

author Geoff Graham

CSS-Tricks

Fit width text in 1 line of CSS | CSS-Tricks

The Chrome team recently prototyped a working solution for fitting text to the width of a container in CSS using a text-grow property.

#优质博文 #CSS #前端 #新特性
酷！
CSS Wrapped 2025

AI 摘要：本文是 Chrome 团队对 2025 年即将到来或已部分实现的 CSS 新特性的全面总结。文章涵盖了从交互增强（如无 JavaScript 的对话框控制、兴趣触发器）、UI 组件现代化（如完全可自定义的 select 元素、原生 CSS 轮播）、布局与定位革新（如锚点容器查询、滚动状态查询），到 CSS 语言能力提升（如 if() 条件语句、自定义函数、增强的 attr() 函数）等多个方面。这些特性旨在让开发者能够用更声明式、更简洁且高性能的代码构建更丰富、更易访问的 Web 体验。

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

1. 交互与行为增强
• Invoker Commands**：通过 commandfor 和 command 属性，无需 JavaScript 即可声明式地控制 <dialog> 和 [popover] 元素的显示、隐藏等操作，并支持自定义命令。
• Dialog Light Dismiss：为 <dialog> 元素新增 closedby 属性，实现类似 Popover 的“轻关闭”行为（点击外部或按 ESC 键关闭）。
• Interest Invokers：通过 interestfor 属性，为按钮或链接提供声明式的悬停/聚焦触发 UI（如工具提示），并可设置 interest-delay 控制延迟。
• ToggleEvent.source：在 ToggleEvent 中新增 source 属性，用于识别触发 popover/dialog/details 切换操作的具体元素。
• DOM State-Preserving Move：新的 moveBefore() DOM API，在移动元素（如 iframe、视频）时能保持其内部状态（播放、焦点等），不会重新加载。

2. UI 组件与控件
• Customizable select：通过 appearance: base-select 解锁对 <select> 元素的完全 CSS 定制，包括下拉列表、选项样式，并支持在 <option> 内使用 HTML 内容。
• ::scroll-marker/button()**：新增 CSS 伪元素，用于创建原生的、可访问的轮播导航按钮和标记点，无需 JavaScript。
• scroll-target-group：将一组锚点链接转换为滚动标记组，结合 :target-current 伪类实现“滚动侦测”高亮效果。
• text-box features：通过 text-box-trim 和 text-box-edge 属性，基于字体的视觉边界（如大写字母高度）精确控制文本垂直对齐，实现完美视觉居中。

3. 布局、定位与滚动
• Anchored container queries：结合 CSS 锚点定位，使用 container-type: anchored 和 @container anchored(fallback: ...) 查询，让元素能根据其定位回退状态（如从底部翻转到顶部）自适应样式。
• Scroll-state queries：通过 container-type: scroll-state，让子元素能查询父容器是否处于“可滚动”、“吸附”或“固定”状态，并据此应用样式。
• scrollIntoView() container：scrollIntoView 方法新增 container: 'nearest' 选项，确保只滚动最近的祖先滚动容器，而非整个视口。
• Stretch sizing keyword：新的 stretch 尺寸关键字，让元素在考虑外边距的情况下填满包含块，不同于 100%。
• corner-shape：新的 corner-shape 属性，提供除圆角外的多种边角形状（如斜面、凹口、圆弧、方圆形），并支持 superellipse() 函数进行精细控制。

4. CSS 语言与表达能力
• Tree counting functions：新增 sibling-index() 和 sibling-count() CSS 函数，用于获取元素在兄弟节点中的索引和总数，简化交错动画等效果。
• Advanced attr() function：增强的 attr() 函数，现在可用于任何 CSS 属性，并能将属性值解析为颜色、长度、数字等特定类型。
• if() statements：新的 CSS if() 函数，内联支持条件判断，可与 media()、supports()、style() 查询结合，简化动态样式逻辑。
• Custom Functions：支持使用 @function 定义自定义 CSS 函数，提高样式代码的复用性和可读性。
• Expanded range syntax：现在样式查询和 if() 语句中支持使用范围语法（如 >, <），允许对自定义属性值进行大小比较。
• shape() function：新的 shape() CSS 函数，用于创建复杂、响应式的裁剪路径，比 clip-path: path() 更易于维护和动画。

5. 动画与过渡
• Nested View Transition Groups：视图过渡 API 支持嵌套的 ::view-transition-group ，通过 view-transition-group: nearest 属性在过渡期间保留 3D 变换和裁剪效果。

author Una Kravets

#优质博文 #design #UX
The f*** off contact page - Nic Chan

AI 摘要：本文作者 Nic Chan 分享了一个早年客户案例，客户是一家服务型设计公司，却执意要模仿大型 SaaS 企业的“劝退式联系页面”（fuck off contact page）——一种通过隐藏真实支持渠道来减少咨询量的设计。作者分析了这种页面为何与客户（服务型公司）获取线索的根本目标相悖，并反思了项目中出现这一问题的根源：折扣报价导致客户不尊重专业意见、未能有效教育客户理解设计流程（如线框图）的价值，以及双方缺乏信任。文章最终倡导设计师应通过公开分享价值观来吸引理念一致的客户。

author Nic Chan

Nic Chan

The f*** off contact page

How to get people to NOT contact you

#优质博文 #前端 #CSS #Astro #ISR #性能优化
想起以前做的 ISR，心血来潮搜一下 Astro 里的 ISR 怎么做，做一下。
On-Demand ISR For Astro on Vercel

AI 摘要：本文详细介绍了如何在 Vercel 平台上为 Astro 静态网站配置按需增量静态再生成 (On-Demand ISR)。文章首先解释了 ISR 和按需 ISR 的概念及其适用场景，然后通过一步步的代码示例，指导读者如何初始化项目、添加 Vercel 适配器并配置 ISR 参数、创建动态页面，以及最关键的部分——如何通过一个受保护的 API 端点来手动触发缓存失效和页面重建，从而实现对静态内容更新时间的精细控制。

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

1. 概念解析
• 什么是 ISR：解释增量静态再生成 (ISR) 的概念，即无需重新构建或部署整个网站即可更新静态内容（如博客文章或 GET API 端点）。
• 什么是按需 ISR：对比传统基于 TTL（生存时间）的 ISR，说明按需 ISR 允许在 TTL 到期前手动使缓存失效并触发重建，从而更精确地控制内容的新鲜度。
• 适用场景：列举按需 ISR 的典型用例，如不常更新但更新后需立即生效的内容，或渲染成本高（计算、时间、外部 API 费用）的频繁访问内容。

2. 项目配置
• 初始化 Astro 项目：使用命令行工具创建一个包含 Tailwind CSS 和 React 的 Astro 项目，并初始化 Git。
• 添加 Vercel 适配器：通过 astro add vercel 命令添加适配器，并在 astro.config.mjs 文件中配置 ISR 参数，包括设置 bypassToken（用于授权缓存失效的密钥）和 exclude（排除 API 路由不被缓存）。

3. 实现与验证
• 创建动态页面：在首页添加一个显示服务器渲染时间戳的组件，用于验证缓存效果。部署后，刷新页面时间戳不变，且响应头 x-vercel-cache 显示 HIT，证实页面来自缓存。
• 实现按需失效端点：创建一个受保护的 API 端点 (/api/invalidate)，该端点接收 POST 请求，内部向目标路由发送带有 x-prerender-revalidate 头（值为 bypassToken）的 HEAD 请求，以触发缓存失效和重建，并验证响应头确认操作成功。
• 测试：通过 curl 命令调用该 API 端点，成功使首页缓存失效，再次访问首页时看到新的时间戳，证明按需 ISR 生效。

author Shawn

Shawn's Blog

On-Demand ISR For Astro on Vercel | Shawn's Blog

Here's how to set on-demand incremental static regeneration for an Astro website when deploying to Vercel.