jtwp470’s blog

日記とかﾌﾟﾖｸﾞﾔﾐﾝｸﾞとか

はてなブログがSSL対応されたのでこちらを技術ブログとしようと思います

日記

表題のとおりです。今結構前からmediumをブログとして使っていたのですが、はてなブログを使わない理由の1つにSSL対応されていないということがあったのですが、先日公式からアナウンスが有りました。

staff.hatenablog.com

本ブログもSSL化に対応されたので早速SSLを有効化しました。

挙動について

ちょいっと技術的な話ですが、curl で自分のブログにSSLでアクセスしてみます。

% curl -I https://jtwp470.hatenablog.jp/
HTTP/1.1 200 OK
Server: nginx
Date: Sun, 11 Mar 2018 02:59:30 GMT
Content-Type: text/html; charset=utf-8
Connection: keep-alive
Vary: Accept-Encoding
Vary: User-Agent, X-Forwarded-Host, X-Device-Type
Access-Control-Allow-Origin: *
Content-Security-Policy-Report-Only: block-all-mixed-content; report-uri https://blog.hatena.ne.jp/api/csp_report
P3P: CP="OTI CUR OUR BUS STA"
X-Cache-Only-Varnish: 1
X-Content-Type-Options: nosniff
X-Dispatch: Hatena::Epic::Web::Blogs::Index#index
X-Frame-Options: DENY
X-Page-Cache: hit
X-Revision: bfbec940d94e11790280484f3b97149a
X-XSS-Protection: 1
X-Runtime: 0.047087
X-Varnish: 432949723
Age: 0
Via: 1.1 varnish-v4
X-Cache: MISS
Cache-Control: private

こんな感じ。HTTP/2 には対応してないみたいです。ちなみにこのcurl は HTTP/2 をビルドオプションにつけているため、対応しているサイトであれば自動的にHTTP/2になります。

% curl --version
curl 7.58.0 (x86_64-apple-darwin16.7.0) libcurl/7.58.0 OpenSSL/1.0.2n zlib/1.2.8 libidn2/2.0.4 nghttp2/1.31.0
Release-Date: 2018-01-24
Protocols: dict file ftp ftps gopher http https imap imaps ldap ldaps pop3 pop3s rtsp smb smbs smtp smtps telnet tftp
Features: AsynchDNS IDN IPv6 Largefile NTLM NTLM_WB SSL libz TLS-SRP HTTP2 UnixSockets HTTPS-proxy

% curl -I https://jtwp470.net/
HTTP/2 200
server: nginx/1.10.3 (Ubuntu)
date: Sun, 11 Mar 2018 03:02:27 GMT
content-type: text/html
content-length: 6328
last-modified: Mon, 24 Jul 2017 14:31:33 GMT
etag: "597604c5-18b8"
x-frame-options: SAMEORIGIN
x-xss-protection: 1; mode=block
x-content-type-options: nosniff
strict-transport-security: max-age=31536000
accept-ranges: bytes

セキュリティ的な面ではどうなのか

% curl -I https://jtwp470.hatenablog.jp/
HTTP/1.1 200 OK
Server: nginx
Date: Sun, 11 Mar 2018 02:59:30 GMT
Content-Type: text/html; charset=utf-8
Connection: keep-alive
Vary: Accept-Encoding
Vary: User-Agent, X-Forwarded-Host, X-Device-Type
Access-Control-Allow-Origin: *
Content-Security-Policy-Report-Only: block-all-mixed-content; report-uri https://blog.hatena.ne.jp/api/csp_report
P3P: CP="OTI CUR OUR BUS STA"
X-Cache-Only-Varnish: 1
X-Content-Type-Options: nosniff
X-Dispatch: Hatena::Epic::Web::Blogs::Index#index
X-Frame-Options: DENY
X-Page-Cache: hit
X-Revision: bfbec940d94e11790280484f3b97149a
X-XSS-Protection: 1
X-Runtime: 0.047087
X-Varnish: 432949723
Age: 0
Via: 1.1 varnish-v4
X-Cache: MISS
Cache-Control: private

もう一度これを見てみましょう。よくある、Strict-Transport-Security ヘッダがついていないですね。もしかするとはてなブログの前段はみんな同じロードバランサーを経由しているのかもしれませんね。もしこれを設定してしまうと全はてなブログに対してSSLでアクセス行ってしまいますからねw

結構いろんなドメインでいろんなサイトをホスティングしている影響がこんなところに出ているのかなと思います。

ということで特筆して何かしているわけではなく、ただただHTTP over SSLが使えるようになったと考えるといいかなと思います。

Mixed Content を潰す

SSL化すると http で利用しているCSS、JS、画像などが含まれていると mixed contentという警告が出てしまいます。なるべく潰すために片っ端から潰します。 基本的に http から https へ書き換えるだけで大丈夫です。

ただ、今使っているテンプレートの一部にhttpが残っているようでどうやって潰すか考えています。何かいい方法を思いついたら投稿します。

何か致命的にヤバイところを見つけましたらTwitterか、コメント欄で教えてもらえると助かります。

最後に

ひとまずはてなブログがSSL化されて良かったです。ただ、個人的にはブログを書くのにいちいちMarkdownを書いてプレビューみて確認っていうのはもう面倒極まりないことで可能であればDropbox Paperのような雰囲気で書けると非常に重宝するなと言う気持ちなので早くそういうのに対応してほしいです。 ひとまずMediumにある技術ネタはこちらに移動して、Mediumの方はオタク旅行記などジャンルを変えていこうかなと思います。

medium.com