Fork me on GitHub

2021-03-30のJS: Firefox 87.0、Next.js 10.1、Spectreの対応

Edit on GitHub 編集履歴を見る

JSer.info #533 - Firefox 87.0がリリースされました。

トラッカースクリプトをブロックするとサイトの表示が遅くなる問題があり、トラッカースクリプトを何もしないローカルで差し替えてパフォーマンスの劣化を防ぐSmartBlockという機能が実装されています。

また、Chromeと同様にReferrer Policyのデフォルト値がstrict-origin-when-cross-originとなる変更が含まれています。


Next.js 10.1がリリースされました。

webpack 5をopt-inで対応、パッケージサイズの改善、next/imageがApple M1の対応や新しいlayoutオプションの追加されています。
その他には、pages/500.jsでの500ページのカスタマイズ、router.pushrouter.replace時にページトップへスクロールするように変更なども含まれています。


次の記事では、CPUの設計上の脆弱性を使ったSpectreでのサイドチャネル攻撃について書かています。

ブラウザやウェブ標準においてSpectre対策としてのプロセス分離やサイト分離、クロスオリジンリソースの読み取り防止などのセキュリティメカニズムについて書かれています。
しかし、Spectre自体はCPUの設計上の問題であるため、サイドチャネル攻撃によってメモリ上のデータを読み取ることを防ぐことはできません。読み取れるメモリ上に機密な情報が乗らないようにするための対策となっています。

また、https://leaky.page/ でSpectreの脆弱性をJavaScriptから利用してメモリ上のデータを読み取るインタラクティブなデモが公開されています。
Intel Skylake CPU + Chrome 88 で動作が確認できるデモですが、デモ内では高精度なタイマーを使わずにどのようにメモリ上のキャッシュヒットを推測しているのかなどの仕組みについても書かれています。

あわせて、Spectre以後のウェブ開発における脅威モデルと戦略について書かれた次のドキュメントも参照すると良いかもしれません。


JSer.infoをサポートするには

JSer.info Sponsors

JSer.info SponsorsGitHub SponsorsとしてJSer.infoを支援してくれている方々です。


ヘッドライン


Release v7.7.0 · npm/cli

github.com/npm/cli/releases/tag/v7.7.0

npm ReleaseNote

npm 7.7.0リリース。
npm run-scriptとnpm exec--workspaceフラグでworkspacesをサポートなど


Firefox 87.0, See All New Features, Updates and Fixes

www.mozilla.org/en-US/firefox/87.0/releasenotes/

Firefox ReleaseNote

Firefox 87.0リリース。
Referrer Policyのデフォルト値をstrict-origin-when-cross-originに変更、トラッカーのスクリプトをローカルで置き換えるSmartBlock。
DevToolsでprefers-color-schemeのシミュレートなど


Release v8.0.0 · ajv-validator/ajv

github.com/ajv-validator/ajv/releases/v8.0.0

JSON library JavaScript ReleaseNote

JSON SchemaバリデーターのAjv 8.0.0リリース。
JSON Schema draft-2020-12のサポート、JSON Type Definition(JTD)の仕様と揃えるためにinstancePathdataPathにリネームなど。


JSON Type Definition

jsontypedef.com/

JSON TypeScript program spec

コードジェネレーター向けにJSONで型定義を表現する仕様。IETF/RFC 8927として策定中。
JTDはコード生成を意識して作られているのでコンパクトな仕様、エラーに関しても仕様で定義されているため実装に依存しにくいポータブルなものを目指している。JSONまたはYAMLで記述できる。


billboard.js 3.0 release: D3.js v6 support & new candlestick type! | by Jae Sung Park | Mar, 2021 | Medium

netil.medium.com/billboard-js-3-0-release-d3-js-v6-support-new-candlestick-type-9bd74af6a753

JavaScript SVG graphic library ReleaseNote

billboard.js 3.0リリース。
D3.js v6へアップデート、Candlestick Chartの追加、.export() API がサイズ指定をサポートなど


Blog - Next.js 10.1 | Next.js

nextjs.org/blog/next-10-1

Next.js library ReleaseNote

Next.js 10.1リリース。
webpack 5をopt-inで対応、パッケージサイズの改善、next/imageがApple M1の対応やlayoutオプションの追加サポートなど。
その他には、500ページのカスタマイズ、router.pushrouter.replace時にページトップへスクロールするように変更など


アーティクル


TypeScriptの型定義からバリデーションコードを生成するツールを書いた | Web Scratch

efcl.info/2021/03/26/create-validator-ts/

TypeScript security express article Tools

TypeScriptの型定義からAjvとJSON Schemaを使ったバリデーションコードを生成するツールについて。
また、リクエストをバリデーションせずにMongoなどのNoSQLのクエリにわたすと発生するNoSQL Injectionについて


React State Management Libraries and How to Choose

daveceddia.com/react-state-management/

React JavaScript library article

Reactのステート管理方法/ライブラリの比較。
useState/useReducer、Redux、MobX、Recoil、react-query、XStateについて利点と欠点について書かれている


Handling User Permissions in JavaScript | CSS-Tricks

css-tricks.com/handling-user-permissions-in-javascript/

JavaScript article

JavaScriptでパーミッションのビジネスロジックを実装する方法についての記事。
Single source of truthであること、変更が簡単であること、テスト可能で有ることを意識した設計と実装方法について


Making the slowest 'fast' page | Tune The Web

www.tunetheweb.com/blog/making-the-slowest-fast-page/

performance article opinion

Lighthouse/WebVitalで満点な遅いページを作る方法について。
意図して表示を遅らせることでスコアをあげるという実験。現実的には遅い"fast"なサイトは、スコアを上げる以外の意味はないため概念実証としての話。


Google Developers Japan: Spectre の影響を受けないウェブを作るための概念実証について

developers-jp.googleblog.com/2021/03/a-spectre-proof-of-concept-for-spectre.html

browser security CPU Chrome article

A Spectre proof-of-concept for a Spectre-proof webの翻訳記事。
Spectreの脆弱性、ブラウザ上でのSpectreのデモ、ブラウザでのSpectre対策としてのプロセス分離について


サイト、サービス、ドキュメント


Deno Deploy

deno.com/deploy

deno webservice ServiceWorker

Denoを扱うFaaS。
Cloudflare Workersと同じくService Worker APIをベースにしていて、DenoのスクリプトをCDN Edgeで動かせるサービス。


ソフトウェア、ツール、ライブラリ関係


seek-oss/vanilla-extract: Zero-runtime Stylesheets-in-TypeScript

github.com/seek-oss/vanilla-extract

CSS JavaScript Tools

CSSをTypeScriptで書いて、スコープ付きのCSS Variablesを含んだCSSファイルに展開するツール。
Babelとwebpackを使いビルド時にCSSファイルを生成し、HTML側にはクラス名のみが入る。


toplenboren/simple-git-hooks: A simple git hooks manager for small projects

github.com/toplenboren/simple-git-hooks

npm git library

Git hooksを管理するnpmモジュール。
simple-git-hooksコマンドを実行するとpackage.jsonや.simple-git-hooks.jsに定義したGit Hookスクリプトを.git/hooks/*にインストールする。


書籍関係


Developing Web Components with TypeScript - Native Web Development Using Thin Libraries | Jörg Krause | Apress

www.apress.com/gp/book/9781484268391

TypeScript WebComponents book

TypeScriptを使ったWeb Components開発についての書籍


Manning | Testing JavaScript Applications

www.manning.com/books/testing-javascript-applications

JavaScript book testing

2021年4月13日発売。
JavaScriptのテストについての書籍。
フロントエンド、バックエンド、React、E2Eテスト、CI/CDについて


この記事へ修正リクエストをする
JSer.info Slackに参加する