ep53 Monthly Web 201905
- published_at
- 2019-05-26
- guest
- @myakura
- toc
- 
          headings
Theme
第 53 回のテーマは 2019 年 5 月の Monthly Web です。
Show Note
mozaic bootcamp 2019
- mozaic bootcamp 2019
- lmozaic bootcamp に行ってきました - isyumi_net ブログ
- mozaic bootcamp に参加して気づいた、自分に欠けていた Web 技術の知識メモ - ninjinkun's diary
Chrome 動向
- Stable: 74
- 
            Google I/O
            - Web at Google I/O 2019 - YouTube PlayList
- 
                I/O Web Updates - Slide
                - https://docs.google.com/presentation/d/1ogXPs8U3Uxs5sNaXzK3HX6SquP8ZPJCSW6DGBsjUoQw/
- LazyLoading blog
- Portals
- SXG
- Paint Holding
- Firebase Performance Monitoring for Web
- 
                    New Metrics
                    - Layout Stability: どれくらい読み込み中にコンテンツが動いたか
- Largest Content Paint: 最も大きな画像やテキストが表示されるまでの時間
 
- Project Fugu
- Googlebot to latest chrome
- Google Fonts Support CSS font-display
- Trusted Web Activities(TWA)
- etc, etc, etc
 
- Chromium Blog: Google I/O 2019: What's new with Chrome and the Web
 
- 
            Updates
            - Share files with Web Share
- Deprecations and removals in Chrome 75
- Low-latency rendering with the desynchronized hint
- Chromium Blog: Chrome 75 Beta: low latency canvas contexts, sharing files, and numeric separators
- AMP as your web framework
- 
                Paint Holding - reducing the flash of white on same-origin navigations
                - https://developers.google.com/web/updates/2019/05/paint-holding
- ページ遷移のときに一度白でペイントしていたのをやめて前の画面を残す
- FCP まで compositor commit を送られせるなど
 
- 
                Chromium Blog: Improving privacy and security on the web
                - https://blog.chromium.org/2019/05/improving-privacy-and-security-on-web.html
- SameSiteCookie や Fingerprint 対策など、プライバシー保護を強化していく
 
- Official Google Webmaster Central Blog: The new evergreen Googlebot
- Signed-Exchange: Solving the AMP URLs Display Problem
- A year into contributing back lessons learned from AMP to the whole web
- Privacy-preserving instant loading for all web content
- The Chromium Chronicle: Fighting Test Flakiness
 
- 
            Intents
            - Ship: Media Queries: prefers-color-scheme feature
- Ship: IndexedDB transaction explicit commit API call
- Ship: Add formatRange / formatRangeToParts to DateTimeFormat
- Ship: pointerrawupdate
- Ship: changePaymentMethod() and payment method change event
- Ship: PaymentResponse.retry() and payerdetailchange event
- Ship: Form-associated custom elements
- Ship: 'formdata' event
- Ship: Adding ImageBitmapRenderingContext to OffscreenCanvas
- 
                Ship: Feature Policy 'focus-without-user-activation'
                - https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/pnUiTrLHHmw/CDN1s3F1BQAJ
- JS で focus()するのを防ぐ FP
 
- Implement and Ship: IDBCursor request
- Implement and Ship: Animation.pending
- Implement and Ship: Escape key is not a user activation
- Implement and Ship: Scroll Snap Stop
- Implement and Ship: Redact address in PaymentRequest.onshippingaddresschange event
- Implement and Ship: Animation.updatePlaybackRate
- Implement and Ship: RTCRtpSender.setStreams()
- Implement and ship: createOffer/createAnswer constraint to enable RTCPeerConnection simulcast
- Implement and Ship: Enter Key Hint
- 
                Implement and Ship: form.requestSubmit()
                - https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/CxelaeahNho/aC6Zp8KvAwAJ
- <form>の- submit()と- <button type=submit>を- click()したのでは挙動が違う
- interactive validation, submit events etc
- <button type=submit>を作って- click()したかのように挙動させる API
 
- Implement and Ship: Entering fullscreen consumes user activation
- Implement and Ship: Synthetic Modules
- Implement: IFrame execution/freezing feature policy
- 
                Implement: Periodic Background Sync
                - https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/61yC4_xbZRA/mpB5rMBTDwAJ
- Background Sync を定期実行するための API
- 時間設定が厳守されるわけではなく、ネットワーク状況などに応じて
 
- Implement: JS Self-Profiling API
- 
                Implement: Picture-in-Picture for arbitrary content
                - https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/uK0hyACy_fg/XXFsm_4kDAAJ
- PinP で Video 以外に任意のコンテンツを再生できるように
 
- Implement (meta): Bundled HTTP Exchanges
- Implement: High-risk insecure download blocking in secure contexts
- Implement: "numberingSystem" option for Intl.NumberFormat / "calendar" and "numberingSystem" option for Intl.DateTimeFormat
- Implement: Pause Worklets and Dedicated Workers Execution on document freeze
- Implement: CSS Color Adjust: color-scheme property
- Implement: Intl.DisplayNames API Proposal
- Implement: Intl.NumberFormat Unified API Proposal
- Implement: Add dayPeriod option for Intl.DateTimeFormat
- Implement: Add quarter option for Intl.DateTimeFormat
- Extend Origin Trial: HrefTranslate HTMLAnchor attribute
- Extend Origin Trial: Badging API
- Experiment: Origin Trial: WebXR Device API
- QUIC API Original Trial extended to support datagrams
- Change:
- Unship:
- Remove:
- 
                Deprecate and Remove: "_current"special window name
- PSA: History Manipulation Intervention
- PSA: Media Capabilities enabled in Workers
- PSA: blink::UseCounter changes
- 
                PSA: Turning on LayoutNG
                - https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/88RzfOIZFi8/sB8BmhblBQAJ
- LayoutNG が Chrome 76 から有効に
- Float, Writing Mode, RTL, Text Layout など様々が更新される
- ページも更新された
- https://www.chromium.org/blink/layoutng
- https://docs.google.com/document/d/1uxbDh4uONFQOiGuiumlJBLGgO4KDWB8ZEkp7Rd47fw4
 
- FYI: LayoutNG enabled on clusterfuzz & perf bots
 
- 
            Team Weekly Snippet
            - Loading (blink-dev)
- Storage (blink-dev)
- Platform Architecture (blink-dev)
- Layout (layout-dev)
 
- 
            v8
            - v8 blog
 
- 
            Other
            - A year into contributing back lessons learned from AMP to the whole web
- Privacy-preserving instant loading for all web content
- 
                OOR-CORS is enabled by default on HEAD
                - https://groups.google.com/a/chromium.org/forum/#!msg/network-service-dev/tM2Yba-G8nU/I7PUAnU5AgAJ
- Out Of Renderer CORS がデフォルトに
 
- 
                Google Developers Blog: Flutter: a Portable UI Framework for Mobile, Web, Embedded, and Desktop
                - https://developers.googleblog.com/2019/05/Flutter-io19.html
- Flutter for web
 
 
Firefox 動向
- Stable: 67
- 
            Updates
            - Firefox 67.0, See All New Features, Updates and Fixes
- 
                Latest Firefox Release is Faster than Ever
                - https://blog.mozilla.org/blog/2019/05/21/latest-firefox-release-is-faster-than-ever/
- setTimeout()のプライオリティ調整など
- cryptomining, fingerprinting のブロックが設定画面に追加
 
- How to block fingerprinting with Firefox
- Let Firefox help you block cryptominers from your computer
- Firefox 67: Dark Mode CSS, WebRender, and more
- 
                Firefox 67 for developers
                - https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/67
- prefers-color-scheme
- String.matchAll()
- Dynamic import()
- hashbang grammar
- CSS revert keyword
- word-break: break-word
 
- These Weeks in Firefox: Issue 58
- 
                These Weeks in Firefox: Issue 59
                - https://blog.nightly.mozilla.org/2019/05/22/these-weeks-in-firefox-issue-59/
- 通知プロンプトの自動ブロックが Beta にも展開されたとの情報
 
- 
                TLS 1.0 and 1.1 Removal Update
                - https://hacks.mozilla.org/2019/05/tls-1-0-and-1-1-removal-update/
- Firefox 68 からコンソールに警告がでる
- 10 月には Nightly で無効にする予定
 
- 
                Faster smarter JavaScript debugging in Firefox DevTools
                - https://hacks.mozilla.org/2019/05/faster-smarter-javascript-debugging-in-firefox/
- Firefox 67 の Firefox DevTools の機能向上について
- 高速化、オーバーヘッド削減、ソースマップのサポート向上
- column breakpoints
- logpoints
 
- 
                Graphics Team ships WebRender MVP!
                - https://mozillagfx.wordpress.com/2019/05/21/graphics-team-ships-webrender-mvp/
- Firefox 67 で Windows 10 + NVIDIA なデスクトップで WebRender が有効に
 
- Password Manager Improvements in Firefox 67
- 
                Firefox 67: Dark Mode CSS, WebRender, and more
                - https://hacks.mozilla.org/2019/05/firefox-67-dark-mode-css-webrender/
- prefers-color-scheme
- Enhanced Privacy Controls
- Support for legacy FIDO U2F APIs
- AV1 on Windows, Linux, and macOS
- String.prototype.matchAll()
- Dynamic Imports
 
- Latest Firefox Release is Faster than Ever
- 
                How to block fingerprinting with Firefox
                - https://blog.mozilla.org/firefox/how-to-block-fingerprinting-with-firefox/
- Fingerprint の block などのオプションが追加
 
- Save and update passwords in Private Browsing with Firefox
 
- 
            Intents
            - Ship: Visual Viewport API on Android
- Implement and Ship: CSSStyleSheet.rules, CSSStyleSheet.removeRule, CSSStyleSheet.addRule
- Implement: CSS line-break property
- Implement: Automatically removing replaced filling Web Animations
- Unship: typeMustMatch attribute on elements
- Unship: hasFeature() method on some SVG elements
- Implement: Cookie SameSite=lax by default and SameSite=none only if secure
 
- 
            Site Compat
            - Part of Shadow DOM v0 API has been removed
- window.localStorage no longer throws SecurityError when blocked due to privacy settings
- Notifications API can no longer be used on insecure sites
- Legacy Touch Events API is now disabled on desktop
- CSS animation and transition events are now fired on disabled form widgets
 
- 
            Other
            - What we do when things go wrong
- 
                Technical Details on the Recent Firefox Add-on Outage
                - https://hacks.mozilla.org/2019/05/technical-details-on-the-recent-firefox-add-on-outage/
- 拡張の中間証明書が失効したため拡張が一時使えない状況に
- 2019 年 5 月 4 日前後から発生している Firefox のアドオン無効化問題の詳細な解説 - ククログ(2019-05-07)
- https://www.clear-code.com/blog/2019/5/7.html
 
- 
                Owning it: browser compatibility data and open source governance
                - https://hacks.mozilla.org/2019/05/browser-compatibility-data-and-open-source-governance/
- BCD のこれまで
- ガバナンス体制を強化した
- 2019 年はデータを完全なものにしたいという野望も持っていると
 
- 
                Remove browser and OS architecture from Firefox's User-Agent string?
                - https://groups.google.com/d/topic/mozilla.dev.platform/vEMIqgnMxRw/discussion
- UA 文字列から OS のアーキテクチャなど(WOW64とか)を削ろうという提案
- ソフトウェアのダウンロードページなどに影響が出ないかなどの疑問が出ている
 
- 
                Become A Beta Testing BugHunter
                - https://events.mozilla.org/becomeabetatestingbughunter
- Fenix の β テスト
 
 
Safari 動向
- Stable: 12.1
- 
            Updates
            - 
                Release Notes for Safari Technology Preview 81
                - https://webkit.org/blog/8834/release-notes-for-safari-technology-preview-81/
- supported-color-schemeが- color-schemeに
- requestAnimationFrame()が次のフレームの前に実行されるように
- Ad Click Attribution(後述)
 
- 
                Release Notes for Safari Technology Preview 82
                - https://webkit.org/blog/8921/release-notes-for-safari-technology-preview-82/
- Fetch API の keep-alive が有効に
 
 
- 
                Release Notes for Safari Technology Preview 81
                
- 
            Other
            - Dark Mode Support in WebKit
- Dark Mode in Web Inspector
- Debugging Media in Web Inspector
- 
                Privacy Preserving Ad Click Attribution For the Web
                - https://webkit.org/blog/8943/privacy-preserving-ad-click-attribution-for-the-web/
- 広告のコンバージョンを測る Cookie を無効にしたい
- かわりに adcampaignidとaddestination属性を a 要素に追加
- id には 64 までの整数のみ許可する模様
- コンバージョン結果は 24~48h の間に wellknown uri に post される
- /.well-known/ad-click-attribution/
- そして Opt-Out 可能に
 
 
Edge 動向
- 
            MS Build
            - https://www.microsoft.com/en-us/build
- Microsoft Edge with Internet Explorer Mode
- Moving the web forward with Microsoft Edge
- State of the browser: Microsoft Edge
- Microsoft Edge and Chromium: A rising tide lifts all boats
- Building WebAssembly apps with Microsoft's stack
 
- 
            Stable: Edge 42 / EdgeHTML 17 (Preview 76)
            - Introducing the first Microsoft Edge preview builds for macOS
 
- Status Updates
- EdgeHTML
- Build Changelog
- 
            Chakra
            - Release ChakraCore v1.11.9 · microsoft/ChakraCore
 
- 
            Other
            - Developer Tools UI updates for Microsoft Edge Insiders
- Microsoft Edge - All the news from Build 2019
- 
                Inside Microsoft's surprise decision to work with Google on its Edge browser
                - https://www.theverge.com/2019/5/6/18527550/microsoft-chromium-edge-google-history-collaboration
- Edge を Chromium ベースにする決断をしたときのインタビュー
 
- https://social.msdn.microsoft.com/Forums/ja-JP/home?forum=edgeiesupportteamja
- https://developer.microsoft.com/en-us/microsoft-edge/platform/
 
WHATWG/W3C 動向
- Recommendation
- Proposed Recommendation
- 
            Candidate Recommendation
            - W3C Invites Implementations of CSS Easing Functions Level 1
- W3C Invites Implementations of CSS Containment Module Level 1
- W3C Invites Implementations of Trace Context
- W3C Invites Implementations of WoT Thing Description and WoT Architecture
 
- Working Draft
- 
            First Public Working Draft
            - First Public Working Draft: CSS Color Adjust Module Level 1
 
- 
            Chartering
            - Chemistry for the Web and Publishing Community Group created
- Web Applications Working Group Charter Approved; Call for Participation
- Web & Networks Interest Group Charter Approved; Call for Participation
 
- 
            Other
            - 
                Privacy Preserving Ad Click Attribution
                - https://wicg.github.io/ad-click-attribution/index.html
- fingerprinting 避けつつ、クリック元を伝えるためのしくみ
- 現時点の提案は adcampaignidとaddestination属性を a 要素に追加する
 
- 
                JSON module support
                - https://github.com/whatwg/html/commit/db03474b8b87aab3454ff7d5c1f4a5f044b4395c
- import文で JSON を読み込めるように
 
- Introduce form-associated custom elements
- 
                Add form.requestSubmit()
                - https://github.com/whatwg/html/commit/e0742f8fdf3b119fdabdcad01d2ebfef1d7a2262
- submit ボタンを押した時の挙動(バリデーション、submitイベント発火)と同様のメソッド
 
- Define button layout
- WebComponents F2F Spring 2019
- 
                tkent-google/std-switch
                - https://github.com/tkent-google/std-switch
- スイッチコントロールを標準コンポーネント化する試み
 
 
- 
                Privacy Preserving Ad Click Attribution
                
TC39 動向
- Proposals Diff
- New Proposals
- Other
IETF 動向
- IETF
- 
            RFC
            - 
                RFC 8594 - The Sunset HTTP Header Field
                - https://tools.ietf.org/html/rfc8594
- サービスが落ちる時間を前もって知らせるヘッダ
 
- RFC 8615 - Well-Known Uniform Resource Identifiers (URIs)
- 
                RFC 8547 - TCP-ENO: Encryption Negotiation Option
                - https://tools.ietf.org/html/rfc8547
- TCP のネゴシエーションのなかで暗号化ハンドシェークする手法?
 
- 
                RFC 8548 - Cryptographic Protection of TCP Streams (tcpcrypt)
                - https://tools.ietf.org/html/rfc8548
- TCP-ENO と組み合わせる暗号化手法?
 
 
- 
                RFC 8594 - The Sunset HTTP Header Field
                
- IETF Last Call
- WG Last Call
- Call for Adoption
- I-D Action
- 
            Draft
            - 
                The WebTransport Protocol Framework
                - https://tools.ietf.org/html/draft-vvv-webtransport-overview-00
- WS っぽい API で通信できるようにしたい
- 多重化、再送なしなども含む
- Client-Server で ICE なし
- 今は QUIC や HTTP/3 など
 
- WebTransport over HTTP/3
- WebTransport over QUIC
- The Devil is in the Deployment
- Link relationship types for authentication
- HTTP-client suggested Push Preference
- JSCalendar: Converting from and to iCalendar
- Using NETCONF over QUIC connection
- Changes in the Internet Threat Model
- DNS Resolver Information Self-publication
- Terminology for DNS Transports and Location
- JSON Schema Language
- The Proxy-Status HTTP Header Field
- Public Key Authenticated Encryption for JOSE: ECDH-1PU
- Change Status of RFC 2675 to Historic
- Process for Handling Non-Major Revisions to Existing RFCs
- Incrementally Better Cookies
- First-Party Sets and SameSite Cookies
- Importing External PSKs for TLS
- Using TLS 1.3 with HTTP/2
- Use of the Walnut Digital Signature Algorithm with CBOR Object Signing and Encryption (COSE)
- ACME Overview
- ACME Integrations
- Transactional Authorization
- Network-Based Website Fingerprinting
- Updated Recall Procedures for IETF Leadership
 
- 
                The WebTransport Protocol Framework
                
- 
            Other
            - 
                Incremental improvements to cookies. from Mike West
                - https://lists.w3.org/Archives/Public/ietf-http-wg/2019AprJun/0125.html
- https://mikewest.github.io/cookie-incrementalism/draft-west-cookie-incrementalism.html
- blog
- Cookie を徐々に改善していく話
- まずは SameSite=Lax をデフォルトに
- SameSite=None にするには Secure を強制
 
- SameSite cookies explained
 
- 
                Incremental improvements to cookies. from Mike West
                
セキュリティ動向
- 
            日本ハッカー協会セミナー「不正指令電磁的記録罪の傾向と対策」
            - https://www.youtube.com/watch?v=umYIqISRIbg
- https://www.hacker.or.jp/regist/
- 先月紹介した勉強会のビデオ
- ポスト「意図しない逮捕」時代に Web エンジニアが見ておきたい話
 
- 
            Google Online Security Blog: New research: How effective is basic account hygiene at preventing hijacking
            - https://security.googleblog.com/2019/05/new-research-how-effective-is-basic.html
- 2FA の各手法ががアカウント乗っ取りにどれくらい有効なのかリサーチ
- セキュリティキーやオンスクリーンプロンプトはかなりブロックできる
- SMS はまあまあ
 
- 
            Report from the curl bounty program
            - https://daniel.haxx.se/blog/2019/05/22/report-from-the-curl-bounty-program/
- curl が Hackerone で脆弱性を集めている
- すでに 2 件来ている
 
- 
            Abusing jQuery for CSS powered timing attacks
            - https://portswigger.net/blog/abusing-jquery-for-css-powered-timing-attacks
- CSS selector で Timing Attack
 
周辺動向
- 
            kkuchta/css-only-chat: A truly monstrous async web chat using no JS whatsoever on the frontend
            - https://github.com/kkuchta/css-only-chat
- CSS だけでチャット
- chunked encoding で途中まで HTML を返しておく
- ボタンの :active で background-image をロードする
- その URL で押された文字を判定しそれを入れた HTML の chunk をまた返す
- 返された chunk でそこまでに表示されたメッセージを display: none する
- JS はいらないがサーバで頑張ってる
 
- AV1 リアルタイムハードウェアエンコーダを開発しました - dwango on GitHub
- Fastly CTO に聞く、同社が WebAssembly 実行環境の「Lucet」をエッジコンピューティング環境として開発している理由とは? - Publickey
- WASI の標準化: WebAssembly をウェブの外で使うためのシステムインターフェース (翻訳)
- Lucet's performance and lifecycle
- 
            A Conspiracy To Kill IE6
            - https://blog.chriszacharias.com/a-conspiracy-to-kill-ie6
- 元 YouTube エンジニアによる YouTube が IE6 サポートを打ち切るための策略についての回顧録
- IE6 のサポートを段階的に打ち切るバナーを表示
- 買収前の古い YouTube 社員によって作られた "OldTuber" という、Google のインフラチェックをバイパスする権限を悪用した
- バナーを見た Google Docs のエンジニアもそれを理由に同様のバナーを表示
 
- NGINX structural enhancements for HTTP/2 performance
- Faster script loading with BinaryAST?
- Better HTTP/2 Prioritization for a Faster Web
- WebAssembly at eBay: A Real-World Use Case
イベント
- 
            5 月
            - 6-8: MS Build
- 7-9: Google I/O
- 29-30: de:code 2019
 
- 
            6 月
            - 1-2: JSConf EU
- 3-7: WWDC
- TC39 Meeting
 
- 
            7 月
            - 20-26: IETF 105 Montreal
 
- 8 月
- 
            9 月
            - 16-20: W3C TPAC 2019 (Fukuoka)
 
- 10 月
- 
            11 月
            - 11-12: Chrome Dev Summit 2019
 
- 12 月