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

by papix

Slide 1

Slide 1 text

激闘! Mixed Contents!! ～はてなブログHTTPS 化への道～ by id:papix (@__papix__) 株式会社はてな

Slide 2

Slide 2 text

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 も修行したい...

Slide 3

Slide 3 text

もくじはてなブログとHTTPS 化～ここまでの流れ～なぜHTTPS にするのか? はてなブログHTTPS 化の難易度激闘! Mixed Contents!! 共闘! 仲間と共にHTTPS 化!! まとめ

Slide 4

Slide 4 text

はてなブログとHTTPS 化～ここまでの流れ～

Slide 5

Slide 5 text

はてなブログと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 フェイズ)

Slide 6

Slide 6 text

今日話すこと第1 フェイズ～第2 フェイズ ... id:papix 主にMixed Contents 対応を中心に第3 フェイズ ... id:aereal Let's Encrypt を活用した証明書取得について

Slide 7

Slide 7 text

なぜHTTPS にするのか?

Slide 8

Slide 8 text

なぜHTTPS 化が必要か http://staff.hatenablog.com/entry/2018/02/22/150000

Slide 9

Slide 9 text

なぜHTTPS 化が必要かより安全にはてなブログを活用して頂くため｢はてなブログMedia｣という企業向けの展開も行っているためセキュリティ強化は重要 HTTPS が前提となる技術スタックの登場 Progressive Web Apps/Service Worker... HTTPS 化推進の波様々な企業/ 団体がWeb サイトのHTTPS 化を推進している Let's Encrypt もその流れの中で登場してきた Chrome では, HTTP の場合に警告が出るようになっている

Slide 10

Slide 10 text

はてなブログHTTPS 化の難易度

Slide 11

Slide 11 text

UGC サービス UGC = User Generated Content サービスの利用者がコンテンツを生み出すサービスブログの場合, サービスの利用者( はてなブロガー) が記事というコンテンツを" 生み出す" はてなブログはUGC プラットフォームとして" 自由度" が高い記事にHTML を埋め込める

Slide 12

Slide 12 text

マルチテナントユーザーごとにブログを開設できる更に, 1 人で複数のブログを持てるブログは, デザインもCSS 含めてかなり柔軟にアレンジ出来る加えて, 企業向けの｢はてなブログMedia｣も同じコードの上で動いている

Slide 13

Slide 13 text

他サービスとの連携公式で様々なサービスのコンテンツを埋め込める Twitter, ニコニコ動画, はてなブックマーク, Amazon, iTunes... 自社サービスとの連携もあるはてなスター, はてなブックマーク

Slide 14

Slide 14 text

Mixed Contents ユーザーが自由にHTML を書ける = 様々なコンテンツを埋め込める/ 読み込める画像, 動画, iframe, JavaScript, CSS... HTTPS のブログでHTTP のコンテンツを読み込むと, Mixed Contents が発生する

Slide 15

Slide 15 text

独自ドメインはてなブログが提供するドメインだけでなく, 任意のドメインでブログを開設できる正確に言えば, はてなブログが提供するドメインから, 任意のドメインに切り替えることができる独自ドメインについては, これまではHTTPS 対応が難しかったユーザが発行した証明書を預かるのは難しい( 避けたい) Let's Encrypt によって独自ドメインのHTTPS 化も目処が立ってきた

Slide 16

Slide 16 text

要するに... はてなブログはHTTPS 化という観点で見ると｢数え役満｣状態 UGC サービスマルチテナント他サービスの連携 Mixed Contents 独自ドメイン日本でも屈指のHTTPS 化難易度を誇るのではないか...?

Slide 17

Slide 17 text

激闘! Mixed Contents!!

Slide 18

Slide 18 text

Mixed Contents 入門そもそもMixed Contents とは何か?

Slide 19

Slide 19 text

なぜ起きるのか? HTTPS のURL でウェブサイトを読み込んだ時に起こりうる読み込んだHTML から, 更に読み込まれるコンテンツがHTTP で読み込まれる時に発生する HTTP 接続は暗号化されていないので, 改竄されたり, 通信を盗聴される危険性がある

Slide 20

Slide 20 text

どうなるのか? このような表示になる Mixed Contents が起きてない場合, このように｢保護された通信｣と表示される

Slide 21

Slide 21 text

どうなるのか? また, このようにブラウザのconsole でも警告が出る

Slide 22

Slide 22 text

どうすればよいのか? 単純至極!!! HTTPS のウェブサイトから読み込むコンテンツは, 全てHTTPS で読み込むようにする h t t p : / / . . . で読み込んでいる所に s を足して, h t t p s : / / . . . にすれば良い

Slide 23

Slide 23 text

簡単じゃん!

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

その s を付けるために... h t t p : / / . . . を h t t p s : / / . . . にしても, そのコンテンツがHTTPS で配信されていなければ意味がない! 一気に解決出来ず, コンテンツごとに作戦を建てて丁寧に取り組んでいく必要がある

Slide 26

Slide 26 text

Mixed Contents 対策

Slide 27

Slide 27 text

方針まずは, はてなブログが公式に提供する機能で埋め込んだコンテンツによって, Mixed Contents が発生しない状態を目指す

Slide 28

Slide 28 text

方針はてなブログでは, 編集画面のサイドバーから様々なコンテンツを埋め込むことができる

Slide 29

Slide 29 text

調査はてなブログの編集画面のサイドバーから埋め込めるコンテンツは? 写真(Fotolife/Google Photo), はてなブログで書いた過去記事, 他のはてなブログの記事の引用, Amazon, 楽天, YouTube, Twitter, Instagram, はてなブックマーク, ニコニコ動画, pixiv, iTunes, Evernote, ぐるなび/ 食べログ, Gist, Flickr, 絵, ミイル... 他にも, はてな記法によって展開されて埋め込まれるコンテンツも存在する

Slide 30

Slide 30 text

対策丁寧にやっていく

Slide 31

Slide 31 text

以上!!!!!!!

Slide 32

Slide 32 text

HTTPS で配信する自社のコンテンツであれば, HTTPS で配信するようにしてHTTPS で読み込むようにすればOK 一番手っ取り早い

Slide 33

Slide 33 text

HTTPS のリソースが使えるように改良する他社のサービスが提供するリソースを埋め込む場合, API でリソースを埋め込むための情報を取得していることが多い API のレスポンスに, HTTP/HTTPS 両方でリソースのURL が示されていることがある API のバージョンを上げると, リソースのURL がHTTPS になることもある

Slide 34

Slide 34 text

機能を撤廃する最終手段対応が難しい場合, 利用状況なども調査して, コンテンツを埋め込む機能を撤廃することもあった

Slide 35

Slide 35 text

絵文字事件果てしないMixed Contents 対策の中でも, 特に思い出深いエピソードを紹介します...

Slide 36

Slide 36 text

｢絵文字記法｣の発見

Slide 37

Slide 37 text

｢絵文字記法｣の発見

Slide 38

Slide 38 text

｢絵文字記法｣の発見古参スタッフですら未知だった｢絵文字記法｣が発見された絵文字記法を使うと, 最終的に画像に変換されるその画像がHTTP でしか配信されていなかった! 更に何故か, その絵文字の画像ははてな社内の他サービスが配信していた!!!

Slide 39

Slide 39 text

｢絵文字記法｣の対応そもそも, はてなブログで使っているコンテンツを, 他サービスが配信しているという状況が良くないそのサービスが万が一撤退することになった時, またてんやわんやすることになるこの機会に, 丁寧にはてなブログ側で配信するように実装をし直した

Slide 40

Slide 40 text

｢絵文字記法｣の感想はてなブログは6 年程度の歴史しかないけれど, それでもこうやって, 当初発見されずに後に気付いて対応が必要な場所が増える, というのが多々あった絵文字記法もそのうちの1 つにしかすぎない... 結論としては, 丁寧にやっていきましょう...

Slide 41

Slide 41 text

共闘! 仲間と共にHTTPS 化!!

Slide 42

Slide 42 text

アプリケーション改修｢Mixed Contents 解消｣は, HTTPS 化の最初の山次の山は｢アプリケーション改修｣これもまた, 銀の弾丸はない丁寧にHTTPS に対応していく...

Slide 43

Slide 43 text

開発環境のHTTPS 化ちょうどHTTPS 化プロジェクトが始まる前に, 開発環境のDocker 化を推進していたアプリケーションの前段にNginx を建てて, 開発環境でも HTTP/HTTPS 両方で開発できるように証明書はいわゆる" オレオレ証明書" を使う

Slide 44

Slide 44 text

パターンを網羅してテストはてなブログであり得る全てのパターンを網羅してテスト例: HTTPS が有効なはてなブログに, HTTP でリクエストすると, HTTPS にリダイレクトする... この形式は見にくかったので, 後にガッツリ修正されました

Slide 45

Slide 45 text

QA アプリケーション改修が完了した後, QA フェイズを挟むはてなには専属のQA 部隊はないので, サポート部に協力を依頼 "QA シート" を用意して, それに従って操作を試していただく

Slide 46

Slide 46 text

QA シートの用意

Slide 47

Slide 47 text

QA の成果幾つか考慮漏れだったポイントを発見できたサポート部とHTTPS 化による成果を共有できたユーザーからのお問い合わせは, サポート部のメンバーが対応する HTTPS 化によって, ブログの挙動がどのように変わるかをQA を通じてお伝えすることができた

Slide 48

Slide 48 text

リリース

Slide 49

Slide 49 text

リリースまずは社員向けにリリースして動作検証問題がなければ, 一般公開を進めていく GitHub のIssue に手順書を用意して, リリースにあたって必要な作業を全て列挙関係部署への連絡, リリース後の動作確認手順など...

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

No content

Slide 52

Slide 52 text

... このようにして, HTTPS 化が進んでいっているのです!!!

Slide 53

Slide 53 text

まとめ "HTTPS 化" は, 正直に言うと, とにかく地味な作業が延々と続く... 独自ドメインのHTTPS 化は, AWS やLet's Encrypt の活用など, 技術的な面白さがたくさんあるが... 地道に丁寧に, 現れる問題に対して, 1 つずつ対処していくのが一番の近道だと思う

Slide 54

Slide 54 text

まとめ地道な仕事であったが, 得るものは多かったここまで長期的なプロジェクトをメインで任せてもらうのは ( 前職含め) 初めてだった ( 現状第2 フェイズまでだが) 致命的な大きな問題進められていて, 自分自身に自信が持てている｢仲間と連携して, 目的を成し遂げる｣ために必要なスキル(?) を, たくさん得ることが出来た

Slide 55

Slide 55 text

ご清聴ありがとうございました!