呜啦!日常碎碎念,偶尔掉落优质前端博文推荐、学习资源等
网页:https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦~
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频:Cosine 🎨 Gallery @CosineGallery
猫片: @cosine_cat
联系频道主:@cosine_yu
网页:https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦~
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态
图频:Cosine 🎨 Gallery @CosineGallery
猫片: @cosine_cat
联系频道主:@cosine_yu
#碎碎念 #追番
现在向我们走来的,是 2026 续作年!
2026年1月新番表
想看
还有不在这个季度的
什么时候能看到游戏人生第二季
现在向我们走来的,是 2026 续作年!
2026年1月新番表
想看
我推的孩子 第3期
葬送的芙莉莲 第2期
公主大人 接下来是“拷问”时间 第2期
神八小妹不可怕
相反的你和我
超时空辉夜姬!
还有不在这个季度的
孤独摇滚 S2
入间同学入魔了! S4
药屋少女的呢喃 S3
100女友 S3
欢迎来到实力至上主义的教室 S4
什么时候能看到游戏人生第二季
#前端 #demo #codepen #CSS
CSS 之神在上,这太酷了。
Animated Hover Disclosures
https://fixupx.com/jh3yy/status/1940066323658158198
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
#优质博文 #前端 #React #安全 #RCE #POC
CVE-2025-55182 React Server Components RCE POC
[以下是方便搜索索引的大纲 (AI 生成),请读原文]
Source
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
#前端 #CSS #demo
这太酷了~
https://fixupx.com/jh3yy/status/1816290576087515620
这太酷了~
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
喜欢
「蝴蝶(冰火歌会)」- 洛天依/沢渡禾安
专辑: 蝴蝶
#网易云音乐 #flac 21.28MB 809.94kbps
走吧就算我们无法让大雨停下
还有我陪你在雨里放肆奔跑啊
地球上天空下我们做一对傻瓜
你我生来时就注定天真而伟大
你啊就算永远无法被世界回答
没关系还有名为自己的魔法
你啊就算下一秒全世界都崩塌
还有我在你身边说我爱你啊
via @Music163bot
#demo #codepen #WebGL #前端
好萌🎄
https://codepen.io/creativeocean/pen/zxqEWYd
好萌
https://codepen.io/creativeocean/pen/zxqEWYd
Tom Miller 用这段精美的 JavaScript 圣诞树点亮视频拉开了节日季的序幕。将鼠标悬停在树上,即可让它闪耀夺目!
https://blog.cloudflare.com/waf-rules-react-vulnerability/
可以使用 Cloudflare Rule 临时拦截 React CVE-2025-55182 漏洞
可以使用 Cloudflare Rule 临时拦截 React CVE-2025-55182 漏洞
#优质博文 #React #安全 #RSC #前端
这就是 R!S!C!(逃
叠甲:任何东西都会有漏洞的啦只是想吐槽一下再说我们也没用 RSC 连服务器组件都没用没影响的没影响的。
Critical Security Vulnerability in React Server Components – React
[以下是方便搜索索引的大纲(AI 生成),请读原文]
author The React Team
这就是 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
#demo #codepen #WebGL #前端
Cinematic Ocean Scroll Scene
Cinematic Ocean Scroll Scene
在这个由 Filip Zrnzevic 创作的交互式 Three.js/GSAP Pen 中,您可以漫步于 JavaScript 海洋,欣赏日落美景,感受宁静祥和的氛围。别忘了尝试各种控件,打造属于您自己的独特体验。
#优质博文 #前端 #CSS #浏览器 #新动态
New in Chrome 143
[以下是方便搜索索引的大纲(AI 生成),请读原文]
author Rachel Andrew
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
#优质博文 #CSS #前端 #新特性
Gallery of Skewed Images with Hover Effect
[以下是方便搜索索引的大纲(AI 生成),请读原文]
author Temani Afif
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