Maximize Yahoo! JAPAN’s UX with AMP and Signed HTTP Exchanges #AMPConf

AMP CONF 2019 Maximize Yahoo! JAPAN's UX with AMP and Signed HTTP Exchanges AMP と Signed HTTP Exchange で UX を最大化する Hirohito Komada Shigeki Ohtsu Ryo Munakata

AMP CONF 2019 AMP/Signed HTTP Exchanges 01 Yahoo! JAPAN全体の取り組み Project overview of Yahoo! JAPAN 02 Yahoo!トラベルの取り組み What we did for Yahoo! Travel 03 システム技術解説 Technical deep dive 04 Yahoo!検索の取り組み Showcasing Yahoo! Search

AMP CONF 2019 Yahoo! JAPAN全体の取り組み Project overview of Yahoo! JAPAN Hirohito Komada

AMP CONF 2019 YAHOO! JAPAN デイリーユニークブラウザー数：9,200万 メディア、eコマース、検索プラットフォーム、決済金融など 日本国内向けに100以上のサービスを展開 With having 92M daily unique browsers, Yahoo! JAPAN owns more than 100 domestic services such as media, e-comm, search and finance

AMP CONF 2019 AMPの取り組み 検索インフラとサービス展開の両面でAMPへアプローチ Using AMP in both search platform and our service 2017.11～ Yahoo!検索 AMP対応 Search AMP blue link adoption 2018.7～ Yahoo!トラベル、GYAO!、Yahoo!しごと検索などがAMP対応 AMP pages for Yahoo! Travel, GYAO!, Yahoo! Jobs

AMP CONF 2019 Yahoo!トラベルの取り組み What we did for Yahoo! Travel Hirohito Komada

AMP CONF 2019 AMPの課題 ... but we had problems with AMP

AMP CONF 2019 パーソナライゼーション Googleドメイン配信のため、Cookieなどによる会員サービスが難しく 対競合優位性の低下によりコーマスサイトのKPI/KGIが毀損する ↓ 商品を販売する主要画面への導入が難しく AMP拡大を阻害する大きな要因になっている パーソナライゼーションの獲得は AMP拡大に重要なポイント Since the pages were served from Google domain, it was not easy to control cookies & personalization. (...and it also has weird headers...) 余計なヘッダもある...

AMP CONF 2019 解決に向けて The solution

AMP CONF 2019 Signed HTTP Exchanges (SXG) 配信リソースに署名を行う事で 配信元に関係なくオリジンのドメインでブラウザが認識してくれる ↓ ドメインがサービスのものになるため、Cookieの操作による パーソナライゼーションやトラッキングを行う事が可能に # iOSを除く環境のChromeで対応済み SXG is a technology to cryptographically sign a web resource which let's the browser to show the publisher's origin regardless of where the page was served. AMP pages will now be showing the correct URL = Using 1st party cookies, personalization and tracking becomes easier!

AMP CONF 2019 SXGの取組み 検索インフラとサービス展開の両面でSXGへアプローチ How we adopted SXG = Using SXG for both search platform and our services 2017.11～ Yahoo!検索 AMP対応 2018.7～ Yahoo!トラベル、GYAO!、 Yahoo!しごと検索などがAMP対応 2019.1～ Yahoo!検索 SXGトライアル Yahoo!トラベル SXGトライアル

AMP CONF 2019 Yahoo!トラベル 2019.2 SXG リリース Yahoo! Travel launched SXG in Feb 2019. 一休.com（グループ会社） レストラン、宿泊にてSXGリリース ※一部の特集、観光系ページで実施 ・Android/Chrome v73以上で 「ヤフートラベル 品川プリンスホテル」と検索 Search for “ヤフートラベル 品川プリンスホテル” in the latest Android Chrome

AMP CONF 2019 Yahoo! JAPANサービス AMP/SXGステータス The progress AMP SXG in our services Publisher AMP SXG (トライアル) Yahoo!トラベル Travel 一休 レストラン Ikyu Restaurant 一休 ホテル Ikyu Hotel Yahoo!ショッピング Shopping 着手中 WIP トライアル予定 Planning Yahoo!しごと検索 Jobs 未定 N/A GYAO! 未定 N/A

AMP CONF 2019 システム技術解説 Technical deep dive Shigeki Ohtsu

AMP CONF 2019 SXGのユースケース The use case of SXG Publisher パックして署名 Sign & package HTTP request / response HTTPリクエスト HTTPレスポンス Distributor SXG 証明書+OCSP 署名検証して パックを再生 Validate signature and unpack HTTP request / response HTTPリクエスト HTTPレスポンス オフライン Offline use case SXG 証明書+OCSP SXG, Cert and OCSP オンライン Online use case

AMP CONF 2019 SXGの特徴 SXG feature ・どこから、誰からでも入手可能 Served from anywhere, anyone ・オフラインでも利用可能 Can be used offline ・PublisherのURLで表示 Showing the publisher's origin ・キャッシュ可能なWebコンテンツのみ Only for cacheable web contents ・短期間（最大1週間有効） Valid for max 7 days

AMP CONF 2019 SXGファイルの中身(b3) What's inside SXG (b3) sxg1-b3 (8) fallbackURL length (2) fallbackURL sigLength (3) headerLength (3) signature signedHeaders payload body sxg1-b3 マジック fallbackURL SXG検証が失敗した場合にアク セスするURL signature 署名データ signedHeaders HTTPリクエスト情報・レスポ ンスヘッダ(署名対象) payload body HTTPレスポンスのボディ (Merkle Integrity Content Encoding形式) sig 署名値 integrity HTTPレスポンスボディのハッシュアルゴリズム validity-url 新しい署名データを取得URL (現在未実装) cert-url 証明書データのURL (署名対象外) cert-sh256 証明書データのハッシュ値 ed25519key 署名検証する公開鍵 (現在未実装) date 署名した時間 expire 署名の有効期限 (最大7日間) コンテンツ自体に署名するわけでなくコンテンツDigest含むHTTPヘッダに署名する Not signing the content itself but signing the HTTP header including the contents digest

AMP CONF 2019 Yahoo! JAPAN SXG/AMPシステム概要 Our system Internet Search, Prefetch SXG AMP Cache Crawler bot HTTPS Proxy SXG Router amppkg AMP Server OCSP Server AMP CDN

AMP CONF 2019 HTTPS Proxy SXG cert request AMP page request HTTPS Proxy SXG/AMP System Other requests Other systems Crawler bot ・インターネットからのHTTPS接続の終端 The edge ・キャッシュ機能 Cache feature ・内部サービスへ振り分け Routing services

AMP CONF 2019 SXG Router HTTPS Proxy SXG Router SXG cert request Request w/ AMP-Cache-Transform amppkg Request w/o AMP-Cache-Transform AMP Server ・Crawler botにSXG対応であることを知らせる (Vary: AMP-Cache-Transform) Adding Vary headers ・SXG取得のリクエストが来たらAMP/SXGシステムに振る Routing ・ログ取得、監視 Monitoring

AMP CONF 2019 AMP Packager SXG Router SXG cert request Request w/ AMP-Cache-Transform amppkg SXG certificate & private key HTTP request HTTP response (AMP) AMPサーバ AMP CDN CSS RTV OCSP Server Revocation info ・AMPコンテンツからSXGを生成し提供する Generating SXG ・SXG生成時にAMP最適化(Transform)を行う Transforming AMP pages for optimization ・SXG証明書とOCSP(失効情報)をまとめたデータを生成し提供する Managing cert & OCSP ・パブリックキャッシュに適さないヘッダのチェックや削除を行う Removing headers https://github.com/ampproject/amppackager

AMP CONF 2019 SXG証明書 SXG certificate ・SXGをサービスで提供するために必要なもの ・通常のECC証明書にSXG拡張が付いたもの ・現在、Digicert社のみ発行 ・2019年5月1日より ・証明書の有効期限90日に制限 ・DNS CAAレコードの登録を必須 X509v3 Basic Constraints: critical CA:FALSE 1.3.6.1.4.1.11129.2.1.22: CT Precertificate SCTs: Signed Certificate Timestamp: SXG拡張 You will need a SXG certificate = ECC certificate w/ extension (from Digicert for now). From May 1, 2019 the certification expire date will be 90 days and requires CAA record.

AMP CONF 2019 AMP/SXGシステム導入、振り返り Our feedback on the SXG project 1 既存インフラへ影響を最小限にして、導入が可能だった The infrastructure impact was limited 2 ユーザへの直接リクエストの影響をあまり気にせずにすんだ (主要リクエストがbotのcrawlerであったため) User impact was limited b/c you only need to care about crawlers 3 事前にStaging環境でのテストが限定的だった 本当にbotからcrawlされるのか？AMPキャッシュされるのか？ など、リリース後にしかテストできない ...but currently there is no way to test w/o releasing the system in public = we need tools! 事前検証できるツール類の提供をAMPチームに要望したい

AMP CONF 2019 AMP/SXGシステム導入に関する注意事項 AMPコンテンツの中身を知る Things to be aware of: know what can be packaged as a SXG content ・キャッシュ可能なコンテンツか？ Is it a cacheable content? ・個人情報やセキュリティ情報が入っていないか？ Did you check if there is no personal / security information? ・Cache-control: private や Set-Cookie 等していないか？ Did you check to not set cache-control: private and set-cookie? ・外部に漏れてはいけない独自ヘッダが含まれていないか？ Did you check if didn't add any custom headers that shouldn't be in public? ・Same Originになったらエラーにならないか？(例AMP-iframe) Did you check if your AMP pages work correctly in your origin? i.e. <amp-iframe> ・redirectionを多用したり、Not Foundを200で返していないか？ Did you check if you are not redirecting multiple times or sending back 200 for Not Found?

AMP CONF 2019 AMP/SXGシステムに関わる今後の課題 Things to solve regarding AMP SXG ・SXG証明書更新の自動化 Automating certificate management ・DNS CAAの設定 Setting the CAA record ・SXGやTransfomerのバージョンアップに伴う更新 Updating SXG and the Transformer ・SXG未サポート端末との併用(e.g. iOS Chrome) Managing both SXG supported browsers and non supported platforms ・UAからの直接アクセスの増加に対応(e.g. SXG fallback) Managing the direct access to the server when SXG fallbacks ・レポート、Bundle化への準備 Preparing for SXG reporting and Bundled HTTP Exchanges

AMP CONF 2019 Yahoo!検索の取り組み Showcasing Yahoo! Search Ryo Munakata

AMP CONF 2019 Yahoo!検索のAMP対応 The history of AMP and Yahoo! Search YAHOO! 検索 JAPAN AMP

AMP CONF 2019 2017/11～ Yahoo!検索 AMP対応開始 AMP blue link from Nov 2017

AMP CONF 2019 SXGとリソース先読みの紹介 Introducing SXG and prefetch

AMP CONF 2019 SXG Developer Preview on Yahoo!検索 https://yahoo.jp/jysxgdemo Android/Chrome v73以上

AMP CONF 2019 HTTP Cache Chrome AMP Cache Yahoo SERP request SERP response Prefetch SXG SXG response Preload sub resources Sub resources response User click SXG request Open signed origin SXG response

AMP CONF 2019

AMP CONF 2019 品川プリンスホテル - 【Yahoo!トラベル】 - Yaho o! JAPAN SXG travel.yahoo.co.jp/dhotel/shisetsu/HT10020059/informati... 品川プリンスホテルの宿泊・予約情報。 駅から徒歩5分以内、コンビニまで徒歩5分 以内 品川プリンスホテルの宿泊予約はYah oo! ★★★★★ 評価 : 3.8 - 1,245件のレビュー

<link rel="prefetch" href="https://travel-yahoo-co-jp.cdn.ampproject.org/..." >
<div class="sw-Card Algo">
<section>
<div class="sw-Card__section">
<a href="https://travel-yahoo-co-jp.cdn.ampproject.org/..." class="sw-Card__space">
<div class="sw-Card__title">
<h3 class="sw-Card__titleMain util-Clamps--2"><b>品川プリンスホテル</b> - 【Yahoo!トラベル】 - Yahoo! JAPAN</h3>
</div>
<div class="sw-Cite sw-Cite--amp">
<div class="sw-Cite__icon">
<span class="util-Text-sub"><i class="sw-Icon sw-Icon--product_amp" aria-hidden="true"></i>SXG</span>
</div>
<cite>travel.yahoo.co.jp/dhotel/shisetsu/HT10020059/information/</cite>
</div>
<div class="sw-Card__column">...</div>
</a>
</div>
<div class="sw-Card__section">....</div>
</section>
</div>

AMP CONF 2019 ?usqp=mq331AQPCAEOAzgB4Oz3ivnC5LI9 travel-yahoo-co-jp.cdn.ampproject.org/wp/s/travel.yahoo.co.jp/amp/... GET 200 signed-exchange

AMP CONF 2019 information/ travel.yahoo.co.jp/amp/dhotel/shisetsu/HT10020059 GET 200 OK text/html Redirect travel-yahoo-co-... (from signed-exchange)

AMP CONF 2019
link: <https://cdn.ampproject.org/v0.js>;rel=preload;as=script,<https://cdn.ampproject.org/v0/amp-analytics-0.1.js>;rel=preload;as=script,<https://cdn.ampproject.org/v0/amp-bind-0.1.js>;rel=preload;as=script,<https://cdn.ampproject.org/v0/amp-car
ousel-0.1.js>;rel=preload;as=script,<https://cdn.ampproject.org/v0/amp-iframe-0.1.js>;rel=preload;as=script

AMP CONF 2019 v0.js cdn.ampproject.org/v0 GET 200 script Other amp-analytics-0.1.js cdn.ampproject.org/v0 GET 200 script Other amp-bind-0.1.js cdn.ampproject.org/v0 GET 200 script Other amp-carousel-0.1.js cdn.ampproject.org/v0 GET 200 script Other

AMP CONF 2019

AMP CONF 2019 ?usqp=mq331AQPCAEOAzgB4Oz3ivnC5LI9 travel-yahoo-co-jp.cdn.ampproject.org/wp/s/travel.yahoo.co.jp/amp/... GET 200 signed-exchange search.yahoo-co-... (from disk cache) Lp7pseFL264qrw_KCQkmuu2GWrLM7lLr-l6YCB_o6OE travel-yahoo-co-jp.cdn.ampproject.org/crt/s/travel.yahoo.co.jp/amp/... GET 200 cert-chain+cbor travel-yahoo-co-... (from disk cache) information/ travel.yahoo.co.jp/amp/dhotel/shisetsu/HT10020059 GET 200 document travel-yahoo-co-... (from disk cache) v0.js cdn.ampproject.org/v0 GET 200 script Other (from disk cache) amp-analytics-0.1.js cdn.ampproject.org/v0 GET 200 script Other (from disk cache) amp-bind-0.1.js cdn.ampproject.org/v0 GET 200 script Other (from disk cache) amp-carousel-0.1.js cdn.ampproject.org/v0 GET 200 script Other (from disk cache) amp-iframe-0.1.js cdn.ampproject.org/v0 GET 200 script Other (from disk cache)

UPDATE JAPAN

AMP CONF 2019 Thank You! Hirohito Komada Shigeki Ohtsu Ryo Munakata

YAHOO! JAPAN