2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

CloudFrontの地理的制限とカスタムエラーページを検証する

Posted at

地理的制限とは

CloudFrontの地理的制限を利用することで、所定の地域からのIPアドレスを許可したりブロックしたりすることができます。

例えばこのようにアメリカのみに制限してみます。

{5DB2ECAB-E045-4E79-BEA6-90E21F38D16E}.tmp.png

すると、日本のプロバイダを通してインターネットへアクセスしている私からは、このCloudFrontディストリビューションで配信しているサイトにアクセスできず403エラーが返ります。

{5DB2ECAB-E045-4E79-BEA6-90E21F38D16E}.tmp.png

ですが、バージニア北部(us-east-1)リージョンでCloudShellを起動してcurlしてみるとコンテンツが返却されます。

{5DB2ECAB-E045-4E79-BEA6-90E21F38D16E}.tmp.png

とまあこのようにIPの属する地域に応じてアクセス制限をかけることができます。
もちろんプロキシサーバー等を使えば本当のアクセス元のユーザー所在地は偽装できてしまいますが。

ただし、リージョンごとにばらつきもあるそうで、全体的な正確性は「99.8%」とのことですので完全に制御できるわけではないことは留意が必要です。

エラーページのカスタマイズ

デフォルトの403ページだと色気がないのでカスタマイズしてみます。
これは地理的制限を関係なくCloudFrontの機能です。

403.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>403</title>
</head>
<body>
<h1>アクセスが制限されています</h1>
</body>
</html>

上記のHTMLファイルをオリジンにおいて、カスタムエラーレスポンスを設定します。

{5DB2ECAB-E045-4E79-BEA6-90E21F38D16E}.tmp.png

{5DB2ECAB-E045-4E79-BEA6-90E21F38D16E}.tmp.png

先ほどと同じようにアクセスするとHTMLファイルの内容が表示されるようになりました。

注意点としてエラーページは単一のファイルしか返せないので、

403.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>403_plus_image</title>
</head>
<body>
<h1>アクセスが制限されています</h1>
<img src="computer_sagi_error.png"alt="画像です" />
</body>
</html>

こんな感じで例えば同一ドメインにある画像を埋め込もうとしても、そのリクエストは403で返ってしまうのでうまく行きません。

{5DB2ECAB-E045-4E79-BEA6-90E21F38D16E}.tmp.png

エラーページにCSSや画像を入れたい場合は、外部のサイトから読み込むか、syleタグやsvgを使ってHTML内に文字列情報として埋め込む必要がありますね。

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?