呜啦!日常碎碎念,偶尔掉落优质前端博文推荐、学习资源等
网页:https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦~
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态

图频:Cosine 🎨 Gallery @CosineGallery
猫片: @cosine_cat
联系频道主:@cosine_yu
#碎碎念 #AI #ClaudeCode
感谢 happy,是真好用啊,上厕所也能使唤 AI!
感觉比之前其他用过的都好用。
https://github.com/slopus/happy
#碎碎念 #追番
现在向我们走来的,是 2026 续作年!

2026年1月新番表


想看
我推的孩子 第3期
葬送的芙莉莲 第2期
公主大人 接下来是“拷问”时间 第2期
神八小妹不可怕
相反的你和我
超时空辉夜姬!

还有不在这个季度的
孤独摇滚 S2
入间同学入魔了! S4
药屋少女的呢喃 S3
100女友 S3
欢迎来到实力至上主义的教室 S4


什么时候能看到游戏人生第二季
#前端 #demo #codepen #CSS
CSS 之神在上,这太酷了。
Animated Hover Disclosures

jhey ʕ•ᴥ•ʔ(@jh3yy): transitioning CSS grid-template-columns on :focus/:hover means the parent container won't change size 🏅


https://fixupx.com/jh3yy/status/1940066323658158198
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 CVE-2025-55182 React Server Components RCE POC
#前端 #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 圣诞树点亮视频拉开了节日季的序幕。将鼠标悬停在树上,即可让它闪耀夺目!
#优质博文 #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 Critical Security Vulnerability in React Server Components – React
#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 New in Chrome 143  |  Blog  |  Chrome for Developers
#优质博文 #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-shapeDynamic Tooltip Position with Anchor Positioning IV
• 这些示例共同展示了现代 CSS 如何简化复杂动效组件的实现。


author Temani Afif Gallery of Skewed Images with Hover Effect
Back to Top