JSer.info #557 - Node.js 16.9.0 릴리스.
npm / yarn / pnpm 등 패키지 매니저를 프로젝트 별로 지정하여 사용할 수 있는 Corepack을 시험적으로 지원한다. Corepack을 활성화 한 경우 어떤 패키지 매니저를 사용할 것인지를 package.json의 packageManager 필드에 지정하여 프록시를 통해 패키지 설치나 명령어를 실행할 수 있다.
시험적인 기능이므로 사용하려면 corepack enable yarn 등의 명령어가 옵트-인으로 필요하다.
그 외로 V8 9.3으로 갱신, Object.hasOwn와 Error Cause 지원, stream.compose가 추가됐다.
Spook.js에는 투기(transient)적 실행을 이용한 same-site 환경에서의 사이드 채널 공격에 대한 논문이 공개돼 있다.
과거 구글이 공개한 Spectre 취약성을 다뤘던 https://leaky.page/라는 사이트가 있다.
Spook.js는 이를 보다 사실적으로 검증한 논문으로 Bitbucket이나 Tumblr 등의 사용자 컨텐츠를 예로 서브 도메인이 있는 사이트 간 데모, Google Chrome 확장 기능 간 데모 등을 소개하며 eTLD+1가 일치하는 same-site에서의 사이드 채널 공격이 어떻게 이뤄질 수 있는지 설명한다.
간단히 소개(자세한 내용은 논문 참고)하면 크롬은 각각의 사이트를 별도 프로세스로 분리하여 사이드 채널 공격을 막을 수 있도록 설계 돼 있다. 하지만 메모리가 압박 받는 상황(의도적으로 압박하는 상황일 수 있음)에서 eTLD+1이 일치하는 same-site를 실행할 경우 설계대로 사이트가 분리되지 않기 때문에 이 경우 사이트 간 사이드 채널 공격이 가능하다는 것이다.
Same-Site 여부는 Public Suffix List를 기준으로 정하므로 Bitbucket은 bitbucket.io에 관한 내용을 Public Suffix List에 추가해 Cross-Site로 인식시키는 방법으로 대응하고 있다.
또, 확장 기능 Page(chrome-extension://)에서의 문제는 Chrome 92에서 확장 간에는 Same-Site 등의 조건 여부와 상관 없이 프로세스를 공유하지 않도록 하여 이 문제에 대응했다.
Spook.js에는 투기적 실행을 이용한 사이드 채널 공격에 대해서 자세히 작성돼 있으므로 소개한 내용 외에 더 관심이 가는 분들은 직접 방문해보길 바란다.
헤드라인
Node v16.9.0 (Current) | Node.js
nodejs.org/en/blog/release/v16.9.0/
Node v16.9.0 릴리스.
npm / yarn / pnpm 등의 패키지 매니저를 프로젝트 별로 다르게 설치할 수 있는 Corepack 지원.
V8 9.3으로 업데이트, Object.hasOwn과 Error Cause를 지원, stream.compose 추가.
Release 3.0.1 · prisma/prisma
github.com/prisma/prisma/releases/tag/3.0.1
Prisma 3.0.1 릴리스. 3부터는 Semver에 따라서 릴리스한다.
Referential Actions, Named Constraints, Microsoft SQL / Azure SQL, Node-API 등이 GA(Generally Available)가 됐다.
비호환 변경 사항으로 prisma db seed의 구조 변경, null을 쿼리로 지정하지 못하도록 하고 JsonNull / DbNull / AnyNull 중 하나를 사용하도록 하는 변경도 포함됐다.
Ember 3.28 and 4.0 Beta Released
blog.emberjs.com/ember-3-28-released/
Ember 3.28과 4.0 Beta 릴리스.
Prettier 2.4: new bracketSameLine option and TypeScript 4.4 support! · Prettier
prettier.io/blog/2021/09/09/2.4.0.html
Prettier 2.4 릴리스.
TypeScript 4.4 지원, jsxBracketSameLine 옵션을 bracketSameLine 옵션으로 변경.
Nightwatch v2.0-alpha is Released | Nightwatch.js Blog
nightwatchjs.org/blog/nightwatch-v2-alpha-is-released.html
Nightwatch v2.0-alpha 릴리스.
selenium-webdriver를 이용하도록, WebDriver Actions API 지원, Chrome Dev Tools Protocol 지원.
.ensure assertion 추가, perform() 등에서 WebDriver object를 직접 다룰 수 있도록, Async / Await 대응 개선.
Time for a review of Firefox 92 - Mozilla Hacks - the Web developer blog
hacks.mozilla.org/2021/09/time-for-a-review-of-firefox-92/
Firefox 92 릴리스.
CSS의 accent-color와 size-adjust 지원, Stage 4 Object.hasOwn 지원 등.
또, ₩selectionchange₩ 이벤트에서 input이나 textarea 내의 선택 범위 변경도 인식할 수 있도록 변경.
Release Workbox v6.3.0 · GoogleChrome/workbox
github.com/GoogleChrome/workbox/releases/tag/v6.3.0
Workbox 6.3.0 릴리즈.
integrity 속성이 지정돼 있는 리소스에 대한 precaching 수정, IDB 기록에 { durability: 'relaxed' }을 사용하도록.
BroadcastCacheUpdate에 notifyAllClients 옵션 추가, Vary: 헤더에 대한 디버깅 로그 추가.
아티클
What’s New With DevTools: Cross-Browser Edition — Smashing Magazine
www.smashingmagazine.com/2021/09/devtools-cross-browser-edition/
브라우저 별 개발자 도구 기능을 정리 및 소개하는 글
Migrating Notion's marketing site to Next.js
www.notion.so/blog/migrating-notion-marketing-to-next-js
Notion 마케팅 사이트를 Next.js로 이전한 내용 정리.
React 기반의 애플리케이션과 마케팅 사이트가 React 구성 요소 디렉터리를 공유할 수 있도록 하여 마케팅 사이트에서 라이브 데모를 포함할 수 있도록 대응.
라우팅 전환과 테스트, CSS 대응 방법 등 이전과 관련한 다양한 주제에 대해서 이야기한다.
JavaScript Eventing Deep Dive
Event Capturing / Event Bubbling phase의 동작 원리 소개.
각각의 phase에 맞춰 Event 흐름을 멈추게 할 수 있는 stopPropagation(), stopImmediatePropagation(), preventDefault() 동작 방식 설명.
Journey with Icons Continues
antfu.me/posts/journey-with-icons-continues
Vite에서 아이콘 컴포넌트를 온디멘드 빌드하여 사용할 수 있는 unplugin-icons 소개
아이콘 데이터로는 Iconify를 사용하며 아이콘 컴포넌트를 가져온 시점에 Vite 측에서 SVG 기반의 아이콘 컴포넌트를 작성하여 반환하는 구조로 이뤄져 있다.
- Iconify - Unified icons framework
- antfu/unplugin-icons: 🤹 Access thousands of icons as components on-demand universally.
Introducing Flow Enums. As announced in an earlier post, Flow… | by George Zahariev | Flow | Sep, 2021 | Medium
medium.com/flow-type/introducing-flow-enums-16d4239b3180
FlowType에 도입된 enum 소개.
프런트엔드 테스트는 모두를 위한 것 | POSTD(일본어)
postd.cc/frontend-testing-is-for-everyone/
Front-End Testing is For Everyone 번역 글.
테스트가 검증하는 범위와 검증 도구를 정리한 글.
유닛 테스트, 결합 테스트, E2E 테스트, 접근성 테스트, 시각적 회귀(visual regression) 테스트, 성능 테스트를 다루고 있다.
슬라이드, 영상
Spook.js
동일 페이지 내에 대한 Spectre 취약성을 다뤘던 leaky.page에 이어 웹 사이트 간이나 확장 기능 간 까지 실증적으로 검증하여 정리한 논문.
Chrome은 메모리를 압박하면 eTLD+1의 범위로 프로세스를 정리하는데 이러한 V8의 성질을 이용해 투기(transient)적 실행 공격을 하면 다른 사이트의 메모리 데이터를 읽어드릴 수 있다는 내용.
소프트웨어, 도구, 라이브러리
wizardpisces/tiny-sass-compiler: Another sass compiler write from scatch，runnable on both node and browser
github.com/wizardpisces/tiny-sass-compiler
JavaScript로 작성한 Sass 컴파일러
브라우저와 Node.js에서 동작한다.
도서
TypeScript 핸즈온 | 쇼다 츠야노 | 공학 | Kindle 스토어 | Amazon(일본어)
www.amazon.co.jp/dp/B09D76MB7B/
핸즈온 형식의 TypeScript 입문서
