From fd41987ceb26c4f8d54cbaa36590ad32ebf582f1 Mon Sep 17 00:00:00 2001 From: azu Date: Tue, 7 Aug 2018 10:24:38 +0900 Subject: [PATCH] =?UTF-8?q?2018-08-07=E3=81=AEJS:=20Chrome=2069=20Beta?= =?UTF-8?q?=E3=80=81React/Vue/Preact=E3=81=AESSR=20XSS=E3=81=AE=E4=BF=AE?= =?UTF-8?q?=E6=AD=A3=E3=80=81Preact=20=208.3.0=20(#536)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * [Chromium Blog: Chrome 69 Beta: CSS tricks, and more](https://blog.chromium.org/2018/08/chrome-69-beta-av1-video-decoder-css.html "Chromium Blog: Chrome 69 Beta: CSS tricks, and more") * [React v16.4.2: Server-side vulnerability fix - React Blog](https://reactjs.org/blog/2018/08/01/react-v-16-4-2.html "React v16.4.2: Server-side vulnerability fix - React Blog") * [Sanitize unknown attribute names for SSR by gaearon · Pull Request #13302 · facebook/react](https://github.com/facebook/react/pull/13302 "Sanitize unknown attribute names for SSR by gaearon · Pull Request #13302 · facebook/react") * [Release 8.3.0 · developit/preact](https://github.com/developit/preact/releases/tag/8.3.0 "Release 8.3.0 · developit/preact") * [Vue.js で XSS を作り込まないために気を付けること - SSTエンジニアブログ](https://techblog.securesky-tech.com/entry/2018/08/01/110000 "Vue.js で XSS を作り込まないために気を付けること - SSTエンジニアブログ") * [Fusion.js Documentation](https://fusionjs.com/ "Fusion.js Documentation") * [Introducing Fusion.js: A Plugin-based Universal Web Framework](https://eng.uber.com/fusionjs/ "Introducing Fusion.js: A Plugin-based Universal Web Framework") * [Deprecations and removals in Chrome 69  |  Web  |  Google Developers](https://developers.google.com/web/updates/2018/08/chrome-69-deps-rems "Deprecations and removals in Chrome 69  |  Web  |  Google Developers") * [Chrome Platform Status](https://www.chromestatus.com/features#browsers.chrome.desktop%3D69 "Chrome Platform Status") --- ...9-betareactvuepreactssr-xsspreact-8.3.0.md | 260 ++++++++++++++++++ 1 file changed, 260 insertions(+) create mode 100644 _i18n/ja/_posts/2018/2018-08-07-chrome-69-betareactvuepreactssr-xsspreact-8.3.0.md diff --git a/_i18n/ja/_posts/2018/2018-08-07-chrome-69-betareactvuepreactssr-xsspreact-8.3.0.md b/_i18n/ja/_posts/2018/2018-08-07-chrome-69-betareactvuepreactssr-xsspreact-8.3.0.md new file mode 100644 index 00000000000..1d5d93f7348 --- /dev/null +++ b/_i18n/ja/_posts/2018/2018-08-07-chrome-69-betareactvuepreactssr-xsspreact-8.3.0.md @@ -0,0 +1,260 @@ +--- +title: "2018-08-07のJS: Chrome 69 Beta、React/Vue/PreactのSSR XSSの修正、Preact 8.3.0" +author: "azu" +layout: post +date : 2018-08-07T00:52:37.711Z +category: JSer +tags: +- chrome +- react +- vue +- preact + +--- + +JSer.info #395 - Chrome 69 Betaがリリースされました。 + +- [Chromium Blog: Chrome 69 Beta: CSS tricks, and more](https://blog.chromium.org/2018/08/chrome-69-beta-av1-video-decoder-css.html) +- [Audio/Video Updates in Chrome 69  |  Web  |  Google Developers](https://developers.google.com/web/updates/2018/08/chrome-69-media-updates "Audio/Video Updates in Chrome 69  |  Web  |  Google Developers") +- [Deprecations and removals in Chrome 69  |  Web  |  Google Developers](https://developers.google.com/web/updates/2018/08/chrome-69-deps-rems "Deprecations and removals in Chrome 69  |  Web  |  Google Developers") +- [Chrome Platform Status](https://www.chromestatus.com/features#browsers.chrome.desktop%3D69 "Chrome Platform Status") + +CSS conic gradients、CSS scroll snap、CSS `env()` functionのサポートなどCSSの変更が多く行われています。 +またOffscreenCanvasや +[ReportingObserver API](https://developers.google.com/web/updates/2018/07/reportingobserver)、[Keyboard Map API](https://github.com/WICG/keyboard-map)のサポートなどが行われています。 + +WebRTCやメディア系のアップデートは[Audio/Video Updates in Chrome 69  |  Web  |  Google Developers](https://developers.google.com/web/updates/2018/08/chrome-69-media-updates "Audio/Video Updates in Chrome 69  |  Web  |  Google Developers")にまとめられています。 + +--- + +React 16.4.2でSSR（サーバサイドレンダリング）時に発生するXSSが修正されています。 + +- [React v16.4.2: Server-side vulnerability fix - React Blog](https://reactjs.org/blog/2018/08/01/react-v-16-4-2.html) + +あまりないパターンだと思いますが、タグ文字列を含む任意の値を属性値として使っている場合に、SSR時にその属性値がタグとして出力されてしまう問題が修正されています。 + +```js +let userProvidedData = '>'; +let props = {}; +props[userProvidedData] = "hello"; +let element =
; +let html = ReactDOMServer.renderToString(element); +//
+``` + +VueとPreactの同様の問題が[Reactチームによって報告](https://github.com/facebook/react/pull/13302)されており、同時に修正がリリースされています。 + + + + + + + +---- + +Preact 8.3.0がリリースされました。 + +- [Release 8.3.0 · developit/preact](https://github.com/developit/preact/releases/tag/8.3.0) + +[React v16.3.0](https://reactjs.org/blog/2018/03/29/react-v-16-3.html)で追加された +`getDerivedStateFromProps`と`getSnapshotBeforeUpdate`に対応しています。 +またmoduleを`.mjs`で出力するように、`setState`の挙動をReactに近づけるように修正などが行われています。 + + +---- + +

ヘッドライン

+ +---- + +## Node v10.8.0 (Current) | Node.js +[nodejs.org/en/blog/release/v10.8.0/](https://nodejs.org/en/blog/release/v10.8.0/ "Node v10.8.0 (Current) | Node.js") +

node.js npm ReleaseNote

+ +Node v10.8.0リリース。 +npm 6.2.0が同梱されるようになった。 + + +---- + +## React v16.4.2: Server-side vulnerability fix - React Blog +[reactjs.org/blog/2018/08/01/react-v-16-4-2.html](https://reactjs.org/blog/2018/08/01/react-v-16-4-2.html "React v16.4.2: Server-side vulnerability fix - React Blog") +

React ReleaseNote security

+ +React 16.4.2リリース。 +SSRにおいてユーザー入力をコンポーネントの属性名に渡せるとXSSが発生する問題を修正。 +minorごとに同様のpatchリリースが公開されている。 +VueとPreactも同様の問題があり、合わせてsecurity fixがリリースされた。 + + +---- + +## Release Notes for Safari Technology Preview 62 | WebKit +[webkit.org/blog/8384/release-notes-for-safari-technology-preview-62/](https://webkit.org/blog/8384/release-notes-for-safari-technology-preview-62/ "Release Notes for Safari Technology Preview 62 | WebKit") +

safari ReleaseNote

+ +Safari Technology Preview 62リリース。 +ITPデバッグモードの試験的追加、`JSON.stringify`の修正、HLSストリームのキャッシュを無効化、CSS Gridの`gap`プロパティにおける`calc`が動くように修正など + + +---- + +## TestCafe v0.21.0 Released | TestCafe +[devexpress.github.io/testcafe/blog/testcafe-v0-21-0-released.html](http://devexpress.github.io/testcafe/blog/testcafe-v0-21-0-released.html "TestCafe v0.21.0 Released | TestCafe") +

browser testing E2E ReleaseNote

+ +TestCafe v0.21.0リリース。 +テストページをHTTPSでアクセスできるように、スクリーンショットのパスに変数を使えるようになるなど + + +---- + +## Dojo Version 3.0 | Dojo +[dojo.io/blog/2018/07/27/2018-07-27-Dojo-version-3-release/](https://dojo.io/blog/2018/07/27/2018-07-27-Dojo-version-3-release/ "Dojo Version 3.0 | Dojo") +

JavaScript library ReleaseNote

+ +Dojo 3.0リリース。 +パッケージが細かく別れていたものを`@dojo/framework`に統合して利用できるように変更。マイグレーションスクリプトも公開されている。 + +- [framework/V3-Migration-Guide.md at master · dojo/framework](https://github.com/dojo/framework/blob/master/docs/V3-Migration-Guide.md "framework/V3-Migration-Guide.md at master · dojo/framework") + +---- + +## ESLint v5.3.0 released - ESLint - Pluggable JavaScript linter +[eslint.org/blog/2018/08/eslint-v5.3.0-released](https://eslint.org/blog/2018/08/eslint-v5.3.0-released "ESLint v5.3.0 released - ESLint - Pluggable JavaScript linter") +

ESLint ReleaseNote

+ +ESLint 5.3.0リリース。 +正規表現に関するルールが2つ、Async Functionに関するルールが2つ追加された。 + +- [ESLint v5.3.0 - Qiita](https://qiita.com/mysticatea/items/eb99e18d6cc7c3bf9317 "ESLint v5.3.0 - Qiita") +- [Promise のコンストラクタに渡した async function 内で throw しても rejected な Promise は作られない（常に fulfilled になる） - Humanity](http://tyru.hatenablog.com/entry/2018/08/04/220530 "Promise のコンストラクタに渡した async function 内で throw しても rejected な Promise は作られない（常に fulfilled になる） - Humanity") + +---- + +## Release 8.3.0 · developit/preact +[github.com/developit/preact/releases/tag/8.3.0](https://github.com/developit/preact/releases/tag/8.3.0 "Release 8.3.0 · developit/preact") +

React library ReleaseNote

+ +Preact 8.3.0リリース。 +`getDerivedStateFromProps`と`getSnapshotBeforeUpdate`に対応。moduleを`.mjs`で出力するように、`setState`の挙動をReactに近づけるように修正など + + +---- + +## Chromium Blog: Chrome 69 Beta: CSS tricks, and more +[blog.chromium.org/2018/08/chrome-69-beta-av1-video-decoder-css.html](https://blog.chromium.org/2018/08/chrome-69-beta-av1-video-decoder-css.html "Chromium Blog: Chrome 69 Beta: CSS tricks, and more") +

Chrome ReleaseNote

+ +Chrome 69βリリース。 CSS conic gradients、CSS scroll snap、CSS `env()` functionのサポート。 +ReportingObserver API、Keyboard Map APIのサポートなど + +- [Audio/Video Updates in Chrome 69  |  Web  |  Google Developers](https://developers.google.com/web/updates/2018/08/chrome-69-media-updates "Audio/Video Updates in Chrome 69  |  Web  |  Google Developers") +- [Deprecations and removals in Chrome 69  |  Web  |  Google Developers](https://developers.google.com/web/updates/2018/08/chrome-69-deps-rems "Deprecations and removals in Chrome 69  |  Web  |  Google Developers") +- [Chrome Platform Status](https://www.chromestatus.com/features#browsers.chrome.desktop%3D69 "Chrome Platform Status") + +---- +

アーティクル

+ +---- + +## Vue.js で XSS を作り込まないために気を付けること - SSTエンジニアブログ +[techblog.securesky-tech.com/entry/2018/08/01/110000](https://techblog.securesky-tech.com/entry/2018/08/01/110000 "Vue.js で XSS を作り込まないために気を付けること - SSTエンジニアブログ") +

Vue security article XSS

+ +Vue.jsでXSSが発生するポイントについての解説。 +`v-html`、`href`のバインディグ、サーバサイドのテンプレートとCSRでのエスケープ漏れなどについて + + +---- + +## JSDocで型チェックする - Qiita +[qiita.com/shisama/items/016288d38165d542fffd](https://qiita.com/shisama/items/016288d38165d542fffd "JSDocで型チェックする - Qiita") +

TypeScript article

+ +TypeScriptの`allowJs`と`checkJs`を使ったJavaScriptでの型チェックについて。 +JSDocで書いた型アノテーションや型定義ファイルを元に型チェックを行う方法について + + +---- + +## The Cost Of JavaScript In 2018 – Addy Osmani – Medium +[medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4](https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4 "The Cost Of JavaScript In 2018 – Addy Osmani – Medium") +

JavaScript article performance

+ +JavaScriptのパフォーマンスコストについての記事。 +ファイルサイズ、ロード時間、インタラクティブになるまでの時間、モバイルや低スペックマシンでのコスト。 +またパフォーマンスを改善するパターンなどについて + + +---- + +## I created the exact same app in React and Vue. Here are the differences. +[medium.com/javascript-in-plain-english/i-created-the-exact-same-app-in-react-and-vue-here-are-the-differences-e9a1ae8077fd](https://medium.com/javascript-in-plain-english/i-created-the-exact-same-app-in-react-and-vue-here-are-the-differences-e9a1ae8077fd "I created the exact same app in React and Vue. Here are the differences.") +

Vue React article

+ +VueとReactで同じTodoアプリを作って比較する記事。 +処理ごとにそれぞれのやり方を比較して紹介している。 + + +---- + +## ちゃんと理解するCode Splitting - Qiita +[qiita.com/seya/items/06b160adb7801ae9e66f](https://qiita.com/seya/items/06b160adb7801ae9e66f "ちゃんと理解するCode Splitting - Qiita") +

webpack article JavaScript

+ +webpackにおけるCode Splittingの動作の解説。Code Splittingのメリットとデメリット。 +Code SplittingするUIのパターンやDynamic Import、`webpackPrefetch`オプション、VueやReactでの対応についてなど + + +---- +

スライド、動画関係

+ +---- + +## Storybook Tutorial +[www.learnstorybook.com/](https://www.learnstorybook.com/ "Storybook Tutorial") +

React Angular Vue tutorial

+ +Storybookのチュートリアル。 +React、Angular、Vueに対応したStirybookでのコンポーネント開発やChromaticを使ったビジュアルテストなどについて書かれている + +- [Chromatic visual testing for React](https://www.chromaticqa.com/ "Chromatic visual testing for React") + +---- +

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

+ +---- + +## Frontend News +[frontendnews.io/](https://frontendnews.io/ "Frontend News") +

CSS DOM JavaScript mail web

+ +フロントエンドに関する1週間に1つのTipsについてを更新するサイト + + +---- +

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

+ +---- + +## Fusion.js Documentation +[fusionjs.com/](https://fusionjs.com/ "Fusion.js Documentation") +

JavaScript library plugin browser node.js

+ +UberのプラグインベースなBrowser/Node.jsウェブフレームワーク。コアにプラグインの仕組みとDIの仕組みを持ち、ReactやRedux、KoaなどUberがよく利用しているものをプラグインとして導入できる。 +webpackやbabelなどをラップするcliがあり、create-react-appのように設定ファイルを触らずに開発ができる。 + +- [Introducing Fusion.js: A Plugin-based Universal Web Framework](https://eng.uber.com/fusionjs/ "Introducing Fusion.js: A Plugin-based Universal Web Framework") + +---- + +## sasha240100/between.js: Lightweight JavaScript (ES6) tweening engine +[github.com/sasha240100/between.js](https://github.com/sasha240100/between.js "sasha240100/between.js: Lightweight JavaScript (ES6) tweening engine") +

JavaScript library

+ +AからBへ値の変化を扱えるライブラリ。 +Tweening animationのような特定のイージングやループでの値の変化を扱う。 + + +----