WAF+CloudFront でリファラチェック (直リンク禁止)
概要
AWS WAF (Web Application Firewall) を利用し Cloudfront でのリファラ制御を実装しましたのでそのまとめです。
直リンク禁止対策として導入しました。
以下手順になります。
Go to AWS WAF ボタンクリック
サービス > WAF & Shield と辿り Go to AWS WAF クリック

Configure Web ACL ボタンクリック
ACL (Access Control List) を設定していきます。

概要確認
特にチェックせず Next ボタンクリック

web ACL 設定

以下、設定項目を設定し、Next ボタンクリック
Item | Value |
---|---|
Web ACL name | (任意) 例では Cloudfront の CNAME を設定しています。 |
CloudWatch metric name | Web ACL name を入力すると自動で入力される。変更したい場合のみ変更 |
Region | Global(CloudFront) 選択 |
AWS resource to associate | 対象となる Cloudfront を選択する箇所。運用中の Cloudfront を対象とすると場合は後々設定。 |
条件作成
今回は文字列一致を条件とする為、 String match conditions にて Create condition
ボタンクリック

string match condition 作成

以下設定し Add filter
ボタンクリック。
複数 filter がある場合、Add filter を繰り返します。
Item | Value |
---|---|
Name | (任意) |
Part of the request to filter on | Header |
Header | Referer |
Match type | Contains |
Transformation | Convert to lowercase |
Value to match | 対象となるドメイン設定 |
Add filter
後、 Create
ボタンクリック。

Next ボタンクリック
追加したもののすぐに反映されていない。
そのまま Next
ボタンクリック

ルール作成
Create rule
ボタンクリック。

ルールに条件を紐付け
Name, Cloudwatch metric name を設定し
Add conditions で条件を追加します。
その後、Create
ボタンクリック。

ルール以外のリクエストのアクセス禁止
やはり Rule は反映されていない。ですが、続けてBlock all requests that don't match any rules
をチェックし Review and create
ボタンクリック。
※対象の Cloudfront に反映させたくない場合は、Cloudfront を選択したリソースを解除する必要があります。
※最後に関連付けができるのでここではするべきではないと思います。

確認ページで入力内容確認後作成
Confirm and create
ボタンクリック。

対象の web ACL を編集
WEB ACLs より選択し Edit web ACL
ボタンクリック

web ACL 編集
- 作成したルールを選択
Add rule to web ACL
ボタンクリック- Allow 選択
Update
ボタンクリック
[f:id:kenzo0107:20171005183720p:plain]
Cloudfront 関連付け
Add association
ボタンクリック

Web ACL に Cloudfront を関連付け
Resource で 対象の Cloudfront を選択し Add
ボタンクリック

以上で数分後 WAF+CloudFront によるリファラチェックが確認できる状態になります。
アクセス確認
自環境では
ローカルの /etc/hosts 修正し対象ドメインから Cloudfront CNAME へのリンクを貼って確認しました。
Cloudfront CNAME ドメインでのリソースを直接アクセスすると
以下の様な エラーページが表示されることが確認できました。

もう少しユーザフレンドリーに
上記のエラーページは Cloudfront > Error Pages で Create Custom Error Response
で S3 上のパスを指定することでカスタマイズが可能です。
是非サイトコンセプトに合ったエラーページをご用意されるとよりユーザフレンドリーな配信になるかと思います。
以上
ご参考になれば幸いです。