シャッフル主任の進捗報告

興味のあるものを作ります。進捗を不定期にご報告します。

そうだ、教祖になろう。出エジプト記 第1章2節 CloudFrontでサイトをHTTPS化する

ブログ開くともう 7日たつなぁって


前回の第1章1節 S3で静的WebページをホスティングするではWebサイト構築の手始めとして静的Webページを作りました。
あれは創世記第3章の前に書き溜めておいたやつなので、実は構築からすでに1週間たっています。
サイトを公開したあとS3の設定ページを見て私はこんなことを言いました。

ほわっほわっほわっほわわわわ~ん
(回想シーンに入る音)

f:id:chief-shuffle:20191116142224j:plain 「パブリック」のオレンジ色が緊張感をあおります。
主が我らを見ておられます。
世界中の悪意のある攻撃者も我らを見ておられます。

(回想シーン終わり)

では、実際1週間でどれだけの閲覧があったか見てみましょう。

f:id:chief-shuffle:20191123155856j:plain

1週間で480ものリクエストがありました。

 

 

「うわっ…私の主多すぎ…?」

これはこのWebサイトがバズったからでも、神がご覧になられているからでもありません。
どこかにS3のエンドポイントにランダムアタックする人がいるということです。
ぞわぞわしますね。
弊教団も令和時代の新興宗教としてセキュリティを考えていかないといけません。

昔の名前で出ています


シンプルなWebはHTTPというプロトコルで通信しています。
プロトコルとは、通信相手とあらかじめ取り決めておいた通信の方式やフォーマットです。
Webの場合、クライアントとサーバは同じプロトコルを共有して、それを守りながら通信することになります。

HTTPのプロトコルは誰でも知ることができるので通信を改ざんされてしまう恐れがあります。
この対策として通信内容を暗号化してリクエストを送るよう拡張したプロトコルHTTPSです。
多くのショッピングサイトではこっちが採用されています。

f:id:chief-shuffle:20191124093621p:plain

今回はサイトへのアクセスをHTTPSに変更していきましょう。
AWSのCloudFrontというサービスをかまします。
つまり、こういう構成です。

f:id:chief-shuffle:20191124094056p:plain

なお、CloudFrontはあとでやるAPI Gatewayとの連携にも必要になります。

今回はこちらのサイトを参考にさせていただきました。

www.wakuwakubank.com

CloudFrontの前にS3のバケットポリシーを削除しておきます。
このあとの手順で自動で設定されるからです。

f:id:chief-shuffle:20191127073956j:plain

ではAWSでCloudFrontを検索します。

f:id:chief-shuffle:20191123163313j:plain

「Create Distribution」をクリック。

f:id:chief-shuffle:20191127074025j:plain

Webの「Get Started」をクリック。

f:id:chief-shuffle:20191127074058j:plain

設定を入力。
「Origin Domain Name」で前回構築したS3を選択
※ここでエンドポイントを張りつけちゃうとあとあとOAIの設定がうまくいかないので注意です。

f:id:chief-shuffle:20191127074301j:plain

「Origin ID」が勝手に入ります。
S3へのアクセスをCloudFrontからにするため、「Restricted Bucket Access」で「Yes」を選択。
認証情報OAIを作成するため、「Origin Access Identity」を「Create a New Identity」にして「Comment」を入力。
OAIからのアクセスのみ許可するようS3のバケットポリシーを変更するため、「Grant Read Permissions on Bucket」を「Yes, Update Bucket Policy」にします。

f:id:chief-shuffle:20191127074326j:plain

HTTPはHTTPSに転送したいので「Vierwer Protocol Policy」で「Redirect HTTP to HTTPS」を選択。

f:id:chief-shuffle:20191127074556j:plain

それ以外の項目はデフォルトです。
通信負荷を減らすためのコンテンツのキャッシュ期間もいじれるようですね。
一番下の「Create Distribution」をクリック。

f:id:chief-shuffle:20191127074612j:plain

左のメニューの「Distributions」から一覧に戻るとデプロイが開始されています。

f:id:chief-shuffle:20191127074852j:plain

「Status」が「In Progress」から「Deployed」になるのをブログを書きながら待ちます。
10分くらいかかりました。

「Domain Name」をコピーしてブラウザのアドレスバーに貼り付けます。

f:id:chief-shuffle:20191127075017j:plain

怒られてしまいますが、慌てないでください。
アドレスバーの末尾に/index.htmlを入力します。

f:id:chief-shuffle:20191127075214j:plain

HTTPSでアクセスできているのが確認できます。

アドレスバー直打ちでhttps://http://でアクセスしようとしても、ちゃんとhttps://にリダイレクトされます。

いちいち/index.htmlを入力しなくてもいいように設定を変えてみます。
CloudFrontの「Distribution Settings」をクリック。

f:id:chief-shuffle:20191127074852j:plain

「General」タブの「Edit」をクリック。
「Defalut Root Object」に「index.html」を入力。

さきほどのURLの/index.htmlなしでもアクセスできることを確認できます。

f:id:chief-shuffle:20191127075719j:plain

二人で名前消して


さて、S3からのアクセスの方はどうなったでしょうか。
先ほど「Create a New Identity」を選択したので、自動で制限が加えられているはずです。

S3のバケットポリシーを確認すると CloudFrontのOAIからのアクセス許可が設定されています。

f:id:chief-shuffle:20191127080105j:plain

エンドポイントにアクセスすると、

f:id:chief-shuffle:20191127080202j:plain

うん、ちゃんとアクセスがブロックされています。

これでリクエストをHTTPS化できました。
別にこれでセキュリティリスクがすべてなくなったわけではないのですが、まずはひと安心です。
他の対策は今後徐々にやっていきます。

次は何しましょうかね。