<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	xmlns:series="http://organizeseries.com/"
	>

<channel>
	<title>Google I/O 2016 &#8211; HTML5Experts.jp</title>
	<atom:link href="/tag/google-io-2016/feed/" rel="self" type="application/rss+xml" />
	<link>https://html5experts.jp</link>
	<description>日本に、もっとエキスパートを。</description>
	<lastBuildDate>Sat, 07 Jul 2018 03:14:05 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>https://wordpress.org/?v=4.7.19</generator>
	<item>
		<title>HTTPSにまつわる怪しい伝説を検証する──Google I/O 2016 セッションレポート</title>
		<link>/takoratta/20061/</link>
		<pubDate>Wed, 13 Jul 2016 02:00:08 +0000</pubDate>
		<dc:creator><![CDATA[及川卓也]]></dc:creator>
				<category><![CDATA[最新動向]]></category>
		<category><![CDATA[Google I/O 2016]]></category>
		<category><![CDATA[HTTPS]]></category>
		<category><![CDATA[http2]]></category>

		<guid isPermaLink="false">/?p=20061</guid>
		<description><![CDATA[今年はGoogle I/Oに初めて社員ではない立場で参加しました。全体の感想は Google I/O 2016まとめ（Web的視点） で公開していますが、今回はその中で、気に入ったセッションの1つである&#8221;My...]]></description>
				<content:encoded><![CDATA[<p>今年はGoogle I/Oに初めて社員ではない立場で参加しました。全体の感想は <a href="http://qiita.com/takoratta/items/f08ed988cfedaf6f45b7" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">Google I/O 2016まとめ（Web的視点）</a> で公開していますが、今回はその中で、気に入ったセッションの1つである&#8221;Mythbusting HTTPS: Squashing security’s urban legends&#8221;について書いてみたいと思います。</p>

<p>セッションは大変良くまとまっていますので、YouTubeにあがっている動画を見れる人はそちらを見てもらえればいいのですが、時間がないという人のために、その内容をまとめました。基本的には文字起こしに近いものです。</p>

<p>重要だとわかっているけど、なかなか導入に踏み切れない人も多いHTTPS。これについて、最新の状況が理解できるコンテンツとしてお役に立てるならば嬉しいです。</p>

<p><small>※この記事は、<a href="http://qiita.com/takoratta/private/5bfe926a6421a14c1f94" target="_blank" data-wpel-link="external" rel="follow external noopener noreferrer">Qiitaに投稿された記事</a>を、Qiitaの許可を得て転載したものです。</small></p>

<h2>TL;DR</h2>

<ul>
<li>HTTPSはPWAppなどWebにとって必須。</li>
<li>しかし、パフォーマンス悪化するかも！？ でもお高いんでしょ？ それに見合うだけのメリットあるの？などなどの疑問（＝都市伝説的なものも含む）があるので、それを1つ1つ検証。</li>
<li>結論: 確かに懸念すべきものもあるが、やはり必須。正しく、早急に導入しよう。</li>
</ul>

<h2>Mythbusting HTTPS: Squashing security’s urban legends</h2>

<p>&#8220;Mythbusting HTTPS: Squashing security’s urban legends&#8221; はGoogle I/O 2016の初日の夕方に行われたセッションです。ChromeのセキュリティチームでSSL/TSLを担当するエンジニアであるエミリー（Emily Stark）自らが登壇しました。</p>

<h3>Mythbustingとは</h3>

<p>Mythとは英語で「神話」を意味します。Bustにはいくつか意味がありますが、ここではゴーストバスターズなどと同じように、「退治する」、「撃退する」の意味になります。実は、オーストラリアで制作され、米国でも放映されているMythbustersという人気テレビ番組があります。都市伝説のような伝説を検証する科学エンターテイメント番組なのですが、タイトルのMythbustingはもしかしたらそこからとったのかもしれません。</p>

<p>Mythbustersは日本でもケーブルテレビなどで放映されておりますが、そのタイトルは「怪しい伝説」となっています。この投稿のタイトルもそれに習いました。</p>

<h3>セッション動画</h3>

<p>セッション動画は<a href="https://youtu.be/YMfW1bfyGSY" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">ここ</a>から。英語が苦手な方も、<a href="http://googledevjp.blogspot.jp/2012/10/blog-post.html" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">Google Developers Japan: 技術と英語を同時に、しかも無料で勉強できる画期的な方法</a> にあるように字幕付きならば、技術的な内容ですので、十分内容を掴めるはずです。</p>

<h2>HTTPSのおさらい</h2>

<p>セッションでは、スピーカーであるエミリーが2010年の世界から見ると、2016年の今日のWebは大きく進化したというところから話し始めます。ホーム画面への追加（Add to Home screen）やプッシュ通知、デバイスオリエンテーション、ジオロケーションなどプログレッシブWebアプリケーションをはじめとするWebをよりアプリに近づける技術が使われるようになっています。</p>

<p>一方で、そのようなアプリケーション的なWebが普及する中、未だに課金や商取引、個人情報をやりとりするようなデータを扱っていながら、第三者から盗み見されるようなネットワークで運用されているところもあったり、ISPやWiFiプロバイダーのような第三者がWebサイト運営者の意図しないようにコンテンツを書きかえることさえ起きています。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2016/07/1.png" data-wpel-link="internal"><img src="/wp-content/uploads/2016/07/1.png" alt="データ盗聴の危険性" width="640" height="317" class="aligncenter size-full wp-image-20079" srcset="/wp-content/uploads/2016/07/1.png 640w, /wp-content/uploads/2016/07/1-300x149.png 300w, /wp-content/uploads/2016/07/1-207x103.png 207w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>

<p><a href="https://html5experts.jp/wp-content/uploads/2016/07/2.png" data-wpel-link="internal"><img src="/wp-content/uploads/2016/07/2.png" alt="意図しないコンテンツの挿入" width="640" height="278" class="aligncenter size-full wp-image-20078" srcset="/wp-content/uploads/2016/07/2.png 640w, /wp-content/uploads/2016/07/2-300x130.png 300w, /wp-content/uploads/2016/07/2-207x90.png 207w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>

<p>エミリーはだからこそHTTPSが重要だと強調します。</p>

<p>現在のブラウザはHTTPSでアクセスしているサイトには、それがHTTPSであることをインディケーターで示します。ですが、すべてのWebサイトがHTTPSをサポートし、この緑のインディケーターを必要としない世界こそ、望むべきものです。</p>

<p>HTTPSには3つの役割があります。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2016/07/3.png" data-wpel-link="internal"><img src="/wp-content/uploads/2016/07/3.png" alt="HTTPSの役割" width="640" height="421" class="aligncenter size-full wp-image-20077" srcset="/wp-content/uploads/2016/07/3.png 640w, /wp-content/uploads/2016/07/3-300x197.png 300w, /wp-content/uploads/2016/07/3-207x136.png 207w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>

<ul>
<li>認証（Identity）: https://google.com/ にアクセスすると、ブラウザはgoogle.comから証明書を受信し、それにより今アクセスしているgoogle.comが真正のgoogle.comであることを確認します。</li>
<li>守秘性（Confidentiality）: 一度、真正のgoogle.comにアクセスしていることが確認されると、その後の通信はgoogle.comとブラウザ以外には盗聴されない形で行われます。</li>
<li>完全性（Integrity）: google.comとブラウザの間でのデータは第三者により改ざんされないことが保証されます。</li>
</ul>

<p>このようなセキュリティ上の利点があるものの、HTTPSを導入しようとしたときに、コスト、パフォーマンス、そして保守の面で課題があるのではないかと心配されるかもしれません。しかし、それは過去のものです。そのようにエミリーは言います。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2016/07/4.png" data-wpel-link="internal"><img src="/wp-content/uploads/2016/07/4.png" alt="HTTPSに関しての誤解" width="640" height="398" class="aligncenter size-full wp-image-20076" srcset="/wp-content/uploads/2016/07/4.png 640w, /wp-content/uploads/2016/07/4-300x187.png 300w, /wp-content/uploads/2016/07/4-207x129.png 207w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>

<h2>HTTPSにまつわる話</h2>

<p>これらの誤解は結局のところ、5つほどの話に整理できます。それらのうちのいくつかは過去には正しかったものの、現在では都市伝説になっているものもあります。エミリーは5つの話を現在でも事実の話と怪しい伝説とに分類していきます。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2016/07/5.jpg" data-wpel-link="internal"><img src="/wp-content/uploads/2016/07/5.jpg" alt="5" width="640" height="480" class="aligncenter size-full wp-image-20075" srcset="/wp-content/uploads/2016/07/5.jpg 640w, /wp-content/uploads/2016/07/5-300x225.jpg 300w, /wp-content/uploads/2016/07/5-207x155.jpg 207w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>

<p>その5つの話は次の通りです。</p>

<ol>
<li>私のサイトはHTTPSを必要とするほど重要ではない</li>
<li>HTTPSを導入すると遅くなる</li>
<li>HTTPSに関しての攻撃がたくさんあるみたい</li>
<li>HTTPSにはお金がたくさんかかる</li>
<li>私のサイトはHTTPSに移行できるけど、使っている（依存している）サードパーティ（のサービス）はどうしたらいいの？</li>
</ol>

<p>それでは、エミリーが1つ1つをどのように解説していったかをお伝えしましょう。</p>

<h3>「私のサイトはHTTPSを必要とするほど重要ではない」</h3>

<p>エミリーはアリスの話を始めます。</p>

<p>アリスというWebデベロッパーがいます。彼女の旅行ガイドのWebサイトはログインフォームもなければ、クレジットカード番号の入力フォームもない。そこでアリスは自分のサイトにはHTTPSは必要ないと考えます。ですが、ある日、彼女の友人からアリスの旅行ガイドサイトが遅いと言われて、調べてみると、友人が見ている彼女のサイトには彼女が入れたのではない様々な広告が挿入されていたことに気づくのです。それらにはマルウェアが埋め込まれていて、アリスのサイトを信じた友人はサイト内の広告もクリックし、マルウェアに感染してしまっていたのです。</p>

<p>アリスはまた新しい機能をジオロケーションAPIを用いて実装しようとします。ユーザーがどこにいるかを把握し、適切なトラベル情報を提供しようと試みたのです。しかし、彼女はChromeでは動作しないことに気づきます。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2016/07/6.png" data-wpel-link="internal"><img src="/wp-content/uploads/2016/07/6.png" alt="ジオロケーションAPI" width="640" height="315" class="aligncenter size-full wp-image-20074" srcset="/wp-content/uploads/2016/07/6.png 640w, /wp-content/uploads/2016/07/6-300x148.png 300w, /wp-content/uploads/2016/07/6-207x102.png 207w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>

<p>現在、Chromeを始めとする多くのモダンブラウザはジオロケーションAPIをはじめとするパワフルな新しいAPIの利用はセキュアはHTTPS上でしか動作しないようにし始めています。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2016/07/7.png" data-wpel-link="internal"><img src="/wp-content/uploads/2016/07/7.png" alt="HTTPSを必要とする機能" width="640" height="321" class="aligncenter size-full wp-image-20073" srcset="/wp-content/uploads/2016/07/7.png 640w, /wp-content/uploads/2016/07/7-300x150.png 300w, /wp-content/uploads/2016/07/7-207x104.png 207w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>

<p>このように、HTTPSはプライバシーやセキュリティ上の重要なデータのやりとりが発生するようなサイトだけでなく、ユーザー体験を向上させるすべてのサイトに必要なものとなっています。</p>

<p>つまり、この話は<strong>嘘</strong>です。</p>

<h3>「HTTPSを導入すると遅くなる」</h3>

<p>次はボブの話。ボブはEコマースサイトを持っています。彼はサイトを分析し、コンバージョン最適化のためにはレイテンシーを下げることが必要と判断しましたが、HTTPSとパフォーマンスについてあまりよくない話を聞きました。</p>

<p>HTTPSに移行したyell.comはパフォーマンスの差（HTTPとHTTPS）は相対的に大きかったと言っています。しかしながら、2010年にGmailをHTTPSに移行したGoogleは無視できるほどの差しかなかったとしています。</p>

<p>ボブはこれらの話を知り、さらに自分自身でも調査をしました。</p>

<p>エミリーはボブや一般のWebデベロッパーのためにHTTPSにするとネットワーク層で何が起きるのかを説明し、どのように遅延を避けるかを解説します。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2016/07/8.png" data-wpel-link="internal"><img src="/wp-content/uploads/2016/07/8.png" alt="HTTPS移行で起きること" width="640" height="352" class="aligncenter size-full wp-image-20072" srcset="/wp-content/uploads/2016/07/8.png 640w, /wp-content/uploads/2016/07/8-300x165.png 300w, /wp-content/uploads/2016/07/8-207x114.png 207w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>

<p>一般のユーザーはブックマークするなどした以前のHTTPのURLでサイトにアクセスしてきますので、まずはHTTPからHTTPSへのリダイレクトが起きます。そしてその次にTLSハンドシェイクで証明書のやりとりと双方がTLSを使えることの確認が行われます。</p>

<h4>HSTS</h4>

<p>まず最初のHTTPからHTTPSへのリダイレクトに関しては、HTTP Strict Transport Security（HSTS）の導入を勧めます。HTTPヘッダーにHSTSの記述をすることで、次回からのアクセス時にブラウザはHTTPでのURLを自動的に内部でHTTPSに置き換えます。これにより2度目以降はこのリダイレクトは発生しなくなります。</p>

<p>注意事項としては、これは一度セットされると、HTTPヘッダーが失効するまで有効ですので、HTTPSのテスト時や完全にHTTPSでのアクセスをサポートできるまでは行ってはいけません。</p>

<h4>TLS False Start</h4>

<p>次のTLSハンドシェイクにおける最適化は2ウェイラウンドトリップをいかに高速化するかに関わるのですが、ここではTLS False Startの利用を勧めます。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2016/07/9.png" data-wpel-link="internal"><img src="/wp-content/uploads/2016/07/9.png" alt="TLS False Start" width="640" height="357" class="aligncenter size-full wp-image-20071" srcset="/wp-content/uploads/2016/07/9.png 640w, /wp-content/uploads/2016/07/9-300x167.png 300w, /wp-content/uploads/2016/07/9-207x115.png 207w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>

<p>TLS False Startは2ウェイラウンドトリップを待つことなく、クライアントであるブラウザがHTTPSでの通信をリクエストするものです。</p>

<h4>TLS Session Resumption</h4>

<p>もう１つの最適化はTLS Session Resumptionと呼ばれるもので、一度TLS通信を行った場合、以前に使ったセッションIDを用いることで、同じTLSハンドシェイクは必要ないと省略するものです。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2016/07/10.png" data-wpel-link="internal"><img src="/wp-content/uploads/2016/07/10.png" alt="TLS Session Resumption" width="640" height="336" class="aligncenter size-full wp-image-20070" srcset="/wp-content/uploads/2016/07/10.png 640w, /wp-content/uploads/2016/07/10-300x158.png 300w, /wp-content/uploads/2016/07/10-207x109.png 207w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>

<h4>HTTP/2</h4>

<p>ここでエミリーはHTTP/2のいくつかの特徴を話します。</p>

<p>HTTP/2はリクエストとレスポンスを並列で行うパイプライン化により、１つのリクエストのレスポンスを待たずに次のリクエストを送れます。また、サーバープッシュにより、ブラウザがHTMLをパースし、追加のリソースであるスタイルシート（CSS）やJavaScript、イメージなどをリクエストするのを待たずに、サーバー側から必要となるリソースをプッシュすることが可能です。</p>

<p>HTTP/2には他にもさまざまな利点があります。</p>

<p>ここで大事なのは、このHTTP/2はHTTPSでのみ利用可能なことです。</p>

<p>エミリーはHTTP/2がHTTPSでのみ利用可能になっているのには、2つの理由があると言います。1つがHTTPSを普及させるためのインセンティブとして、つまりHTTP/2を使いたいならば、HTTPSを使わなければいけないとすることにより普及を目論んでいるということです。もう１つがプロキシサーバーなどの中継機器によりHTTP/2の通信が阻害されることを避けるためです。</p>

<p>ここで、さきのボブの話に戻ります。ボブが知ったyell.comのHTTPS移行の話ですが、実は彼らが遭遇したパフォーマンス上の課題は古いロードバランサーによるものであったそうです。彼らは将来的にはHTTP/2にアップグレードすることで、TLSネゴシエーションを改良し、RTTを減らすことで、HTTPSへの移行をネガティブなインパクトではなく、ポジティブなインパクトに変えたいと言っています。</p>

<p>実際に、別の事例としてweather.comがあります。彼らはHTTPSに移行した際にネガティブなインパクトがあったのですが、最終的にHTTP/2にアップグレードすることで、それらはほとんど解消できたそうです。</p>

<p>ボブはこれらの調査結果を踏まえて、解説されたような設定を行うとともに、HTTP/2にアップグレードすることで、パフォーマンスの心配なく、HTTPSに移行することができました。</p>

<p>結論として、この話、「HTTPSを導入すると遅くなる」は<strong>（ほとんど）嘘</strong>とエミリーは言います。「ほとんど」となっているのは、HTTP/2へのアップグレードなどを含めて総合的にはという意味でしょう。</p>

<h4>参考情報</h4>

<p>HTTPSに移行したyell.comの話は<a href="https://blog.yell.com/2016/03/https-is-hard/" target="_blank " data-wpel-link="external" rel="follow external noopener noreferrer">HTTPS is Hard – The Yell Blog</a>に詳しく書かれています。これは大変読み応えのある記事なので、英語ですがお勧めです。</p>

<p>また、HSTSについては以前書いた<a href="http://qiita.com/takoratta/items/fb6b3486257eb7b9f12e" target="_blank " data-wpel-link="external" rel="follow external noopener noreferrer">HSTS (HTTP Strict Transport Security) の導入 &#8211; Qiita</a>に簡潔にまとめてあります。</p>

<p>HSTSを含むTLSの設定などは、IPA（情報処理推進機構）の<a href="http://www.ipa.go.jp/security/vuln/ssl_crypt_config.html" title="SSL/TLS暗号設定ガイドライン" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">SSL/TLS暗号設定ガイドライン～安全なウェブサイトのために（暗号設定対策編）～</a>がお勧めです。</p>

<h3>「HTTPSに関しての攻撃がたくさんあるみたい」</h3>

<p>今度はイブの話。技術的な知識もあるイブはちょっとお金に困っていました。そこでHTTPSの脆弱性の話に目をつけ、あるHTTPSの脆弱性を持ったまま放置されているサイトを探します。クレジットカードやログイン情報を持っているサイトなどで脆弱性が放置されているサイトにアクセスします。</p>

<p>これは実際に起こりうる話です。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2016/07/11.png" data-wpel-link="internal"><img src="/wp-content/uploads/2016/07/11.png" alt="TLS脆弱性" width="640" height="272" class="aligncenter size-full wp-image-20069" srcset="/wp-content/uploads/2016/07/11.png 640w, /wp-content/uploads/2016/07/11-300x128.png 300w, /wp-content/uploads/2016/07/11-207x88.png 207w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>

<p>HTTPSのセキュリティの研究は最近とても注目されており、単なる攻撃の可能性を理論で示すだけではなく、より実践的な形で攻撃を示したり、インターネット上で実際に脆弱なサイトを見つけるツールやスクリプトを公開したりすることも多くなっています。</p>

<p>実際に図に示したように、多くの脆弱性と攻撃が見つかっています。</p>

<p>エミリーはこう考えたらどうかと言います。</p>

<p>「HTTPSはライフジャケットのようなもの。いろいろと問題はあるけれど、HTTPはライフジャケット無しのようなもの」</p>

<p>HTTPSを使わないのではなく、ツールなどを用いて、サイトで用いる技術を常に最新の状態に保つのが良いでしょう。例えば、<a href="https://www.ssllabs.com/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">SSL Labs</a>は<a href="https://www.ssllabs.com/ssltest/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">スキャニングツール</a>を提供していて、サイトのURLを入力することで、サイトのレイティングや必要となる設定などを示してくれます。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2016/07/12.png" data-wpel-link="internal"><img src="/wp-content/uploads/2016/07/12.png" alt="https://qiita.comのスキャン結果/" width="640" height="375" class="aligncenter size-full wp-image-20068" srcset="/wp-content/uploads/2016/07/12.png 640w, /wp-content/uploads/2016/07/12-300x176.png 300w, /wp-content/uploads/2016/07/12-207x121.png 207w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>

<p>類似のツールとして、<a href="https://mozilla.github.io/server-side-tls/ssl-config-generator/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">MozillaはSSL Configuration Generator</a>を提供しています。利用するサーバーやバージョンなどを入力することで、設定が生成されます。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2016/07/13.png" data-wpel-link="internal"><img src="/wp-content/uploads/2016/07/13.png" alt="Mozilla SSL Configuration Generator" width="640" height="443" class="aligncenter size-full wp-image-20067" srcset="/wp-content/uploads/2016/07/13.png 640w, /wp-content/uploads/2016/07/13-300x208.png 300w, /wp-content/uploads/2016/07/13-207x143.png 207w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>

<p>さて、この話の結論は<strong>事実（ただし、心配しすぎることは無い）</strong>です。「心配しすぎることはない」のは、ライフジャケットなしのHTTPよりも、多少の問題があってもライフジャケットとなるHTTPSは使ったほうが良いし、問題もツールなどを用いて常に最新ソフトウェアを使い、構成を正しくすることで解決できるからです。</p>

<h3>「HTTPSにはお金がたくさんかかる」</h3>

<p>次の主人公はチャーリー。</p>

<p>チャーリーは２年前にスタートアップ向きの素晴らしいアイデアを思いつきました。彼はサイトを作り、そこで人々がチャットを行えるようにし、無事ベンチャーキャピタルからも資金を調達できました。それから2年経ち、資金調達で得た資金も枯渇しつつありこともあって、彼はコストには厳しくなってきています。HTTPSにはお金がかかるという話が気になっています。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2016/07/14.png" data-wpel-link="internal"><img src="/wp-content/uploads/2016/07/14.png" alt="14" width="640" height="383" class="aligncenter size-full wp-image-20066" srcset="/wp-content/uploads/2016/07/14.png 640w, /wp-content/uploads/2016/07/14-300x180.png 300w, /wp-content/uploads/2016/07/14-207x124.png 207w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>

<p>お金はHTTPSのいろいろなところに関係しています。</p>

<p>パフォーマンスもお金に関係しますし、最後に紹介する広告もお金の話です。ここでは、特にHTTPSの財務上の課題について話します。HTTPSを支える暗号技術における認証は証明書が必要です。これは従来は認証局から有償で購入する必要がありました。身分証明や法人登記書類などを提示して、認証局より証明書を購入し、それをブラウザに対しての自らの認証として使います。</p>

<p>さて、この証明書はいくらかかるのでしょう？ 確かに以前はお金がかかりましたが、今ではいくつかの安価な解決策があります。例えば、プロジェクトSSLMate（https://sslmate.com/ ）というものが数年前から始まっていますが、ここでは1つのドメイン年額$15.95です。複数証明書や追加オプションなどを使うとしても、財務にさほど大きな負担を与えません。新しいプロジェクトのLet&#8217;s Encrypt（https://letsencrypt.org/ ）は無料で証明書を発行します。</p>

<p>このSSLMateとLet&#8217;s Encryptは無料もしくは安価での証明書の取得を実現するだけでなく、自動化のためのコマンドラインツールも提供しているので、期限切れを防ぐことなどの管理作業を行うことができます。</p>

<p>このように、証明書はあまりお金がかからないものとなりました。</p>

<p>もう1つのお金にまつわる心配は、検索ランクへの影響です。HTTPとHTTPSという2つのバージョンのサイトがあったならば、検索エンジンが混乱してしまい、検索ランクが下がってしまうのではないでしょうか？</p>

<p>Googleはサイトの移動に関していくつかのガイドラインを示しています。1つはサイトを移動した場合、301リダイレクトを返すようにと勧めています。また、検索エンジンのクローラーがアクセスしてきた時のために、canonicalリンク要素を提供する必要があります。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2016/07/15.png" data-wpel-link="internal"><img src="/wp-content/uploads/2016/07/15.png" alt="15" width="640" height="299" class="aligncenter size-full wp-image-20065" srcset="/wp-content/uploads/2016/07/15.png 640w, /wp-content/uploads/2016/07/15-300x140.png 300w, /wp-content/uploads/2016/07/15-207x97.png 207w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>

<p>他のガイドラインとしては、次のようなものがあります。</p>

<p>https://support.google.com/webmasters/answer/6033049
https://support.google.com/webmasters/answer/6073543
https://plus.google.com/+JohnMueller/posts/PY1xCWbeDVC</p>

<p>これらのガイドラインに従うことで、検索ランクへの影響は最小限に抑えることができ、その影響もしばらくしたら回復します。逆に、GoogleはHTTPSのサイトにランキングブーストを行っています。現在は小さいブーストだが、将来的には変更もあり得ることをエミリーは示唆しています。</p>

<p>証明書のコストも無料か低価格で抑えられ、検索結果への影響も無視できるレベルなので、この話の結論は<strong>嘘</strong>となります。</p>

<h3>「私のサイトはHTTPSに移行できるけど、使っている（依存している）サードパーティ（のサービス）はどうしたらいいの？」</h3>

<p>最後の話の登場人物はフランシスコ。彼によるサードパーティコンテンツにまつわる話です。
皆さんのサイトも多くのサードパーティに依存していることでしょう。</p>

<p>フランシスコは大きなニュースサイトを運営しています。このニュースサイトには多くのレガシーなコンテンツも掲載されています。フランシスコはサイトをHTTPS化すると、すべてのサードパーティコンテンツも同様にHTTPS対応していなければならないと聞いていたので、サイトのHTTPS化はかなり大変ではないかと心配しています。</p>

<p>これは事実で、サードパーティコンテンツもHTTPSに対応していなければなりません。</p>

<p>まず一番最初に心配したのが、サイトの収入源でもある広告です。広告がHTTPSに対応していれば、サイトの移行もすぐに行なえます。GoogleのAdSenseは現在では常にHTTPS上で提供されるようになっています。そのため、フランシスコが自分のサイトをHTTPSに移行する前であっても、実はAdSenseはHTTPSですでに提供されています。つまり、AdSenseについては心配の必要はありません。ただし、HTTPS通信がブロックされているいくつかの国は例外です。</p>

<p>これはGoogleだけの動きではありません。業界全体のトレンドです。2015年、IAB（Interactive Advertising Bureau）はブログ記事の中で約80%の広告ネットワークがすでにHTTPSに対応していると明かしています。</p>

<p><a href="http://www.iab.com/news/adopting-encryption-the-need-for-https/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">Adopting Encryption: The Need for HTTPS</a></p>

<p>このように最近では広告がHTTPSに対応していないから、サイトのHTTPS化ができないというのはほとんどなくなっています。もし、広告ネットワークがHTTPSに対応していないようだったら、是非確認してみてください。近い将来に対応予定であることがほとんどでしょうし、もしそうでなかったならば何故対応しないか、是非対応してほしいと言ってみましょう。</p>

<p>次に心配なサードパーティコンテンツはHTTPリファラーヘッダーに依存しているものです。アクセス解析のためなどのいくつかの理由によりパートナーサイトであるサードパーティはHTTPリファラーヘッダーを見て、トラフィックがフランシスコのサイトから来たものであることを確認します。問題は、HTTPSでホストされているサイト上のHTTPでホストされているサイトへのリンクをユーザーがクリックした場合、ブラウザはプライバシーの理由からリファラーヘッダーを取り去ってしまうのです。フランシスコにとって、これは困ります。</p>

<p>ここで解決のために必要となるのが、<a href="https://www.w3.org/TR/referrer-policy/" data-wpel-link="external" target="_blank" rel="follow external noopener noreferrer">Referrer Policy</a>です。a要素などに付けられるこのReffer Policyとして、&#8221;origin-when-cross-origin&#8221;を指定することで、リファラーヘッダーがHTTPサイトに対して送られることになります。他にも複数のポリシーがあるので、適切なものを選び、必要な状態でリファラーを送ることができます。</p>

<p><code>&lt;a href="http://external-partner.com/..." referrerpolicy="origin-when-cross-origin"&gt;Click here!&lt;/a&gt;</code></p>

<p>最後のフランシスコの心配は少し一般的なものです。Mixed Contentsと言われる、HTTPSサイトでホストされているページの中にHTTPサイトでホストされるセキュアではないコンテンツが含まれるケースです。このようなコンテンツがロードされることで、HTTPSにより高められるセキュリティが妥協したものになってしまうため、厳しい措置がとられています。スクリプトやiFrameのようなものはブラウザによりブロックされます。</p>

<p>また、フランシスコのサイトでは多くの古い記事にロードされている写真などがあったのですが、これらはHTTPでホストされています。このようなイメージに対してはブラウザはブロックはしませんので、イメージも見ることはできますが、ブラウザのアドレスバーのHTTPSアクセスを示す緑色は消えてしまいます。</p>

<p>CSP（Content Security Policy）を用いてこの問題は対処することができます。HTTPレスポンスヘッダーに次のように指定します。</p>

<p><code>Content-Security-Policy-Report-Only: default-src https:
  'unsafe-inline' 'unsafe-eval'; report-uri
  https://example.com/reportEndpoint</code></p>

<p><code>default-src https:</code>という指定から、ブラウザはすべてのコンテンツはHTTPSでロードしようとします。ただし、<code>'unsafe-inline' 'unsafe-eval'</code>という指定から、動的に生成されたものやインラインスクリプトは例外とします。ブラウザがコンテンツをロード中に、もしこのポリシーに従わなかったものを見つけたら、<code>https://example.com/reportEndpoint</code>にレポートするように指示されています。</p>

<p>このポリシーの例は、&#8221;Report-Only&#8221;なので、ユーザーから見た時の挙動は変わりません。セキュアでないコンテンツのロードがブロックされることもありません。ただ、もしそのようなコンテンツがロードされたことがあったならば、フランシスコはレポートを通じて知ることができます。</p>

<p>このレポーティングのためのインフラを用意するのも面倒であった場合、report-uri.ioというサービスを使うことも可能です。エンドポイントを用意してくれるだけでなく、解析やビジュアリゼーションまでも行ってくれます。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2016/07/16.png" data-wpel-link="internal"><img src="/wp-content/uploads/2016/07/16.png" alt="report-uri.io" width="640" height="424" class="aligncenter size-full wp-image-20064" srcset="/wp-content/uploads/2016/07/16.png 640w, /wp-content/uploads/2016/07/16-300x199.png 300w, /wp-content/uploads/2016/07/16-207x137.png 207w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>

<p>ここで説明したことは、Chrome DevToolsのセキュリティパネルで見ることができるようになっています。</p>

<p><a href="https://html5experts.jp/wp-content/uploads/2016/07/17.png" data-wpel-link="internal"><img src="/wp-content/uploads/2016/07/17.png" alt="DevTools Security Panel" width="640" height="383" class="aligncenter size-full wp-image-20063" srcset="/wp-content/uploads/2016/07/17.png 640w, /wp-content/uploads/2016/07/17-300x180.png 300w, /wp-content/uploads/2016/07/17-207x124.png 207w" sizes="(max-width: 640px) 100vw, 640px" /></a></p>

<p>この話の結論は<strong>真実</strong>です。ですが、ここ数年で状況は改善されつつあり、業界全体として対応に取り組んでいるものです。</p>

<h2>まとめ</h2>

<p>確かに、10年や15年前はHTTPSは遅く、導入にはコストがかかり、セットアップは手間のかかるものでしたが、現在では多くの障壁は取り払われています。</p>

<p>このセッションでエミリーが解説したように、HTTPS関連のツールやサービスなどが充実し、導入は昔の比ではないほど敷居が下がっています。インターネットのセキュリティの強化は誰かひとりや一社の取り組みで一日にして成るものではありません。HTTPSの導入を進めることで、安全に快適なインターネット空間が広がるよう、皆で努力していきましょう。</p>

<h2>補足</h2>

<p>各お話に出てくる人物の名前にはそれぞれ由来があります。</p>

<ul>
<li>アリスとボブは暗号技術を勉強したことがある人ならばご存知だと思いますが、暗号通信を二者で行うときの例として出てくるのが常にボブとアリス。それが由来。</li>
<li>イブはEvil（邪悪な）から。</li>
<li>チャーリーはどこから来たのか不明。</li>
<li>フランシスコはサンフランシスコからか。</li>
</ul>
]]></content:encoded>
			</item>
	</channel>
</rss>
