激闘! Mixed Contents!! 〜はてなブログHTTPS化への道〜 / Hatena Engineer Seminar #10

Transcript

1. 激闘! Mixed Contents!! ～ はてなブログHTTPS 化への道～ by id:papix (@__papix__) 株式会社はてな
2. papix 株式会社はてな アプリケー ションエンジニア (2017 年2 月～) ブログビジネスチー ム テックリー ド ｢ はてなブログ｣ をつくっています アカウント類 はてな: i d : p a p i x Twitter: @ _ _ p a p i x _ _ GitHub: p a p i x CPAN: P A P I X ブログ: h t t p s : / / p a p i x . h a t e n a ( b l o g . ( c o m | j p ) | d i a r y . j p ) / 趣味はPerl と, ( 交通機関を利用した) 旅行 去年JGC 修行を完遂しました( 年間53 搭乗/40,573km) 折を見てSFC も修行したい...
3. もくじ はてなブログとHTTPS 化 ～ ここまでの流れ～ なぜHTTPS にするのか? はてなブログHTTPS 化の難易度 激闘! Mixed Contents!! 共闘! 仲間と共にHTTPS 化!! まとめ
4. はてなブログとHTTPS 化 ～ ここまでの流れ～
5. はてなブログとHTTPS 化 ～ ここまでの流れ～ 2017 年9 月25 日 ... 告知 http://staff.hatenablog.com/entry/2017/09/25/143000 2017 年11 月20 日 ... 管理画面HTTPS 化完了 ( 第1 フェイズ) http://staff.hatenablog.com/entry/2017/11/20/175000 2018 年2 月22 日 ... はてな提供ドメインブログのHTTPS 化完了 ( 第2 フェイズ) http://staff.hatenablog.com/entry/2018/02/22/150000 2018 年X 月XX 日 ... 独自ドメインブログのHTTPS 化完了 ( 第3 フェ イズ)
6. 今日話すこと 第1 フェイズ～ 第2 フェイズ ... id:papix 主にMixed Contents 対応を中心に 第3 フェイズ ... id:aereal Let's Encrypt を活用した証明書取得について
7. なぜHTTPS にするのか?
8. なぜHTTPS 化が必要か http://staff.hatenablog.com/entry/2018/02/22/150000
9. なぜHTTPS 化が必要か より安全にはてなブログを活用して頂くため ｢ はてなブログMedia｣ という企業向けの展開も行っているため セキュリティ強化は重要 HTTPS が前提となる技術スタックの登場 Progressive Web Apps/Service Worker... HTTPS 化推進の波 様々 な企業/ 団体がWeb サイトのHTTPS 化を推進している Let's Encrypt もその流れの中で登場してきた Chrome では, HTTP の場合に警告が出るようになっている
10. はてなブログHTTPS 化の難易度
11. UGC サー ビス UGC = User Generated Content サー ビスの利用者がコンテンツを生み出すサー ビス ブログの場合, サー ビスの利用者( はてなブロガー) が記事という コンテンツを" 生み出す" はてなブログはUGC プラットフォー ムとして" 自由度" が高い 記事にHTML を埋め込める
12. マルチテナント ユー ザー ごとにブログを開設できる 更に, 1 人で複数のブログを持てる ブログは, デザインもCSS 含めてかなり柔軟にアレンジ出来る 加えて, 企業向けの｢ はてなブログMedia｣ も同じコー ドの上で動い ている
13. 他サー ビスとの連携 公式で様々 なサー ビスのコンテンツを埋め込める Twitter, ニコニコ動画, はてなブックマー ク, Amazon, iTunes... 自社サー ビスとの連携もある はてなスター, はてなブックマー ク
14. Mixed Contents ユー ザー が自由にHTML を書ける = 様々 なコンテンツを埋め込める/ 読み込める 画像, 動画, iframe, JavaScript, CSS... HTTPS のブログでHTTP のコンテンツを読み込むと, Mixed Contents が発生する
15. 独自ドメイン はてなブログが提供するドメインだけでなく, 任意のドメインでブ ログを開設できる 正確に言えば, はてなブログが提供するドメインから, 任意のド メインに切り替えることができる 独自ドメインについては, これまではHTTPS 対応が難しかった ユー ザが発行した証明書を預かるのは難しい( 避けたい) Let's Encrypt によって独自ドメインのHTTPS 化も目処が立っ てきた
16. 要するに... はてなブログはHTTPS 化という観点で見ると｢ 数え役満｣ 状態 UGC サー ビス マルチテナント 他サー ビスの連携 Mixed Contents 独自ドメイン 日本でも屈指のHTTPS 化難易度を誇るのではないか...?
17. 激闘! Mixed Contents!!
18. Mixed Contents 入門 そもそもMixed Contents とは何か?
19. なぜ起きるのか? HTTPS のURL でウェブサイトを読み込んだ時に起こりうる 読み込んだHTML から, 更に読み込まれるコンテンツがHTTP で 読み込まれる時に発生する HTTP 接続は暗号化されていないので, 改竄されたり, 通信を盗聴さ れる危険性がある
20. どうなるのか? このような表示になる Mixed Contents が起きてない場合, このように｢ 保護された通信｣ と 表示される
21. どうなるのか? また, このようにブラウザのconsole でも警告が出る
22. どうすればよいのか? 単純至極!!! HTTPS のウェブサイトから読み込むコンテンツは, 全てHTTPS で読み込むようにする h t t p : / / . . . で読み込んでいる所に s を足して, h t t p s : / / . . . にすれば良い
23. 簡単じゃん!
25. その s を付けるために... h t t p : / / . . . を h t t p s : / / . . . にしても, そのコンテンツがHTTPS で配信されていなければ意味がない! 一気に解決出来ず, コンテンツごとに作戦を建てて丁寧に取り組ん でいく必要がある
26. Mixed Contents 対策
27. 方針 まずは, はてなブログが公式に提供する機能で埋め込んだコンテン ツによって, Mixed Contents が発生しない状態を目指す
28. 方針 はてなブログでは, 編集画面のサイドバー から様々 なコンテンツを 埋め込むことができる
29. 調査 はてなブログの編集画面のサイドバー から埋め込めるコンテンツ は? 写真(Fotolife/Google Photo), はてなブログで書いた過去記事, 他のはてなブログの記事の引用, Amazon, 楽天, YouTube, Twitter, Instagram, はてなブックマー ク, ニコニコ動画, pixiv, iTunes, Evernote, ぐるなび/ 食べログ, Gist, Flickr, 絵, ミイル... 他にも, はてな記法によって展開されて埋め込まれるコンテンツも 存在する
30. 対策 丁寧にやっていく
31. 以上!!!!!!!
32. HTTPS で配信する 自社のコンテンツであれば, HTTPS で配信するようにしてHTTPS で 読み込むようにすればOK 一番手っ取り早い
33. HTTPS のリソー スが使えるように改良する 他社のサー ビスが提供するリソー スを埋め込む場合, API でリソー ス を埋め込むための情報を取得していることが多い API のレスポンスに, HTTP/HTTPS 両方でリソー スのURL が示 されていることがある API のバー ジョンを上げると, リソー スのURL がHTTPS になる こともある
34. 機能を撤廃する 最終手段 対応が難しい場合, 利用状況なども調査して, コンテンツを埋め 込む機能を撤廃することもあった
35. 絵文字事件 果てしないMixed Contents 対策の中でも, 特に思い出深いエピソー ドを 紹介します...
36. ｢ 絵文字記法｣ の発見
37. ｢ 絵文字記法｣ の発見
38. ｢ 絵文字記法｣ の発見 古参スタッフですら未知だった｢ 絵文字記法｣ が発見された 絵文字記法を使うと, 最終的に画像に変換される その画像がHTTP でしか配信されていなかった! 更に何故か, その絵文字の画像ははてな社内の他サー ビスが配信し ていた!!!
39. ｢ 絵文字記法｣ の対応 そもそも, はてなブログで使っているコンテンツを, 他サー ビスが配 信しているという状況が良くない そのサー ビスが万が一撤退することになった時, またてんやわ んやすることになる この機会に, 丁寧にはてなブログ側で配信するように実装をし直し た
40. ｢ 絵文字記法｣ の感想 はてなブログは6 年程度の歴史しかないけれど, それでもこうやっ て, 当初発見されずに後に気付いて対応が必要な場所が増える, とい うのが多々 あった 絵文字記法もそのうちの1 つにしかすぎない... 結論としては, 丁寧にやっていきましょう...
41. 共闘! 仲間と共にHTTPS 化!!
42. アプリケー ション改修 ｢Mixed Contents 解消｣ は, HTTPS 化の最初の山 次の山は｢ アプリケー ション改修｣ これもまた, 銀の弾丸はない 丁寧にHTTPS に対応していく...
43. 開発環境のHTTPS 化 ちょうどHTTPS 化プロジェクトが始まる前に, 開発環境のDocker 化 を推進していた アプリケー ションの前段にNginx を建てて, 開発環境でも HTTP/HTTPS 両方で開発できるように 証明書はいわゆる" オレオレ証明書" を使う
44. パター ンを網羅してテスト はてなブログであり得る全てのパター ンを網羅してテスト 例: HTTPS が有効なはてなブログに, HTTP でリクエストする と, HTTPS にリダイレクトする... この形式は見にくかったので, 後にガッツリ修正されました
45. QA アプリケー ション改修が完了した後, QA フェイズを挟む はてなには専属のQA 部隊はないので, サポー ト部に協力を依頼 "QA シー ト" を用意して, それに従って操作を試していただく
46. QA シー トの用意
47. QA の成果 幾つか考慮漏れだったポイントを発見できた サポー ト部とHTTPS 化による成果を共有できた ユー ザー からのお問い合わせは, サポー ト部のメンバー が対応 する HTTPS 化によって, ブログの挙動がどのように変わるかをQA を通じてお伝えすることができた
48. リリー ス
49. リリー ス まずは社員向けにリリー スして動作検証 問題がなければ, 一般公開を進めていく GitHub のIssue に手順書を用意して, リリー スにあたって必要な作業 を全て列挙 関係部署への連絡, リリー ス後の動作確認手順など...
52. ... このようにして, HTTPS 化が進んでいっているので す!!!
53. まとめ "HTTPS 化" は, 正直に言うと, とにかく地味な作業が延々 と続く... 独自ドメインのHTTPS 化は, AWS やLet's Encrypt の活用など, 技術的な面白さがたくさんあるが... 地道に丁寧に, 現れる問題に対して, 1 つずつ対処していくのが一番 の近道だと思う
54. まとめ 地道な仕事であったが, 得るものは多かった ここまで長期的なプロジェクトをメインで任せてもらうのは ( 前職含め) 初めてだった ( 現状第2 フェイズまでだが) 致命的な大きな問題進められてい て, 自分自身に自信が持てている ｢ 仲間と連携して, 目的を成し遂げる｣ ために必要なスキル(?) を, たく さん得ることが出来た
55. ご清聴ありがとうございました!