Fork me on GitHub

2018-08-07のJS: Chrome 69 Beta、React/Vue/PreactのSSR XSSの修正、Preact 8.3.0

Edit on GitHub 編集履歴を見る

JSer.info #395 - Chrome 69 Betaがリリースされました。

CSS conic gradients、CSS scroll snap、CSS env() functionのサポートなどCSSの変更が多く行われています。
またOffscreenCanvasや
ReportingObserver APIKeyboard Map APIのサポートなどが行われています。

メディア系のアップデートはAudio/Video Updates in Chrome 69  |  Web  |  Google Developersにまとめられています。


React 16.4.2でSSR(サーバサイドレンダリング)時に発生するXSSが修正されています。

あまりないパターンだと思いますが、タグ文字列を含む任意の値を属性値として使っている場合に、SSR時にその属性値がタグとして出力されてしまう問題が修正されています。

let userProvidedData = '></div><script>alert("hi")</script>';
let props = {};
props[userProvidedData] = "hello";
let element = <div {...props} />;
let html = ReactDOMServer.renderToString(element);
// <div ></div><script>alert("hi")</script>

VueとPreactの同様の問題がReactチームによって報告されており、同時に修正がリリースされています。


Preact 8.3.0がリリースされました。

React v16.3.0で追加された
getDerivedStateFromPropsgetSnapshotBeforeUpdateに対応しています。
またmoduleを.mjsで出力するように、setStateの挙動をReactに近づけるように修正などが行われています。


ヘッドライン


Node v10.8.0 (Current) | Node.js

nodejs.org/en/blog/release/v10.8.0/

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

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/

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

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/

JavaScript library ReleaseNote

Dojo 3.0リリース。
パッケージが細かく別れていたものを@dojo/frameworkに統合して利用できるように変更。マイグレーションスクリプトも公開されている。


ESLint v5.3.0 released - ESLint - Pluggable JavaScript linter

eslint.org/blog/2018/08/eslint-v5.3.0-released

ESLint ReleaseNote

ESLint 5.3.0リリース。
正規表現に関するルールが2つ、Async Functionに関するルールが2つ追加された。


Release 8.3.0 · developit/preact

github.com/developit/preact/releases/tag/8.3.0

React library ReleaseNote

Preact 8.3.0リリース。
getDerivedStateFromPropsgetSnapshotBeforeUpdateに対応。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

Chrome ReleaseNote

Chrome 69βリリース。 CSS conic gradients、CSS scroll snap、CSS env() functionのサポート。
ReportingObserver API、Keyboard Map APIのサポートなど


アーティクル


Vue.js で XSS を作り込まないために気を付けること - SSTエンジニアブログ

techblog.securesky-tech.com/entry/2018/08/01/110000

Vue security article XSS

Vue.jsでXSSが発生するポイントについての解説。
v-htmlhrefのバインディグ、サーバサイドのテンプレートとCSRでのエスケープ漏れなどについて


JSDocで型チェックする - Qiita

qiita.com/shisama/items/016288d38165d542fffd

TypeScript article

TypeScriptのallowJscheckJsを使ったJavaScriptでの型チェックについて。
JSDocで書いた型アノテーションや型定義ファイルを元に型チェックを行う方法について


The Cost Of JavaScript In 2018 – Addy Osmani – Medium

medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4

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

Vue React article

VueとReactで同じTodoアプリを作って比較する記事。
処理ごとにそれぞれのやり方を比較して紹介している。


ちゃんと理解するCode Splitting - Qiita

qiita.com/seya/items/06b160adb7801ae9e66f

webpack article JavaScript

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


スライド、動画関係


Storybook Tutorial

www.learnstorybook.com/

React Angular Vue tutorial

Storybookのチュートリアル。
React、Angular、Vueに対応したStirybookでのコンポーネント開発やChromaticを使ったビジュアルテストなどについて書かれている


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


Frontend News

frontendnews.io/

CSS DOM JavaScript mail web

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


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


Fusion.js Documentation

fusionjs.com/

JavaScript library plugin browser node.js

UberのプラグインベースなBrowser/Node.jsウェブフレームワーク。コアにプラグインの仕組みとDIの仕組みを持ち、ReactやRedux、KoaなどUberがよく利用しているものをプラグインとして導入できる。
webpackやbabelなどをラップするcliがあり、create-react-appのように設定ファイルを触らずに開発ができる。


sasha240100/between.js: Lightweight JavaScript (ES6) tweening engine

github.com/sasha240100/between.js

JavaScript library

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


この記事へ修正リクエストをする
記事を紹介する