<p>@otolab です。</p>
<p>ITP 2.2, 2.3に関する調査を行いましたので、検証ツールの解説を行いたいと思います。</p>
<p>今回の検証では、ITP 2.2のリンク装飾（Link Decoration）されたランディングページによるcookieの保存期間短縮と、ITP 2.3で追加されたリファラへのリンク装飾に対する制限について調べています。</p>
<p>2つとも、広告流入時にIDを1st partyとして保存するようなケースを想定しており、流入元から対象サイトへの情報伝達・保存を制限するものです。</p>
<p>なお、localStorageに制限が掛かったことが2.3での変更の大きなポイントですが、制限の元となる条件は2.2のcookieと同様であるのと、localStorageの寿命を簡単に見る方法がないため今回はテストを行っていません。</p>
<p>この記事はITPについての基本的な知識がある前提で書いています。</p>
<h2>意外だったこと</h2>
<ol>
<li>リンク装飾に対する制約は2PV目以降にも引き継がれる</li>
<li>trackerドメイン上でのインタラクションによる猶予の影響は受けない</li>
<li>レスポンスヘッダによる遷移はリンク装飾とみなされない（？）</li>
</ol>
<p>詳細は後述します。</p>
<h2>ツール</h2>
<p>実験しつつ書きつつだったので、コードやテスト内容は結構場当たり的ですが……。手元では再現性のあるテストを実行できるようになったので、公開します。</p>
<ul>
<li><a href="https://github.com/otolab/itp2.3-test">検証ツール</a></li>
</ul>
<p>また、cookieの寿命(expire)をJavascriptから取得する手段がないので、適宜、Webインスペクタを開いてcookieの有効期限を確認してください。</p>
<p>mochaを使っていますが、上記の理由からタスクランナーとしてのみ使っている状態です。</p>
<h2>検証内容</h2>
<p>検証に使ったのはSafari 13.0.1と、Safari Technology Preview Release 93です。</p>
<p>テストはコンソール(<code>localhost</code>), SiteA(対象サイト、<code>1stparty.localdomain</code>), SiteB(トラッカードメイン、<code>3rdpartytestwebkit.org</code>)の3つのホストにまたがって実行します。</p>
<p>コンソールはテスト実行の起点になるページで、遷移の関係をシンプルにするために導入しました。このページからのpopupはブロックしないように設定しておいてください。</p>
<p>SiteBはSafariがテスト用に最初からトラッカードメインとして判定しているドメインです。このドメインから対象サイトへの遷移が今回の検証のテーマになります。</p>
<p><code>3rdpartytestwebkit.org</code>, <code>1stparty.localdomain</code>は/etc/hostsなどにあらかじめ127.0.0.1として登録しておいてください。ローカルホストの別名として登録された状態になります。</p>
<p>テストは条件を変えてSiteB =&gt; SiteAの遷移を繰り返しながら、cookieを設定していきます。</p>
<h3>検証手順</h3>
<ol>
<li>初期設定
<ol>
<li>SiteA, page1にアクセスして、Cookieを設定(key1, key2)</li>
</ol>
</li>
<li>リンク装飾付き遷移
<ol>
<li>SiteB, page1にアクセス<br>
metaタグによってSiteA, page2に装飾付きで遷移</li>
<li>SiteA, page2でCookieを設定(key3, key2)<br>
手動でリンクをクリックしてSiteA, page3に装飾なしで遷移</li>
<li>SiteA, page3でCookieを設定(key4, key1)</li>
</ol>
</li>
<li>リンク装飾なし、referrer装飾あり遷移
<ol>
<li>SiteB, page2にアクセス<br>
metaタグによってSiteB, page3に装飾付きで遷移</li>
<li>SiteB, page3にアクセス<br>
metaタグによってSiteA, page4に装飾なしで遷移</li>
<li>SiteA, page3でCookieを設定(key5)</li>
</ol>
</li>
<li>リンク装飾あり手動遷移
<ol>
<li>SiteB, page4にアクセス<br>
手動でリンクをクリックしてSiteA, page5に装飾付きで遷移</li>
<li>SiteA, page5でCookieを設定(key6)</li>
</ol>
</li>
</ol>
<p>Cookieはいずれも8日間で設定します。</p>
<h2>検証結果</h2>
<h3>1. 初期設定</h3>
<p>1-1でCookie(key1, key2)を保存します。</p>
<p>document.cookieにjavascriptで値を保存しているので、8日間の有効期限を設けても7日間にまで制限されます。これはITP 2.1の効果ですね。</p>
<h3>2. リンク装飾付き遷移</h3>
<p>リンク装飾されたランディングページによる制限のテスト(2-2)。および2PV目での制限の継続をチェックするテスト(2-3)です。</p>
<p>2-2では新規のkey3の寿命が1dayまで短くなることが確認できます。また、1-1で設定したkey2を上書きすると同様に寿命が縮むのが確認できます。</p>
<p>ついでにリファラの短縮が起こらないことも確認しています。ここではSiteB, page1にリンク装飾がないため、このリファラ短縮の処理は起きていません。</p>
<p>2-3のテストを見てみましょう。ここで明文化されていない現象が観測できます。SiteA, page3はランディングページではなく、SiteA内で手動でリンクを踏んだ場合の遷移です。にもかかわらず、key4, key1の寿命は1dayに制限されます。</p>
<p>「意外だったことその1」です。</p>
<p>2PV目以降で再保存することで寿命が伸ばせてしまうと効果がない。ということなのでしょう。</p>
<h3>3. リンク装飾なし、referrer装飾あり遷移</h3>
<p>ITP 2.3で追加されたリファラの短縮とリンク装飾の関係を調べます。</p>
<p>3-1, 3-2の遷移でSiteB, page3にリンク装飾を付け、そのままSiteA, page4にリンク装飾なしでランディングします。</p>
<p>すると、リファラの短縮が観測できます。また、Cookie(key5)の寿命が縮まないことも確認できました。2つは別のものとして扱われているようです。</p>
<p>また、詳細は不明なのですが、もう一度同じテストを流すとリファラの短縮が発生しないことがあります。毎回cacheを消すとリファラ短縮が安定して発生しするのですが……。バグなのか正しい挙動なのかは不明です。</p>
<h3>4. リンク装飾あり手動遷移</h3>
<p>トラッカードメイン上でのユーザインタラクションによってCookieの寿命を延長する処理があるので影響を調べましたが、リンクデコレーションの処理とは連携していないようです。</p>
<p>4-1でSiteB上でリンクをクリックした際に、ログを見るとインタラクションを検出したというログは出るようなのですが、4-2でCookieを保存すると1dayの制限がかかります。</p>
<p>今回はSiteB上でのインタラクションは影響してこないようです。広告のクリックの追跡を想定した制限のようなので、そういうものなのかもしれません。</p>
<p>「意外だったことその2」です。</p>
<h3>extra. レスポンスヘッダによるページ遷移</h3>
<p>「意外だったことその3」です。</p>
<p>テストツールのindex.jsの<a href="https://github.com/otolab/itp2.3-test/blob/e4cc3994a7e4fa74b2c40f5b8b3f5a1596e8b8e3/index.js#L16-L33">16-33行のコメントアウト</a>を外します。そうすると、SiteBでのページ遷移がmetaタグではなく、レスポンスヘッダによるリダイレクトに置き換わります。</p>
<p>この状態でテストすると、じつはリンク装飾によるCookieの寿命短縮が発生しません。テスト方法が悪いのかブラウザのバグなのかはちょっとわからないのですが……。</p>
<p>どうも、現在のページのURLとリファラのURLの比較のみでリンク装飾の制約を掛けているのではないかなと言う印象を持ちました。レスポンスヘッダによる遷移だと、referrerの値がもう一つ前のページになるんですよね。今回のテストケースだとコンソール(<code>localhost</code>)がリファラになります。</p>
<h2>まとめと感想</h2>
<p>ページ遷移の状態やキャッシュの影響を受けるらしく、挙動がなかなか安定しないため苦労しました……。</p>
<p>さて。</p>
<p>ITP 2.2, 2.3は、ランディングページにクエリ・フラグメントがつくケースすべてを対象としているために、「サイトの作り方」自体を制約して方向づけるような仕様変更であると言えます。たとえば、商品詳細ページに<code>?item=abc123</code>のようにクエリをつけて表現するサイトは、トラッカードメインとみなされたサイト上からのアクセスで、常時cookieやlocalStorageの保存に不安定さを抱えることになります。</p>
<p>今回の変更で不安定化するフェアユースの例としては、ログイン無しでのお気に入り機能などですね。実装方法を変えれば安定化は可能なので、Safariでの動作が必須ならばサイト自体に修正をいれることになるでしょう。</p>
<p>今後も機能の更新が想定されますので、注目していきたいと思います。</p>
<h2>参考</h2>
<ul>
<li><a href="https://webkit.org/blog/8828/intelligent-tracking-prevention-2-2/">Intelligent Tracking Prevention 2.2</a></li>
<li><a href="https://webkit.org/blog/9521/intelligent-tracking-prevention-2-3/">Intelligent Tracking Prevention 2.3</a></li>
</ul>
<h2>いつもの</h2>
<p>CX（顧客体験）プラットフォーム「<a href="https://karte.io/">KARTE</a>」を運営するプレイドでは、顧客体験をよりよくするとはどういうことなのか、Webの未来はどう在るべきか、深く考えたいというエンジニア（インターンも）を募集しています。</p>
<p>詳しくは<a href="https://plaid.co.jp/recruit/engineer.html">弊社採用ページ</a>または<a href="https://www.wantedly.com/companies/plaid/projects">Wantedly</a>をご覧ください。 もしくはお気軽に、下記の「話を聞きに行きたい」ボタンを押してください。</p>
<div class="wantedly-visit-button" data-visit-button-id="lyE_IgY4VF5ukBo_EUKZLg" data-width="300" data-height="60"></div>
<script>
  (function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "https://platform.wantedly.com/visit_buttons/script.js";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, "script", "wantedly-visit-buttons-wjs"));
</script>


ITP 2.2のリンク装飾に関する制限と、ITP 2.3のリファラへのリンク装飾に対する制限について検証を行いました。検証のためのツールを作ったので解説します


ITP 2.2, 2.3の検証ツールを作ってみた | PLAID engineer blog

ITP 2.2, 2.3の検証ツールを作ってみた

Vue.js の設計地図を作成しました。設計概念の依存関係の図式化して理解し、
フロントエンド設計をモデリング起点で考えたブログです。

Vue.js設計地図 〜設計概念の依存関係からフロントエンド設計を見つめ直す〜

<p>こんにちは、makinoy &amp; positiveflat &amp; tik-son &amp; nichimuです。<br>
7/30-8/1にかけて開催された Google Cloud Next Tokyo ’19に参加してきたので、その様子をご紹介したいと思います。紹介と言いつつも、Cloud Nextでのセッションの内容のシェアではなく、Cloud Next開催中にPLAID社員がどのような動きをしていたかについてシェアしたいと思います。</p>
<h2>Google PM陣とのミーティング ＠PLAIDオフイス</h2>
<p>PLAIDでは<a href="https://cloud.google.com/bigtable/?hl=ja">Cloud BigTable</a>を始め、NoSQLのデータベースを多く使っているということもあり、<a href="https://cloud.google.com/bigtable/?hl=ja">Cloud BigTable</a>、<a href="https://cloud.google.com/memorystore/?hl=ja">Memorystore</a>など、NoSQLサービスのProduct Managerの方々をPLAIDオフィスに招き、ディスカッションを行いました。<br>
このディスカッションはGoogle Cloud Next Tokyo ’19 開催前日に実施し、</p>
<ul>
<li>PLAIDでどのようにこれらのNoSQLを使っているのか/使い分けているのか</li>
<li>既存のGCPのサービスに求めることは何なのか</li>
<li>サービスの特性をより活かしたアーキテクチャとは</li>
</ul>
<p>などのテーマについて議論を行いました。<br>
限られた時間だったので議論は尽きず、続きはビデオ会議などを駆使しリモートでやっていく予定です。</p>
<p><img src="https://ik.imagekit.io/newt/tr:w-1000,h-1000,c-at_max/61b151f921640c0018173598/2841f03f-6dbb-4631-9f54-b59066eda7f0/google-cloud-next-tokyo-19.jpeg" alt="google-cloud-next-tokyo-19.jpeg"><br>
Cloud BigTable、Memorystoreなど、NoSQLサービスのProduct Managerの方々との写真</p>
<h2>Meet the Expert ＠Google Cloud Next Tokyo’19</h2>
<p>Google Cloud Next Tokyo ’19が開催されている最中も、Googleの開発者とのミーティングを行なっていました。<a href="https://cloud.google.com/bigquery/?hl=ja">BigQuery</a>、<a href="https://www.kubeflow.org/">Kubeflow</a>、<a href="https://cloud.google.com/dataflow/?hl=ja">Cloud Dataflow</a>の開発者との議論を行いました。</p>
<p>実は5月に開催された<a href="/google-cloud-next-19-in-sf/">Google Cloud Next San Francisco ’19</a>の際にも、既に我々はKARTEのアーキテクチャについてGoogleの開発者と共有した上で議論をしていました。そのため、特にBigQueryなどに関しては、それを念頭に置いた上で今後の開発に役立ちそうなトピックを中心に議論をすることができました。<br>
また、機械学習基盤についてもディスカッションを行うことができました。現在、PLAIDでは、エンドユーザーのデータを大量に保持していますが、十分に活用できているとはまだまだ言えない状況です。機械学習などの技術をKARTEにも取り入れはじめている段階で、どういったデータの流れをどう作るべきなのか、データのvalidationをどうするべきか、ということなどをKubeflowの開発者に伺えたことは非常に良かったです。短い時間ではありましたが、プロジェクトの初期の段階で開発者とディスカッションできたことは、設計に取り組む上で大きなアドバンテージとなりそうです。</p>
<p>ミーティング後には、PLAIDオリジナルの漢字Tシャツをプレゼントしました！２種類あり、「hotfix: 迅速」「analytics: 解析」が書かれています。PLAIDデザイナーが心を込めて作った甲斐もあり、喜んでいただけました。</p>
<p><img src="https://paper-attachments.dropbox.com/s_495C088E061F4CCFCB2EDF25134394B291C83E750D9DE3EC3C286EBBF71A4BB4_1565080407452_iOS+.jpg" alt="BigQuery、Kubeflow、Cloud Dataflowの開発者との写真" title="BigQuery、Kubeflow、Cloud Dataflowの開発者との写真"><br>
BigQuery、Kubeflow、Cloud Dataflowの開発者との写真</p>
<h2>Google Cloud Billing teamとのミーティング ＠PLAIDオフイス</h2>
<p>また、Google Cloud Next Tokyo ’19 開催後にGoogle Cloud Billing Teamとミーティングを行いました。<br>
組織が大きくなる中どのようにコストを管理していくべきなのか、GCPの考え方をシェアしてもらいつつ、PLAIDの現状をお伝えし、あるべき姿についてディスカッションしました。</p>
<p><img src="https://paper-attachments.dropbox.com/s_495C088E061F4CCFCB2EDF25134394B291C83E750D9DE3EC3C286EBBF71A4BB4_1565080391497_W8051119.jpg" alt="Google Cloud Billing Teamの皆さんとの写真" title="Google Cloud Billing Teamの皆さんとの写真"><br>
Google Cloud Billing Teamの皆さんとの写真</p>
<h2>CTO 牧野とエンジニア 竹村の登壇 ＠Google Cloud Next Tokyo’19</h2>
<p>Cloud Nextのセッションでは、エンジニアサイドからは2人登壇しました。</p>
<p>CTOの牧野からは、「秒間6万イベントの大規模リアルタイムデータを活用する機械学習基盤の実現」を発表いたしました。GCPには、<a href="https://cloud.google.com/bigquery-ml/docs/bigqueryml-intro?hl=ja">BigQuery ML</a>、<a href="https://cloud.google.com/automl-tables/?hl=ja">AutoML Tables</a>、<a href="https://cloud.google.com/ai-platform/?hl=ja">AI Platform</a>などの機械学習サービスがありますが、それらのサービスをどのように活用しているかについて発表いたしました。</p>
<p>詳細につきましては、プレスリリースをご確認ください。<br>
<a href="https://press.plaid.co.jp/data/20190801/">https://press.plaid.co.jp/data/20190801/</a></p>
<p><img src="https://paper-attachments.dropbox.com/s_B4301733157BC4E8942C126B98488C9A0747D29A0340FB43A199BCCC760D822F_1566799637362_IMG_20190801_144105.jpg" alt="PLAIDの牧野祐己" title="PLAIDの牧野祐己"><br>
PLAIDの牧野祐己</p>
<p>また、竹村からは「PLAIDがGCPを使い、続ける理由」というテーマで発表しました。<br>
GCPのTokyoRegionが出来る前から使い始め、現在も数あるクラウドサービスの中で何故ヘビーに利用し続けているのかというお話をいたしました。</p>
<p><img src="https://paper-attachments.dropbox.com/s_495C088E061F4CCFCB2EDF25134394B291C83E750D9DE3EC3C286EBBF71A4BB4_1565181257794_IMG_20190731_192125.jpg" alt="PLAIDの竹村尚彦" title="PLAIDの竹村尚彦"><br>
PLAIDの竹村尚彦</p>
<h2>BizDev 宮原とプロダクトスペシャリスト 池上の登壇 ＠Google Cloud Next Tokyo’19</h2>
<p>また、ビジネスサイドからはPLAIDで事業開発からプロダクトマネジメント、アライアンスを担当する<a href="https://speakerdeck.com/miyashino">宮原</a>と開発から採用、技術広報を担当するプロダクトスペシャリストの池上が登壇しました。</p>
<p>「GCP をフル活用した<a href="https://karte.io/product/datahub/">「KARTE Datahub</a>」で挑む次世代のデータ活用」というテーマで、PLAIDのストラテジックパートナーである<a href="https://www.nri-digital.jp/">NRIデジタル</a>様との取り組みである、リアル接点を活用した次世代のデータ活用事例「リアル・デジタルマーケティング」を発表しました。</p>
<p>詳細につきましては、プレスリリースをご確認ください。<br>
<a href="https://press.plaid.co.jp/data/20190731/">https://press.plaid.co.jp/data/20190731/</a></p>
<p><img src="https://paper-attachments.dropbox.com/s_4728A931DD51A7808A452108583713580BBAA209584910654C1CC5512171042D_1565733233501_image.png" alt="PLAIDの宮原忍" title="PLAIDの宮原忍"><br>
PLAIDの宮原忍</p>
<p><img src="https://paper-attachments.dropbox.com/s_4728A931DD51A7808A452108583713580BBAA209584910654C1CC5512171042D_1565733287627_image.png" alt="NRIデジタルの倉澤様" title="NRIデジタルの倉澤様"><br>
NRIデジタルの倉澤様</p>
<p><img src="https://paper-attachments.dropbox.com/s_4728A931DD51A7808A452108583713580BBAA209584910654C1CC5512171042D_1565733408737_image.png" alt="パネルディスカッションの様子（NRIデジタルの萩村様、PLAIDの池上純平）" title="パネルディスカッションの様子（NRIデジタルの萩村様、PLAIDの池上純平）"><br>
パネルディスカッションの様子（NRIデジタルの萩村様、PLAIDの池上純平）</p>
<h2>PLAIDのブースについて</h2>
<p>会場では、様々なパートナー・スポンサー企業によるブース展示が行われていました。弊社PLAIDも、ブースで来場者の方に向けてKARTEの紹介をさせていただきました。開催期間を通して、多くの来場者がKARTEに興味を持ってブースに立ち寄っていただきました。</p>
<p><img src="https://paper-attachments.dropbox.com/s_D4AD4C59B0D0507617124AF427CAFF94DF20ECB07B8E8B50341E21B4450C9CFD_1566797495978_76ZdkLYET8yF0DYRIH05ig_thumb_2.jpg" alt="PLAIDブースの様子" title="PLAIDブースの様子"><br>
PLAIDブースの様子</p>
<p>今回も様々な種類のノベルティを用意して臨みました。</p>
<p><img src="https://paper-attachments.dropbox.com/s_D4AD4C59B0D0507617124AF427CAFF94DF20ECB07B8E8B50341E21B4450C9CFD_1566660933793_image.png" alt="Google Cloud x KARTEマウンテンボトル" title="Google Cloud x KARTEマウンテンボトル"><br>
Google Cloud x KARTEマウンテンボトル</p>
<p><img src="https://paper-attachments.dropbox.com/s_D4AD4C59B0D0507617124AF427CAFF94DF20ECB07B8E8B50341E21B4450C9CFD_1566660950286_image.png" alt="Google Cloud x KARTEノート" title="Google Cloud x KARTEノート"><br>
Google Cloud x KARTEノート</p>
<p><img src="https://paper-attachments.dropbox.com/s_D4AD4C59B0D0507617124AF427CAFF94DF20ECB07B8E8B50341E21B4450C9CFD_1566661102642_image.png" alt="Google Cloud x KARTEコンパクト充電器" title="Google Cloud x KARTEコンパクト充電器"><br>
Google Cloud x KARTEコンパクト充電器</p>
<p><img src="https://paper-attachments.dropbox.com/s_D4AD4C59B0D0507617124AF427CAFF94DF20ECB07B8E8B50341E21B4450C9CFD_1566660965124_image.png" alt="ハンドスピナー型 USB &amp; Lightningケーブル！" title="ハンドスピナー型 USB &amp; Lightningケーブル！"><br>
ハンドスピナー型 USB &amp; Lightningケーブル！</p>
<h2>まとめ</h2>
<p>Google Cloud Next Tokyo ’19に参加した中で、PLAID社員がどのような動きをしていたかについて紹介いたしました。今後も、Googleと密に連携を取りながら、KARTEとGCPの価値を高めていきます。</p>
<h2>最後に</h2>
<p>PLAIDではGCPなどのインフラの特性をフルに生かし、魅力的なプロダクトを作るエンジニアを募集しております。もし興味があれば、<a href="https://www.wantedly.com/projects/234957">こちら</a>からカジュアルに話を聞きに来てください！<br>
また、エンジニアだけではなく、KARTEの技術的・機能的サポートを行うプロダクトスペシャリストも募集しております。プロダクトスペシャリストに関しては、<a href="https://www.wantedly.com/projects/332135">こちら</a>をご覧いただけると幸いです！</p>
<div class="wantedly-visit-button" data-visit-button-id="lyE_IgY4VF5ukBo_EUKZLg" data-width="300" data-height="60"></div>
<script>
  (function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "https://platform.wantedly.com/visit_buttons/script.js";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, "script", "wantedly-visit-buttons-wjs"));
</script>


Google Cloud Next Tokyo ’19に参加してきた中で、PLAIDエンジニアがどのような動きをしていたかについてご紹介いたします！

Vue.js設計地図 〜設計概念の依存関係からフロントエンド設計を見つめ直す〜

Vue.js設計地図〜設計概念の依存関係からフロントエンド設計を見つめ直す〜