JSer.info #533 - Firefox 87.0がリリースされました。
トラッカースクリプトをブロックするとサイトの表示が遅くなる問題があり、トラッカースクリプトを何もしないローカルで差し替えてパフォーマンスの劣化を防ぐSmartBlockという機能が実装されています。
また、Chromeと同様にReferrer Policyのデフォルト値がstrict-origin-when-cross-origin
となる変更が含まれています。
- Firefox 87 trims HTTP Referrers by default to protect user privacy - Mozilla Security Blog
- A new default Referrer-Policy for Chrome: strict-origin-when-cross-origin
Next.js 10.1がリリースされました。
webpack 5をopt-inで対応、パッケージサイズの改善、next/image
がApple M1の対応や新しいlayout
オプションの追加されています。
その他には、pages/500.js
での500ページのカスタマイズ、router.push
やrouter.replace
時にページトップへスクロールするように変更なども含まれています。
次の記事では、CPUの設計上の脆弱性を使ったSpectreでのサイドチャネル攻撃について書かています。
- Google Developers Japan: Spectre の影響を受けないウェブを作るための概念実証について
- Google Online Security Blog: A Spectre proof-of-concept for a Spectre-proof web
ブラウザやウェブ標準においてSpectre対策としてのプロセス分離やサイト分離、クロスオリジンリソースの読み取り防止などのセキュリティメカニズムについて書かれています。
しかし、Spectre自体はCPUの設計上の問題であるため、サイドチャネル攻撃によってメモリ上のデータを読み取ることを防ぐことはできません。読み取れるメモリ上に機密な情報が乗らないようにするための対策となっています。
また、https://leaky.page/ でSpectreの脆弱性をJavaScriptから利用してメモリ上のデータを読み取るインタラクティブなデモが公開されています。
Intel Skylake CPU + Chrome 88 で動作が確認できるデモですが、デモ内では高精度なタイマーを使わずにどのようにメモリ上のキャッシュヒットを推測しているのかなどの仕組みについても書かれています。
あわせて、Spectre以後のウェブ開発における脅威モデルと戦略について書かれた次のドキュメントも参照すると良いかもしれません。
JSer.infoをサポートするには
- 😘 知り合いにJSer.infoをおすすめする
- ❤️ GitHub Sponsorsで@azuのスポンサーになる
- 🐦 X(Twitter)で@jser_infoをフォローする
JSer.info Sponsors
JSer.info SponsorsはGitHub SponsorsとしてJSer.infoを支援してくれている方々です。
ヘッドライン
Release v7.7.0 · npm/cli
github.com/npm/cli/releases/tag/v7.7.0
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 87.0リリース。
Referrer Policyのデフォルト値をstrict-origin-when-cross-origin
に変更、トラッカーのスクリプトをローカルで置き換えるSmartBlock。
DevToolsでprefers-color-scheme
のシミュレートなど
- Firefox 87 for developers - Mozilla | MDN
- Firefox 87 trims HTTP Referrers by default to protect user privacy - Mozilla Security Blog
- Firefox 87 introduces SmartBlock for Private Browsing - Mozilla Security Blog
Release v8.0.0 · ajv-validator/ajv
github.com/ajv-validator/ajv/releases/v8.0.0
JSON SchemaバリデーターのAjv 8.0.0リリース。
JSON Schema draft-2020-12のサポート、JSON Type Definition(JTD)の仕様と揃えるためにinstancePath
をdataPath
にリネームなど。
JSON Type Definition
コードジェネレーター向けに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
billboard.js 3.0リリース。
D3.js v6へアップデート、Candlestick Chartの追加、.export()
API がサイズ指定をサポートなど
Blog - Next.js 10.1 | Next.js
Next.js 10.1リリース。
webpack 5をopt-inで対応、パッケージサイズの改善、next/image
がApple M1の対応やlayout
オプションの追加サポートなど。
その他には、500ページのカスタマイズ、router.push
やrouter.replace
時にページトップへスクロールするように変更など
アーティクル
TypeScriptの型定義からバリデーションコードを生成するツールを書いた | Web Scratch
efcl.info/2021/03/26/create-validator-ts/
TypeScriptの型定義からAjvとJSON Schemaを使ったバリデーションコードを生成するツールについて。
また、リクエストをバリデーションせずにMongoなどのNoSQLのクエリにわたすと発生するNoSQL Injectionについて
React State Management Libraries and How to Choose
daveceddia.com/react-state-management/
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でパーミッションのビジネスロジックを実装する方法についての記事。
Single source of truthであること、変更が簡単であること、テスト可能で有ることを意識した設計と実装方法について
Making the slowest 'fast' page | Tune The Web
www.tunetheweb.com/blog/making-the-slowest-fast-page/
Lighthouse/WebVitalで満点な遅いページを作る方法について。
意図して表示を遅らせることでスコアをあげるという実験。現実的には遅い"fast"なサイトは、スコアを上げる以外の意味はないため概念実証としての話。
Google Developers Japan: Spectre の影響を受けないウェブを作るための概念実証について
developers-jp.googleblog.com/2021/03/a-spectre-proof-of-concept-for-spectre.html
A Spectre proof-of-concept for a Spectre-proof webの翻訳記事。
Spectreの脆弱性、ブラウザ上でのSpectreのデモ、ブラウザでのSpectre対策としてのプロセス分離について
サイト、サービス、ドキュメント
Deno Deploy
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を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
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を使ったWeb Components開発についての書籍
Manning | Testing JavaScript Applications
www.manning.com/books/testing-javascript-applications
2021年4月13日発売。
JavaScriptのテストについての書籍。
フロントエンド、バックエンド、React、E2Eテスト、CI/CDについて