Upgrade to Pro — share decks privately, control downloads, hide ads and more …

激闘! Mixed Contents!! 〜はてなブログHTTPS化への道〜 / Hatena...

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. 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 も修行したい...
  2. はてなブログと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 フェ イズ)
  3. 今日話すこと 第1 フェイズ~ 第2 フェイズ ... id:papix 主にMixed Contents 対応を中心に

    第3 フェイズ ... id:aereal Let's Encrypt を活用した証明書取得について
  4. なぜHTTPS 化が必要か より安全にはてなブログを活用して頂くため 「 はてなブログMedia」 という企業向けの展開も行っているため セキュリティ強化は重要 HTTPS が前提となる技術スタックの登場 Progressive

    Web Apps/Service Worker... HTTPS 化推進の波 様々 な企業/ 団体がWeb サイトのHTTPS 化を推進している Let's Encrypt もその流れの中で登場してきた Chrome では, HTTP の場合に警告が出るようになっている
  5. UGC サー ビス UGC = User Generated Content サー ビスの利用者がコンテンツを生み出すサー

    ビス ブログの場合, サー ビスの利用者( はてなブロガー) が記事という コンテンツを" 生み出す" はてなブログはUGC プラットフォー ムとして" 自由度" が高い 記事にHTML を埋め込める
  6. Mixed Contents ユー ザー が自由にHTML を書ける = 様々 なコンテンツを埋め込める/ 読み込める

    画像, 動画, iframe, JavaScript, CSS... HTTPS のブログでHTTP のコンテンツを読み込むと, Mixed Contents が発生する
  7. 要するに... はてなブログはHTTPS 化という観点で見ると「 数え役満」 状態 UGC サー ビス マルチテナント 他サー

    ビスの連携 Mixed Contents 独自ドメイン 日本でも屈指のHTTPS 化難易度を誇るのではないか...?
  8. その s を付けるために... h t t p : / /

    . . . を h t t p s : / / . . . にしても, そのコンテンツがHTTPS で配信されていなければ意味がない! 一気に解決出来ず, コンテンツごとに作戦を建てて丁寧に取り組ん でいく必要がある
  9. 調査 はてなブログの編集画面のサイドバー から埋め込めるコンテンツ は? 写真(Fotolife/Google Photo), はてなブログで書いた過去記事, 他のはてなブログの記事の引用, Amazon, 楽天,

    YouTube, Twitter, Instagram, はてなブックマー ク, ニコニコ動画, pixiv, iTunes, Evernote, ぐるなび/ 食べログ, Gist, Flickr, 絵, ミイル... 他にも, はてな記法によって展開されて埋め込まれるコンテンツも 存在する
  10. HTTPS のリソー スが使えるように改良する 他社のサー ビスが提供するリソー スを埋め込む場合, API でリソー ス を埋め込むための情報を取得していることが多い

    API のレスポンスに, HTTP/HTTPS 両方でリソー スのURL が示 されていることがある API のバー ジョンを上げると, リソー スのURL がHTTPS になる こともある
  11. アプリケー ション改修 「Mixed Contents 解消」 は, HTTPS 化の最初の山 次の山は「 アプリケー

    ション改修」 これもまた, 銀の弾丸はない 丁寧にHTTPS に対応していく...
  12. QA の成果 幾つか考慮漏れだったポイントを発見できた サポー ト部とHTTPS 化による成果を共有できた ユー ザー からのお問い合わせは, サポー

    ト部のメンバー が対応 する HTTPS 化によって, ブログの挙動がどのように変わるかをQA を通じてお伝えすることができた
  13. リリー ス まずは社員向けにリリー スして動作検証 問題がなければ, 一般公開を進めていく GitHub のIssue に手順書を用意して, リリー

    スにあたって必要な作業 を全て列挙 関係部署への連絡, リリー ス後の動作確認手順など...
  14. まとめ "HTTPS 化" は, 正直に言うと, とにかく地味な作業が延々 と続く... 独自ドメインのHTTPS 化は, AWS

    やLet's Encrypt の活用など, 技術的な面白さがたくさんあるが... 地道に丁寧に, 現れる問題に対して, 1 つずつ対処していくのが一番 の近道だと思う
  15. まとめ 地道な仕事であったが, 得るものは多かった ここまで長期的なプロジェクトをメインで任せてもらうのは ( 前職含め) 初めてだった ( 現状第2 フェイズまでだが)

    致命的な大きな問題進められてい て, 自分自身に自信が持てている 「 仲間と連携して, 目的を成し遂げる」 ために必要なスキル(?) を, たく さん得ることが出来た