-
-
Notifications
You must be signed in to change notification settings - Fork 70
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
4 changed files
with
922 additions
and
0 deletions.
There are no files selected for viewing
244 changes: 244 additions & 0 deletions
244
_i18n/ko/_posts/2021/2021-03-30-firefox-87.0-next.js-next.js-10.1-spectre.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,244 @@ | ||
| --- | ||
| title: "2021-03-30のJS: Firefox 87.0、Next.js 10.1、Spectreの対応" | ||
| author: "azu" | ||
| layout: post | ||
| date : 2021-03-30T06:12:26.680Z | ||
| category: JSer | ||
| tags: | ||
| - TypeScript | ||
| - book | ||
| - npm | ||
| - security | ||
| - Tools | ||
|
|
||
| --- | ||
|
|
||
| JSer.info #533 - Firefox 87.0がリリースされました。 | ||
|
|
||
| - [Firefox 87.0, See All New Features, Updates and Fixes](https://www.mozilla.org/en-US/firefox/87.0/releasenotes/) | ||
|
|
||
| トラッカースクリプトをブロックするとサイトの表示が遅くなる問題があり、トラッカースクリプトを何もしないローカルで差し替えてパフォーマンスの劣化を防ぐSmartBlockという機能が実装されています。 | ||
|
|
||
| - [Firefox 87 introduces SmartBlock for Private Browsing - Mozilla Security Blog](https://blog.mozilla.org/security/2021/03/23/introducing-smartblock/) | ||
|
|
||
| また、Chromeと同様にReferrer Policyのデフォルト値が`strict-origin-when-cross-origin`となる変更が含まれています。 | ||
|
|
||
| - [Firefox 87 trims HTTP Referrers by default to protect user privacy - Mozilla Security Blog](https://blog.mozilla.org/security/2021/03/22/firefox-87-trims-http-referrers-by-default-to-protect-user-privacy/) | ||
| - [A new default Referrer-Policy for Chrome: strict-origin-when-cross-origin](https://developers.google.com/web/updates/2020/07/referrer-policy-new-chrome-default) | ||
|
|
||
| --- | ||
|
|
||
| Next.js 10.1がリリースされました。 | ||
|
|
||
| - [Blog - Next.js 10.1 | Next.js](https://nextjs.org/blog/next-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 の影響を受けないウェブを作るための概念実証について](https://developers-jp.googleblog.com/2021/03/a-spectre-proof-of-concept-for-spectre.html) | ||
| - [Google Online Security Blog: A Spectre proof-of-concept for a Spectre-proof web](https://security.googleblog.com/2021/03/a-spectre-proof-of-concept-for-spectre.html) | ||
|
|
||
| ブラウザやウェブ標準においてSpectre対策としてのプロセス分離やサイト分離、クロスオリジンリソースの読み取り防止などのセキュリティメカニズムについて書かれています。 | ||
| しかし、Spectre自体はCPUの設計上の問題であるため、サイドチャネル攻撃によってメモリ上のデータを読み取ることを防ぐことはできません。読み取れるメモリ上に機密な情報が乗らないようにするための対策となっています。 | ||
|
|
||
| また、<https://leaky.page/> でSpectreの脆弱性をJavaScriptから利用してメモリ上のデータを読み取るインタラクティブなデモが公開されています。 | ||
| Intel Skylake CPU + Chrome 88 で動作が確認できるデモですが、デモ内では高精度なタイマーを使わずにどのようにメモリ上のキャッシュヒットを推測しているのかなどの仕組みについても書かれています。 | ||
|
|
||
| - [Spectre JS Demo - YouTube](https://www.youtube.com/watch?v=V_9cQP60ZGI) | ||
|
|
||
| あわせて、Spectre以後のウェブ開発における脅威モデルと戦略について書かれた次のドキュメントも参照すると良いかもしれません。 | ||
|
|
||
| - [Post-Spectre Web Development](https://w3c.github.io/webappsec-post-spectre-webdev/) | ||
|
|
||
| ---- | ||
|
|
||
| <h1 class="site-genre">ヘッドライン</h1> | ||
|
|
||
| ---- | ||
|
|
||
| ## Release v7.7.0 · npm/cli | ||
| [github.com/npm/cli/releases/tag/v7.7.0](https://github.com/npm/cli/releases/tag/v7.7.0 "Release v7.7.0 · npm/cli") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">npm</span> <span class="jser-tag">ReleaseNote</span></p> | ||
|
|
||
| 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/](https://www.mozilla.org/en-US/firefox/87.0/releasenotes/ "Firefox 87.0, See All New Features, Updates and Fixes") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">Firefox</span> <span class="jser-tag">ReleaseNote</span></p> | ||
|
|
||
| Firefox 87.0リリース。 | ||
| Referrer Policyのデフォルト値を`strict-origin-when-cross-origin`に変更、トラッカーのスクリプトをローカルで置き換えるSmartBlock。 | ||
| DevToolsで`prefers-color-scheme`のシミュレートなど | ||
|
|
||
| - [Firefox 87 for developers - Mozilla | MDN](https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/87 "Firefox 87 for developers - Mozilla | MDN") | ||
| - [Firefox 87 trims HTTP Referrers by default to protect user privacy - Mozilla Security Blog](https://blog.mozilla.org/security/2021/03/22/firefox-87-trims-http-referrers-by-default-to-protect-user-privacy/ "Firefox 87 trims HTTP Referrers by default to protect user privacy - Mozilla Security Blog") | ||
| - [Firefox 87 introduces SmartBlock for Private Browsing - Mozilla Security Blog](https://blog.mozilla.org/security/2021/03/23/introducing-smartblock/ "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](https://github.com/ajv-validator/ajv/releases/v8.0.0 "Release v8.0.0 · ajv-validator/ajv") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">JSON</span> <span class="jser-tag">library</span> <span class="jser-tag">JavaScript</span> <span class="jser-tag">ReleaseNote</span></p> | ||
|
|
||
| JSON SchemaバリデーターのAjv 8.0.0リリース。 | ||
| JSON Schema draft-2020-12のサポート、JSON Type Definition(JTD)の仕様と揃えるために`instancePath`を`dataPath`にリネームなど。 | ||
|
|
||
| - [JSON Type Definition](https://jsontypedef.com/ "JSON Type Definition") | ||
|
|
||
| ---- | ||
|
|
||
| ## JSON Type Definition | ||
| [jsontypedef.com/](https://jsontypedef.com/ "JSON Type Definition") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">JSON</span> <span class="jser-tag">TypeScript</span> <span class="jser-tag">program</span> <span class="jser-tag">spec</span></p> | ||
|
|
||
| コードジェネレーター向けに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](https://netil.medium.com/billboard-js-3-0-release-d3-js-v6-support-new-candlestick-type-9bd74af6a753 "billboard.js 3.0 release: D3.js v6 support & new candlestick type! | by Jae Sung Park | Mar, 2021 | Medium") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">SVG</span> <span class="jser-tag">graphic</span> <span class="jser-tag">library</span> <span class="jser-tag">ReleaseNote</span></p> | ||
|
|
||
| billboard.js 3.0リリース。 | ||
| D3.js v6へアップデート、Candlestick Chartの追加、`.export()` API がサイズ指定をサポートなど | ||
|
|
||
| - [Release 3.0.0 · naver/billboard.js](https://github.com/naver/billboard.js/releases/tag/3.0.0 "Release 3.0.0 · naver/billboard.js") | ||
|
|
||
| ---- | ||
|
|
||
| ## Blog - Next.js 10.1 | Next.js | ||
| [nextjs.org/blog/next-10-1](https://nextjs.org/blog/next-10-1 "Blog - Next.js 10.1 | Next.js") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">Next.js</span> <span class="jser-tag">library</span> <span class="jser-tag">ReleaseNote</span></p> | ||
|
|
||
| Next.js 10.1リリース。 | ||
| webpack 5をopt-inで対応、パッケージサイズの改善、`next/image`がApple M1の対応や`layout`オプションの追加サポートなど。 | ||
| その他には、500ページのカスタマイズ、`router.push`や`router.replace`時にページトップへスクロールするように変更など | ||
|
|
||
|
|
||
| ---- | ||
| <h1 class="site-genre">アーティクル</h1> | ||
|
|
||
| ---- | ||
|
|
||
| ## TypeScriptの型定義からバリデーションコードを生成するツールを書いた | Web Scratch | ||
| [efcl.info/2021/03/26/create-validator-ts/](https://efcl.info/2021/03/26/create-validator-ts/ "TypeScriptの型定義からバリデーションコードを生成するツールを書いた | Web Scratch") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">TypeScript</span> <span class="jser-tag">security</span> <span class="jser-tag">express</span> <span class="jser-tag">article</span> <span class="jser-tag">Tools</span></p> | ||
|
|
||
| TypeScriptの型定義からAjvとJSON Schemaを使ったバリデーションコードを生成するツールについて。 | ||
| また、リクエストをバリデーションせずにMongoなどのNoSQLのクエリにわたすと発生するNoSQL Injectionについて | ||
|
|
||
| - [azu/create-validator-ts: Create JSON Schema validator from TypeScript.](https://github.com/azu/create-validator-ts "azu/create-validator-ts: Create JSON Schema validator from TypeScript.") | ||
|
|
||
| ---- | ||
|
|
||
| ## React State Management Libraries and How to Choose | ||
| [daveceddia.com/react-state-management/](https://daveceddia.com/react-state-management/ "React State Management Libraries and How to Choose") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">React</span> <span class="jser-tag">JavaScript</span> <span class="jser-tag">library</span> <span class="jser-tag">article</span></p> | ||
|
|
||
| Reactのステート管理方法/ライブラリの比較。 | ||
| `useState`/`useReducer`、Redux、MobX、Recoil、react-query、XStateについて利点と欠点について書かれている | ||
|
|
||
| - [JS 状態管理ライブラリ探索記 – Introduction - to-R Media](https://www.to-r.net/media/js-state-libraries-introduction/ "JS 状態管理ライブラリ探索記 – Introduction - to-R Media") | ||
|
|
||
| ---- | ||
|
|
||
| ## Handling User Permissions in JavaScript | CSS-Tricks | ||
| [css-tricks.com/handling-user-permissions-in-javascript/](https://css-tricks.com/handling-user-permissions-in-javascript/ "Handling User Permissions in JavaScript | CSS-Tricks") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">article</span></p> | ||
|
|
||
| JavaScriptでパーミッションのビジネスロジックを実装する方法についての記事。 | ||
| Single source of truthであること、変更が簡単であること、テスト可能で有ることを意識した設計と実装方法について | ||
|
|
||
|
|
||
| ---- | ||
|
|
||
| ## Making the slowest 'fast' page | Tune The Web | ||
| [www.tunetheweb.com/blog/making-the-slowest-fast-page/](https://www.tunetheweb.com/blog/making-the-slowest-fast-page/ "Making the slowest 'fast' page | Tune The Web") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">performance</span> <span class="jser-tag">article</span> <span class="jser-tag">opinion</span></p> | ||
|
|
||
| Lighthouse/WebVitalで満点な遅いページを作る方法について。 | ||
| 意図して表示を遅らせることでスコアをあげるという実験。現実的には遅い"fast"なサイトは、スコアを上げる以外の意味はないため概念実証としての話。 | ||
|
|
||
|
|
||
| ---- | ||
|
|
||
| ## Google Developers Japan: Spectre の影響を受けないウェブを作るための概念実証について | ||
| [developers-jp.googleblog.com/2021/03/a-spectre-proof-of-concept-for-spectre.html](https://developers-jp.googleblog.com/2021/03/a-spectre-proof-of-concept-for-spectre.html "Google Developers Japan: Spectre の影響を受けないウェブを作るための概念実証について") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">browser</span> <span class="jser-tag">security</span> <span class="jser-tag">CPU</span> <span class="jser-tag">Chrome</span> <span class="jser-tag">article</span></p> | ||
|
|
||
| A Spectre proof-of-concept for a Spectre-proof webの翻訳記事。 | ||
| Spectreの脆弱性、ブラウザ上でのSpectreのデモ、ブラウザでのSpectre対策としてのプロセス分離について | ||
|
|
||
| - [Google Online Security Blog: A Spectre proof-of-concept for a Spectre-proof web](https://security.googleblog.com/2021/03/a-spectre-proof-of-concept-for-spectre.html "Google Online Security Blog: A Spectre proof-of-concept for a Spectre-proof web") | ||
| - [leaky.page](https://leaky.page/ "leaky.page") | ||
|
|
||
| ---- | ||
| <h1 class="site-genre">サイト、サービス、ドキュメント</h1> | ||
|
|
||
| ---- | ||
|
|
||
| ## Deno Deploy | ||
| [deno.com/deploy](https://deno.com/deploy "Deno Deploy") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">deno</span> <span class="jser-tag">webservice</span> <span class="jser-tag">ServiceWorker</span></p> | ||
|
|
||
| Denoを扱うFaaS。 | ||
| Cloudflare Workersと同じくService Worker APIをベースにしていて、DenoのスクリプトをCDN Edgeで動かせるサービス。 | ||
|
|
||
|
|
||
| ---- | ||
| <h1 class="site-genre">ソフトウェア、ツール、ライブラリ関係</h1> | ||
|
|
||
| ---- | ||
|
|
||
| ## seek-oss/vanilla-extract: Zero-runtime Stylesheets-in-TypeScript | ||
| [github.com/seek-oss/vanilla-extract](https://github.com/seek-oss/vanilla-extract "seek-oss/vanilla-extract: Zero-runtime Stylesheets-in-TypeScript") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">CSS</span> <span class="jser-tag">JavaScript</span> <span class="jser-tag">Tools</span></p> | ||
|
|
||
| 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](https://github.com/toplenboren/simple-git-hooks "toplenboren/simple-git-hooks: A simple git hooks manager for small projects") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">npm</span> <span class="jser-tag">git </span> <span class="jser-tag">library</span></p> | ||
|
|
||
| Git hooksを管理するnpmモジュール。 | ||
| `simple-git-hooks`コマンドを実行するとpackage.jsonや`.simple-git-hooks.js`に定義したGit Hookスクリプトを`.git/hooks/*`にインストールする。 | ||
|
|
||
|
|
||
| ---- | ||
| <h1 class="site-genre">書籍関係</h1> | ||
|
|
||
| ---- | ||
|
|
||
| ## Developing Web Components with TypeScript - Native Web Development Using Thin Libraries | Jörg Krause | Apress | ||
| [www.apress.com/gp/book/9781484268391](https://www.apress.com/gp/book/9781484268391 "Developing Web Components with TypeScript - Native Web Development Using Thin Libraries | Jörg Krause | Apress") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">TypeScript</span> <span class="jser-tag">WebComponents</span> <span class="jser-tag">book</span></p> | ||
|
|
||
| TypeScriptを使ったWeb Components開発についての書籍 | ||
|
|
||
|
|
||
| ---- | ||
|
|
||
| ## Manning | Testing JavaScript Applications | ||
| [www.manning.com/books/testing-javascript-applications](https://www.manning.com/books/testing-javascript-applications "Manning | Testing JavaScript Applications") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">book</span> <span class="jser-tag">testing</span></p> | ||
|
|
||
| 2021年4月13日発売。 | ||
| JavaScriptのテストについての書籍。 | ||
| フロントエンド、バックエンド、React、E2Eテスト、CI/CDについて | ||
|
|
||
|
|
||
| ---- |
Oops, something went wrong.