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という、投機的実行を利用したsame-siteでのサイドチャネル攻撃についての論文が公開されています。
以前、GoogleがSpectreの概念を説明するものとしてhttps://leaky.page/というサイトを公開しています。
Spook.jsは、これをより実践的に検証した論文で、BitbucketやTumblrなどのユーザーコンテンツがサブドメインにあるサイト同士でのデモ、Google Chromeの拡張機能同士でのデモといったeTLD+1が一致するsame-siteでのサイドチャネル攻撃について書かれています。
詳細は論文にかかれていますが、Chromeではそれぞれのサイトをプロセス分離することでプロセス間のサイドチャネル攻撃を防ぐようになっています。一方でメモリが圧迫されている際に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は、投機的実行を扱ったサイドチャネル攻撃について詳しく書かれているので興味がある人は読んでみるとよさそうです。
JSer.infoをサポートするには
- 😘 知り合いにJSer.infoをおすすめする
- ❤️ GitHub Sponsorsで@azuのスポンサーになる
- 🐦 X(Twitter)で@jser_infoをフォローする
JSer.info Sponsors
JSer.info SponsorsはGitHub SponsorsとしてJSer.infoを支援してくれている方々です。
ヘッドライン
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となった。
破壊的な変更として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 and 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で書かれたアプリケーションのコードとマーケティングサイトのコードを共有することで組み込みのデモがうごかせるようになった話。
ルーティングでの切り替えとテスト、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テスト、アクセシビリティテスト、ビジュアルリグレッションテスト、パフォーマンステストについて書かれている。
スライド、動画関係
Spook.js
leaky.page が同じページ内での話だったの対して、ウェブサイト間や拡張機能間まで話を広げたSpectreについての論文。
Chromeはメモリを圧迫するとeTLD+1の範囲でプロセスがまとまる。まとまったプロセス内でV8の癖を使って投機的実行攻撃して別サイトのメモリデータを読み込むという話。
ソフトウェア、ツール、ライブラリ関係
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入門書
