프론트엔드 뉴스레터
#23
이번 이슈 한눈에
- Node2Shell, 패치 공개 뒤 공격 시도 관측
- Firefox 159, 스크롤 기반 애니메이션을 기본 지원
- Deno 팀, 런타임의 재단 이관 추진
- Redact 0.2.0, 기존 React 코드를 유지하는 브라우저 통합 제공
- 01
ellio.tech
Node.js Brotli 취약점, 패치 공개 뒤 공격 시도가 관측됐어요
원문 읽기 ↗보안 연구팀 ELLIO가 27일 00:08(KST), 패치가 공개된 Node.js의 Brotli 압축 해제 취약점인 Node2Shell(CVE-2026-111497)을 노린 공격 요청을 관측했어요. 공격자가 조작한 Brotli 데이터를 앱이 압축 해제할 때 문제가 생기며, 공격자가 URL을 지정할 수 있는 Node.js의
fetch()나 Next.js 서버 측 요청에서 Brotli 응답을 처리하는 경우도 해당합니다.관측된 요청은 Node.js 24.22.0 x86-64를 겨냥했지만, 연구팀이 취약한 환경에서 재현한 50회 모두 셸 획득에 실패했어요. 공격 시도 관측을 실제 침해 성공으로 볼 수는 없습니다.
- 공식 보안 공지의 수정 버전은 Node.js 22.23.4·24.22.1·26.12.1입니다.
- 02
developer.mozilla.org
Firefox 159, 스크롤 기반 애니메이션을 기본 지원해요
원문 읽기 ↗27일 출시된 Firefox 159부터 스크롤 기반 애니메이션이 기본으로 켜집니다. 시간이 흐르는 대신 스크롤 위치에 따라 애니메이션이 진행되는 방식이에요.
animation-timeline에scroll()이나view()를 연결해, 스크롤 진행도나 요소가 화면에 들어온 정도에 맞춰 CSS 속성을 바꿀 수 있습니다. - 03
github.com
Deno 팀, 런타임의 재단 이관을 추진해요
원문 읽기 ↗JavaScript·TypeScript 런타임 Deno 팀이 Cloudflare 합류 후 런타임의 재단 이관을 추진 중이라고 밝혔어요. 21일 공식 이슈에 올라온 후속 설명으로, 구체적인 이관 계획은 아직 공개되지 않았습니다. 기존 팀은 새 기능을 개발하지 않고, 2027년 10월까지 매월 2.9.x의 버그·보안 수정 릴리스를 제공해요.
- 04
tanstack.com
Redact 0.2.0, 기존 React 코드로 브라우저 런타임을 바꿔요
원문 읽기 ↗브라우저에서 React·React DOM을 대신하는 TanStack Redact 0.2.0이 26일 나왔어요. Vite·TanStack Start·Next.js·Vinext용 stable 브라우저 통합을 제공해, 빌드 설정을 바꾸면 기존 React 컴포넌트와 hooks를 유지하면서 브라우저에 보내는 JavaScript를 줄일 수 있습니다.
Next.js·Vinext에서는 서버 렌더링과 Server Components를 React가 계속 맡고, 브라우저의 hydration과 렌더링을 Redact가 처리해요.
- 동기 렌더링을 사용해, 렌더링을 나눠 실행하거나 중간에 멈추는 time slicing·interruptible rendering은 제공하지 않아요. 무거운 렌더링은 입력 처리를 늦출 수 있습니다.
- 05
biomejs.dev
Biome 2.6, Markdown·YAML·SCSS도 포맷해요
원문 읽기 ↗15일 나온 Biome 2.6부터 Markdown·YAML·SCSS 파일도 포맷할 수 있어요. JavaScript·TypeScript와 문서·설정·스타일 파일을 같은 도구로 정리할 수 있는 범위가 넓어졌습니다. JavaScript나 TypeScript로 커스텀 lint 규칙을 만드는 플러그인도 developer preview로 추가됐어요.
- Markdown 안의 코드 블록·HTML 포맷은 기본으로 켜져 있지만, lint·assist 분석은
markdown.analyzeEmbeds로 따로 켜야 해요. - YAML lint 규칙은 현재 하나이고, SCSS의 loop·mixin이 섞인 코드는 일부 CSS lint 규칙이 아직 검사하지 못합니다.
- Markdown 안의 코드 블록·HTML 포맷은 기본으로 켜져 있지만, lint·assist 분석은
- 06
github.com
Remix 3.1, 서버 렌더링을 개선하고 frame prefetch를 추가했어요
원문 읽기 ↗Remix 3.1은
remix/component의 서버 렌더링 속도와 메모리 사용을 개선했어요. 브라우저에서만 필요한 동작은createMixin(setup, { ssr: false })로 서버의setup과 렌더링을 건너뛰게 할 수도 있습니다.서버에서 받은 HTML로 페이지 일부를 갱신하는 frame에는 HTML·assets를 미리 불러오는 기능이 추가됐어요. 링크에
data-rmx-prefetch="intent"나data-rmx-prefetch="viewport"를 지정해 사용합니다.- 두 링크 prefetch 모드는 Save-Data 설정을 따르며,
slow-2g·2g연결에서는 미리 불러오지 않아요.
- 두 링크 prefetch 모드는 Save-Data 설정을 따르며,
- 07
github.com
Verdaccio 7, 패키지 공개 전에 승인받는 기능을 추가했어요
원문 읽기 ↗사내 npm registry를 직접 운영하는 도구 Verdaccio 7에 패키지 업로드와 공개를 나누는 staged publishing이 추가됐어요. CI가 새 버전을 올린 뒤 유지관리자가 검토해야 다른 프로젝트에서 설치할 수 있는 방식입니다. 실험 기능이며,
flags.stage와 npm 11.17 이상이 필요해요.- 서버는 Node.js 24 이상, 설정 파일은 YAML만 지원해요. 패키지 API 인증은
.npmrc의_auth에서_authToken으로 옮겨야 합니다. - npm과 Docker의
latest는 7.x를 가리킵니다. 6.x는 npm의latest-6와 Docker 이미지의6태그로 제공돼요.
- 서버는 Node.js 24 이상, 설정 파일은 YAML만 지원해요. 패키지 API 인증은
- 08
blog.master.dev
HTML 미리보기는 sandbox와 CSP를 함께 적용해야 해요
원문 읽기 ↗모델이 만든 HTML을
sandbox없이 iframe의srcdoc에 넣으면, 부모 페이지와 같은 origin에서 실행돼 부모 DOM과localStorage를 읽을 수 있어요. 이 글은 미리보기에sandbox="allow-scripts"를 적용해 부모 접근을 막아도fetch()나 이미지 요청은 여전히 나간다는 점을 데모로 보여줍니다.미리보기 문서에
default-src 'none'을 두고 필요한 inline script·style만 허용하는 CSP를 함께 적용해 리소스 요청도 제한합니다. 다만 이 구성으로도 iframe 자체의 페이지 이동까지 막지는 못해요.- 같은 origin의 콘텐츠에
allow-scripts와allow-same-origin을 함께 주면 부모에 접근해 sandbox를 제거한 뒤 다시 로드해 제한을 벗어날 수 있어요.
- 같은 origin의 콘텐츠에