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

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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
   フェ
   イズ)
   

   View Slide

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

   View Slide

7. なぜHTTPS
   にするのか?
   

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

17. 激闘! Mixed Contents!!
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

23. 簡単じゃん!
    

    View Slide

24. View Slide

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

    View Slide

26. Mixed Contents
    対策
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

30. 対策
    丁寧にやっていく
    

    View Slide

31. 以上!!!!!!!
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

36. ｢
    絵文字記法｣
    の発見
    

    View Slide

37. ｢
    絵文字記法｣
    の発見
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

46. QA
    シー
    トの用意
    

    View Slide

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

    View Slide

48. リリー
    ス
    

    View Slide

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

    View Slide

50. View Slide

51. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide