$30 off During Our Annual Pro Sale. View Details »

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

papix
May 23, 2018

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

papix

May 23, 2018
Tweet

More Decks by papix

Other Decks in Technology

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