Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
2021-03-23のJS: Node.js 15.12.0(fs.promisesのパフォーマンス改善)、strict CSP、CSS …
…Auditing Tools (#846) * Update 532 draft * Update 532 draft * Update 532 draft * Update 532 draft * Update 532 draft * Update 532 draft * Update 532 draft * Update 532 draft * Update 532 draft * Update 532 draft * Update 532 draft * Update 532 draft * Update 532 draft * Update 532 draft * Update 532 draft * Update 532 draft * Update 532 draft * Update 532 draft * Update _i18n/ja/_posts/2021/2021-03-23-node.js-15.12.0fs.promises-strict-csp-css-auditing-tools.md * Delete _i18n/ja/_posts/2021/2021-03-23-532draft.md * Update 2021-03-23-node.js-15.12.0fs.promises-strict-csp-css-auditing-tools.md * Update 2021-03-23-node.js-15.12.0fs.promises-strict-csp-css-auditing-tools.md * Update _i18n/ja/_posts/2021/2021-03-23-node.js-15.12.0fs.promises-strict-csp-css-auditing-tools.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
- Loading branch information
1 parent
6c7a627
commit 6cfc3c4
Showing
1 changed file
with
240 additions
and
0 deletions.
There are no files selected for viewing
240 changes: 240 additions & 0 deletions
240
...sts/2021/2021-03-23-node.js-15.12.0fs.promises-strict-csp-css-auditing-tools.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,240 @@ | ||
| --- | ||
| title: "2021-03-23のJS: Node.js 15.12.0(fs.promisesのパフォーマンス改善)、strict CSP、CSS Auditing Tools" | ||
| author: "azu" | ||
| layout: post | ||
| date : 2021-03-23T03:32:29.241Z | ||
| category: JSer | ||
| tags: | ||
| - node.js | ||
| - performance | ||
| - Tools | ||
| - testing | ||
| - browser | ||
|
|
||
| --- | ||
|
|
||
| JSer.info #532 - Node.js 15.12.0がリリースされました。 | ||
|
|
||
| - [Node v15.12.0 (Current) | Node.js](https://nodejs.org/en/blog/release/v15.12.0/) | ||
|
|
||
| `fs`の`readFile`/`writeFile`に対してPromise版の`fs.promises`の`readFile`/`writeFile`が遅くなるというIssueがあります。 | ||
|
|
||
| - [fs.promises.readFile is 40% slower than fs.readFile · Issue #37583 · nodejs/node](https://github.com/nodejs/node/issues/37583) | ||
|
|
||
| Node.js 15.12.0ではこのパフォーマンス問題の改善が含まれています。 | ||
|
|
||
| - [fs: improve fsPromises readFile performance by Linkgoron · Pull Request #37608 · nodejs/node](https://github.com/nodejs/node/pull/37608) | ||
| - [fs: improve fsPromises writeFile performance by Linkgoron · Pull Request #37610 · nodejs/node](https://github.com/nodejs/node/pull/37610) | ||
| - writeに関してはコールバック版とほぼ同等になっている | ||
|
|
||
| その他には`crypto.create{Public,Private}Key`がJWKオブジェクトをサポート、`AbortSignal.abort()`の実装、`worker`モジュールに`{get,set}EnvironmentData`が追加されています。 | ||
|
|
||
| --- | ||
|
|
||
| [Mitigate cross-site scripting (XSS) with a strict Content Security Policy (CSP)](https://web.dev/strict-csp/)という記事では、Content Security Policy (CSP)を使ったXSSの影響を軽減するアプローチについて書かれています。 | ||
|
|
||
| CSPには、特定のURLを許可リスト方式で扱う設定がありますが、許可したURLにJSONPなどのエンドポイントがあるとバイパスされる問題が知られています。 | ||
|
|
||
| - [CSP Is Dead, Long Live Strict CSP! - DeepSec 2016 - Speaker Deck](https://speakerdeck.com/lweichselbaum/csp-is-dead-long-live-strict-csp-deepsec-2016?slide=15) | ||
| - [Content Security Policy: A successful mess between hardening and mitigation - Speaker Deck](https://speakerdeck.com/mikispag/content-security-policy-a-successful-mess-between-hardening-and-mitigation) | ||
|
|
||
| そのため、nonceベースかhashベースのstrictなCSP設定をすることで、CSPがバイパスされる可能性は低くなります。 | ||
| この記事では、nonceベースとhashベースのstrict CSP設定をどのようにするかについて書かれています。 | ||
|
|
||
| --- | ||
|
|
||
| [CSS Auditing Tools — Smashing Magazine](https://www.smashingmagazine.com/2021/03/css-auditing-tools/)という記事では、CSSのAuditツールについてまとめられています。 | ||
|
|
||
| - [CSS Stats](https://cssstats.com/) | ||
| - [Yellow Lab Tools - Page Speed audit](https://yellowlab.tools/) | ||
| - [Specificity Visualizer](https://isellsoap.github.io/specificity-visualizer/) | ||
| - [CSS Analytics - Project Wallace](https://www.projectwallace.com/) | ||
| - [katiefenn/parker: Stylesheet analysis tool.](https://github.com/katiefenn/parker) | ||
| - Chrome DevTools | ||
| - [CSS Overview Panel - Chrome DevTools - Dev Tips](https://umaar.com/dev-tips/209-css-overview/) | ||
| - [Find Unused JavaScript And CSS Code With The Coverage Tab In Chrome DevTools](https://developers.google.com/web/tools/chrome-devtools/coverage) | ||
|
|
||
| それぞれのツールの紹介やどのような項目を調べられるのかについてまとめられています。 | ||
|
|
||
| ---- | ||
|
|
||
| <h1 class="site-genre">ヘッドライン</h1> | ||
|
|
||
| ---- | ||
|
|
||
| ## Node v15.12.0 (Current) | Node.js | ||
| [nodejs.org/en/blog/release/v15.12.0/](https://nodejs.org/en/blog/release/v15.12.0/ "Node v15.12.0 (Current) | Node.js") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">node.js</span> <span class="jser-tag">ReleaseNote</span></p> | ||
|
|
||
| Node.js 15.12.0リリース。 | ||
| `crypto.create{Public,Private}Key`がJWKオブジェクトをサポート、`fs.promises`のwriteFileとreadFileのパフォーマンス改善。 | ||
| `AbortSignal.abort()`の実装、`worker`モジュールに`{get,set}EnvironmentData`を追加など | ||
|
|
||
| - [fs.promises.readFile is 40% slower than fs.readFile · Issue #37583 · nodejs/node](https://github.com/nodejs/node/issues/37583 "fs.promises.readFile is 40% slower than fs.readFile · Issue #37583 · nodejs/node") | ||
|
|
||
| ---- | ||
|
|
||
| ## V8 release v9.0 · V8 | ||
| [v8.dev/blog/v8-release-90](https://v8.dev/blog/v8-release-90 "V8 release v9.0 · V8") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">V8</span> <span class="jser-tag">ReleaseNote</span></p> | ||
|
|
||
| V8 v9.0リリース。 | ||
| `RegExp#insices`の実装、`super`のプロパティアクセスのパフォーマンス改善、JavaScriptからWasmの関数を呼ぶときのパフォーマンスを改善など | ||
|
|
||
|
|
||
| ---- | ||
|
|
||
| ## Release v7.3.0 · GoogleChrome/lighthouse | ||
| [github.com/GoogleChrome/lighthouse/releases/tag/v7.3.0](https://github.com/GoogleChrome/lighthouse/releases/tag/v7.3.0 "Release v7.3.0 · GoogleChrome/lighthouse") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">performance</span> <span class="jser-tag">Tools</span> <span class="jser-tag">ReleaseNote</span> <span class="jser-tag">Chrome</span></p> | ||
|
|
||
| Lighthouse 7.3.0リリース。 | ||
| 新しいauditとしてcsp-xssを試験的に追加。 | ||
|
|
||
| - [new\_audit: csp-xss by adamraine · Pull Request #12044 · GoogleChrome/lighthouse](https://github.com/GoogleChrome/lighthouse/pull/12044 "new\_audit: csp-xss by adamraine · Pull Request #12044 · GoogleChrome/lighthouse") | ||
|
|
||
| ---- | ||
|
|
||
| ## jasmine/3.7.0.md at main · jasmine/jasmine | ||
| [github.com/jasmine/jasmine/blob/main/release\_notes/3.7.0.md](https://github.com/jasmine/jasmine/blob/main/release_notes/3.7.0.md "jasmine/3.7.0.md at main · jasmine/jasmine") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">library</span> <span class="jser-tag">ReleaseNote</span> <span class="jser-tag">testing</span></p> | ||
|
|
||
| Jasmine 3.7リリース。 | ||
| Node.jsのSource Mapsに対応、Array.prototypeを拡張している際にテストが一部落ちる問題の修正、`.and.callFake`がGenerator関数をサポートなど | ||
|
|
||
| - [Source maps in Node.js. Supporting the many flavors of… | by Node.js | Medium](https://nodejs.medium.com/source-maps-in-node-js-482872b56116 "Source maps in Node.js. Supporting the many flavors of… | by Node.js | Medium") | ||
|
|
||
| ---- | ||
|
|
||
| ## ECMAScript proposal updates @ 2021-03 | ECMAScript Daily | ||
| [ecmascript-daily.github.io/ecmascript/2021/03/22/ecmascript-proposal-update](https://ecmascript-daily.github.io/ecmascript/2021/03/22/ecmascript-proposal-update "ECMAScript proposal updates @ 2021-03 | ECMAScript Daily") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">ECMAScript</span> <span class="jser-tag">news</span></p> | ||
|
|
||
| 2021年3月のTC39でECMAScript Proposalのステータス変更のまとめ。 | ||
| Module FragmentsがStage 1へ、`Array#findLast`がStage2へ、TemporalがStage 3へ更新など | ||
|
|
||
| - [JavaScript の Module Fragments について](https://sosukesuzuki.dev/posts/stage-0-module-fragments/ "JavaScript の Module Fragments について") | ||
|
|
||
| ---- | ||
|
|
||
| ## sinon/CHANGELOG.md at master · sinonjs/sinon | ||
| [github.com/sinonjs/sinon/blob/master/CHANGELOG.md#1000--2021-03-22](https://github.com/sinonjs/sinon/blob/master/CHANGELOG.md#1000--2021-03-22 "sinon/CHANGELOG.md at master · sinonjs/sinon") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">testing</span> <span class="jser-tag">library</span> <span class="jser-tag">ReleaseNote</span></p> | ||
|
|
||
| Sinon.js 10.0.0リリース。 | ||
| IE 11、Legacy Edge、Legacy Safariのサポートを終了。 | ||
|
|
||
|
|
||
| ---- | ||
| <h1 class="site-genre">アーティクル</h1> | ||
|
|
||
| ---- | ||
|
|
||
| ## Mitigate cross-site scripting (XSS) with a strict Content Security Policy (CSP) | ||
| [web.dev/strict-csp/](https://web.dev/strict-csp/ "Mitigate cross-site scripting (XSS) with a strict Content Security Policy (CSP)") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">CSP</span> <span class="jser-tag">article</span> <span class="jser-tag">security</span></p> | ||
|
|
||
| ドメインの許可リストのCSPよりも、strict設定のCSPを推奨するという話。 | ||
| nonceとstrict-dynamicベースのCSP設定で防げるXSS、nonceベースとhashベースのCSPの設定、CSPの導入手順について | ||
|
|
||
|
|
||
| ---- | ||
|
|
||
| ## Supabseチームはどのようにフロントエンドの高速化に成功したのか - バンクーバーで考え中 | ||
| [jp.taishikato.com/posts/making-the-supabase-dashboard-supa-fast](https://jp.taishikato.com/posts/making-the-supabase-dashboard-supa-fast "Supabseチームはどのようにフロントエンドの高速化に成功したのか - バンクーバーで考え中") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">performance</span> <span class="jser-tag">article</span></p> | ||
|
|
||
| Making the Supabase Dashboard Supa-fastの翻訳記事。 | ||
| ベースラインと目標設定、バンドルサイズの改善、パフォーマンス文化について | ||
|
|
||
| - [Making the Supabase Dashboard Supa-fast](https://supabase.io/blog/2020/12/13/supabase-dashboard-performance "Making the Supabase Dashboard Supa-fast") | ||
|
|
||
| ---- | ||
|
|
||
| ## The #1 tip to familiarize with new JavaScript Codebases | ||
| [www.kevinpeters.net/the-fastest-way-to-understand-new-code-bases](https://www.kevinpeters.net/the-fastest-way-to-understand-new-code-bases "The #1 tip to familiarize with new JavaScript Codebases") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">article</span></p> | ||
|
|
||
| `code-complexity`を使ったコードの複雑度分析について。 | ||
| ComplexityとChurnについて | ||
|
|
||
| - [simonrenoult/code-complexity: Measure the churn/complexity ratio. Higher values mean hotspots where refactorings should happen.](https://github.com/simonrenoult/code-complexity "simonrenoult/code-complexity: Measure the churn/complexity ratio. Higher values mean hotspots where refactorings should happen.") | ||
|
|
||
| ---- | ||
|
|
||
| ## CSS Auditing Tools — Smashing Magazine | ||
| [www.smashingmagazine.com/2021/03/css-auditing-tools/](https://www.smashingmagazine.com/2021/03/css-auditing-tools/ "CSS Auditing Tools — Smashing Magazine") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">CSS</span> <span class="jser-tag">article</span> <span class="jser-tag">Tools</span></p> | ||
|
|
||
| CSSのAuditツールについての記事。 | ||
| CSSセレクタの詳細度、複雑度の測定、Code Coverage、継続的な分析など | ||
|
|
||
|
|
||
| ---- | ||
|
|
||
| ## Next 10 years of Node.js — Understanding the needs of the Node.js constituencies | by Node.js | Mar, 2021 | Medium | ||
| [nodejs.medium.com/next-10-years-of-node-js-understanding-the-needs-of-the-node-js-constituencies-2f95a1df6a6f](https://nodejs.medium.com/next-10-years-of-node-js-understanding-the-needs-of-the-node-js-constituencies-2f95a1df6a6f "Next 10 years of Node.js — Understanding the needs of the Node.js constituencies | by Node.js | Mar, 2021 | Medium") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">node.js</span> <span class="jser-tag">article</span></p> | ||
|
|
||
| Node.jsの次の10年について | ||
|
|
||
| - [nodejs/next-10: Repository for discussion on strategic directions for next 10 years of Node.js](https://github.com/nodejs/next-10 "nodejs/next-10: Repository for discussion on strategic directions for next 10 years of Node.js") | ||
|
|
||
| ---- | ||
| <h1 class="site-genre">ソフトウェア、ツール、ライブラリ関係</h1> | ||
|
|
||
| ---- | ||
|
|
||
| ## 101arrowz/isoworker: Isomorphic workerization with context support | ||
| [github.com/101arrowz/isoworker](https://github.com/101arrowz/isoworker "101arrowz/isoworker: Isomorphic workerization with context support") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">browser</span> <span class="jser-tag">node.js</span> <span class="jser-tag">library</span></p> | ||
|
|
||
| WebWorkerと`worker_threds`に対応したWorkerライブラリ。 | ||
| Inline CodeをWorkerコードを作成し、Workerに対してクラスや関数を含めたデータを渡して実行した結果を取得できる | ||
|
|
||
|
|
||
| ---- | ||
|
|
||
| ## taoqf/node-html-parser: A very fast HTML parser, generating a simplified DOM, with basic element query support. | ||
| [github.com/taoqf/node-html-parser](https://github.com/taoqf/node-html-parser "taoqf/node-html-parser: A very fast HTML parser, generating a simplified DOM, with basic element query support.") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">HTML</span> <span class="jser-tag">DOM</span> <span class="jser-tag">library</span></p> | ||
|
|
||
| HTMLパーサとDOM APIライブラリ。 | ||
| パースした結果のオブジェクトでDOM APIライクな操作ができる。 | ||
|
|
||
|
|
||
| ---- | ||
|
|
||
| ## Hello from tRPC | tRPC | ||
| [trpc.io/](https://trpc.io/ "Hello from tRPC | tRPC") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">browser</span> <span class="jser-tag">node.js</span> <span class="jser-tag">library</span> <span class="jser-tag">TypeScript</span> <span class="jser-tag">React</span> <span class="jser-tag">Next.js</span></p> | ||
|
|
||
| HTTP通信のデータレイヤーライブラリ。 | ||
| TypeScriptとyup/zodなどのバリデーターを使ったサーバ側のAPIエンドポイントを定義し、その型をクライアントからも利用できる。 | ||
| React向けのHooks/SSR対応のクライアントライブラリも公開されている。 | ||
|
|
||
|
|
||
|
|
||
| ---- | ||
|
|
||
| ## Charts.css | ||
| [chartscss.org/](https://chartscss.org/ "Charts.css") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">CSS</span> <span class="jser-tag">library</span></p> | ||
|
|
||
| CSSを使ったグラフライブラリ。 | ||
| 様々な種類のチャートの表示に対応している。 | ||
|
|
||
| ---- | ||
| <h1 class="site-genre">書籍関係</h1> | ||
|
|
||
| ---- | ||
|
|
||
| ## Learning TensorFlow.js | ||
| [learning.oreilly.com/library/view/learning-tensorflowjs/9781492090786/](https://learning.oreilly.com/library/view/learning-tensorflowjs/9781492090786/ "Learning TensorFlow.js") | ||
| <p class="jser-tags jser-tag-icon"><span class="jser-tag">JavaScript</span> <span class="jser-tag">MachineLearning</span> <span class="jser-tag">book</span></p> | ||
|
|
||
| 2021年7月発売 | ||
| TensorFlow.jsの入門書 | ||
|
|
||
|
|
||
| ---- |