AI 摘要：本文深入探讨了传统双因素认证（2FA）的漏洞（如钓鱼攻击风险），并介绍了更安全的替代方案——通行密钥（Passkeys）。文章通过 WhatsApp、LinkedIn 和 Ubiquiti 的实际案例，详细解析了通行密钥的设置流程、优势（如防钓鱼、跨设备同步）和局限性（如服务间实现差异），并进一步探讨了物理安全密钥（如 YubiKey）的强化作用。最后，作者呼吁用户尽早采用通行密钥，并推动更多服务支持这一技术。

1. 传统 2FA 的漏洞
• 问题描述：通过模拟 Mailchimp 钓鱼攻击案例，说明即使启用 2FA（如验证码），攻击者仍可诱导用户提交动态密码（OTP），从而入侵账户。
• 核心缺陷：OTP 和短信验证码可被钓鱼，无法从根本上抵御社会工程攻击。

2. 通行密钥（Passkeys）的解决方案
• 定义：基于加密技术的数字凭证，存储在设备或密码管理器中，无需手动输入。
• 优势：
• 防钓鱼：密钥与域名绑定，无法被伪造网站窃取。
• 便捷性：支持生物识别（如 Face ID）一键登录。
• 跨设备同步：可通过 iCloud、1Password 等工具多端共享。

3. 通行密钥实践案例
• WhatsApp（移动端）：
• 设置流程：通过 iPhone 的 iCloud Keychain 或 1Password 存储密钥。
• 局限性：部分服务（如 WhatsApp）未提供明确的登录测试路径。
• LinkedIn（PC 端）：
• 混合验证模式：通行密钥与密码共存，仍保留可被钓鱼的 OTP 2FA。
• 用户体验：1Password 自动填充密钥实现秒级登录。
• Ubiquiti（强化 2FA）：
• 完全替代 OTP：通行密钥作为唯一 2FA 方式，支持物理安全密钥（YubiKey）。
• 安全升级：移除邮箱验证，降低中间人攻击风险。

4. 物理安全密钥（U2F）
• 原理：如 YubiKey 通过 USB/NFC 存储通行密钥，需物理接触才能使用。
• 优势：
• 抵御远程攻击：即使密码管理器被入侵，物理密钥仍可保护账户。
• 冗余设计：建议配置多个密钥以防丢失。

5. 通行密钥的推广现状
• 支持平台：1Password 的 passkeys.directory 列出已支持的服务（如 Google、Microsoft）。
• 用户行动建议：
• 优先为关键账户（如邮箱、银行）启用通行密钥。
• 向未支持的服务（如 Twitter）投票施压。

6. 总结与展望
• 防御纵深：通行密钥需与其他安全实践（如警惕钓鱼邮件、使用密码管理器）结合。
• 行业趋势：微软已默认启用无密码登录，通行密钥普及临近拐点。

Troy Hunt

Passkeys for Normal People

Let me start by very simply explaining the problem we're trying to solve with passkeys. Imagine you're logging on to a website like this:

AI 摘要：本期 Frontend Focus 聚焦前沿 CSS 特性（如 margin-trim 和 CSS Carousels）、工具更新（GSAP 免费化、Mantine 8.0）、AI 对前端的影响（状态管理优化、Gemini 2.5 Pro 增强），以及 Web 可访问性新标准（WCAG 3.0 评分模型）。同时涵盖实用教程、性能优化工具和跨文化 UI 设计等多元化内容。

🚀 核心动态
• CSS 实验性特性 margin-trim ：容器裁剪子元素外边距的新属性（Jen Simmons）。
• Are 'CSS Carousels' Accessible? ：Sara Soueidan 探讨 CSS Carousels 当前可访问性与实用性。
• Gemini 2.5 Pro：Google 称其更擅长美学化前端开发。
• AI 状态管理：Alexander T. Williams 提出用 AI 简化复杂状态逻辑。 #AI

📙 文章与教程
• Chrome 137 将支持 reading-flow 和 reading-order 属性（Rachel Andrew）。
• WCAG 3.0：从“合规性”转向“可用性”评分模型（Mikhail Prosmitskiy）。

🧰 工具与资源
• WebTUI：终端风格 CSS 组件库（ASCII 盒子、弹窗等）。
• Bekuto 3D：SVG 转 3D 模型工具（支持 STL/GLTF 导出）。 【眼熟捏】

⚡️ 简讯
• Mozilla 依赖 Google 搜索协议维持 Firefox 生存。
• Astro 框架新特性汇总。
• 上期 CSS "owl" 选择器（* + *）教程视频热度最高。

WebKit

Easier layout with margin-trim

If you write a lot of CSS, you are familiar with those moments when you aren’t quite sure how to accomplish what you want to accomplish.

AI 摘要：本期 React Status 聚焦 React 生态的重要更新与实践指南，涵盖 Mantine 8.0 组件库升级、React 性能优化策略、React Server Components 与 Astro 的对比、数据架构设计等核心内容，同时介绍了 Relay、Tiptap 等工具的最新版本，并汇总了 JavaScript 生态的动态。

1. Mantine 8.0 发布
• 新增 20+ 组件（如 GitHub 风格热力图、树形组件、半圆进度条）和子菜单功能。
• 图表功能增强（集成 Recharts），作者 Vitaly Rtishchev 等。

2. 简讯摘要
• 匿名 Reddit 用户分享大厂 React 招聘流程。
• React Conf 2025 将于 10 月在拉斯维加斯举办。
• Tiptap 3.0 Beta 发布（无头富文本编辑器框架）。

3. 工具与库更新
• react-sounds：为 React 应用添加音效。
• Relay v19：Facebook 的 React/GraphQL 框架，兼容 React 19。
• mono-jsx：服务端 JSX 运行时，支持多环境（Node、Deno 等）。
• PptxGenJS 4.0：JavaScript 生成 PowerPoint 文件。
• 其他：Material UI 7.1（支持 Tailwind CSS 4）、React Modal Sheet 4.4 等。

mantine.dev

Version v8.0.0 | Mantine

React components and hooks library with native dark theme support and focus on usability, accessibility and developer experience

AI 摘要：本期 Node Weekly 聚焦 Node.js 24 发布、AI Agent 开发、JavaScript 生态工具更新（如 Bun、Deno、Llama Stack），以及社区动态（如 Node.js Next 10 调查）等。

1. 社区动态
• Node.js 24 发布 成为新的 Current 版本，替代 EOL 的 v18 和 v23，附带：npm 11、V8 13.6（支持 RegExp.escape、Float16Array 等）、默认暴露 URLPattern API、Undici 7。
• Llama Stack 应用：Meta 的 Llama Stack 是一组统一的 API，用于处理现代 LLM 驱动的堆栈的众多部分，支持 RAG（检索增强生成），Michael Dawson 提供实践指南。 #AI #RAG
• Node.js Next 10 调查：Linux Foundation 发起，征集未来十年 Node.js 发展方向意见。
• Redis 重新开源：v8.0 恢复开源许可。
• GSAP 免费：商业动画库 GSAP 全面开放免费使用。
• ECMAScript 提案：显式资源管理（Stage 3）已在 Chrome 134+ 和 Node 24 实现。
• npm 恶意软件：攻击者仿冒知名库名发布恶意包。

2. 运行时与工具更新
• Bun v1.2.12：增强 Node 兼容性、现在可以通过终端上的 Bun 将浏览器控制台日志流式传输回去。
• Deno 2.3：改进单二进制编译，支持 FFI、Node 原生附加组件和本地 npm 包。
• PGlite 0.3：基于 WASM 的 Postgres，可在浏览器或 Node 中运行。 #WASM
• Prisma v6.7：加速从 Rust 转向 TypeScript。
• SVGO 4.0（SVG 优化）、Jira.js（Jira API 封装）、RedisSMQ（Redis 消息队列）……
• Josh Ceau 的 Operator Lookup 网站使得 JavaScript 运算符查找变得容易，甚至可以找到您以前从未遇到过的运算符，例如 >>>=。

Red Hat Developer

Retrieval-augmented generation with Llama Stack and Node.js | 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. This post covers retrieval-augmented generation

AI 摘要：本文介绍了在 Tailwind CSS 中使用自定义字体的方法，重点讨论了通过本地安装字体和 Web 字体两种方式，并提供了具体的实现步骤和代码示例。

1. 引言
• 作者提到自己搜索“如何在 Tailwind CSS 中使用自定义字体”的需求，并找到了解决方案。
• 问题背景：在 React 项目中，没有全局 CSS 文件的情况下如何添加本地安装的字体。

2. 解决方案
• 方法 1：通过 index.html 文件添加本地字体
• 在 index.html 中插入 <link> 标签引用本地字体文件。
• 适用于 React 项目，且作者认为这种方式更符合标准，尤其是已通过类似方式导入 Web 字体的情况。
• 方法 2：使用 Web 字体
• 通过 CDN 或在线链接导入字体（如 Google Fonts）。
• 需要在 Tailwind 配置文件中扩展字体配置。

3. 潜在问题与建议
• 作者不确定从其他角度看这种方法是否存在问题，但认为在当前项目中是可行的。
• 提示读者根据项目需求选择最合适的字体导入方式。

LogRocket Blog

How to use custom fonts in Tailwind CSS - LogRocket Blog

Learn how to use Google Fonts and locally installed fonts in a Tailwind project to help you improve your typography and design consistency.