## 目次

1. イントロダクション

2. S3とCloudFrontの基本設定

3. CSP（コンテンツセキュリティポリシー）とは

4. エラーの例と一般的な原因

5. CSPエラーの対処方法

   - 5-1. 正しいヘッダー設定

   - 5-2. ワイルドカードの使用

   - 5-3. 特定のソースを許可

6. ポリシー設定のテストと検証

7. CloudFrontでの最適な練習

8. まとめ

## 1. イントロダクション

Amazon S3を利用した静的ウェブサイトのホスティングは、パフォーマンスに優れたCloudFrontと組み合わせることで非常に効果的ですが、正しい設定が重要です。特にCSP（コンテンツセキュリティポリシー）の誤設定は、サイトの動作に悪影響を与えることがあります。

## 2. S3とCloudFrontの基本設定

AWSで静的ウェブサイトをホスティングする際、S3バケットにホスティング用のファイルを配置し、CloudFrontを介して配信します。S3とCloudFrontを適切に統合することで、キャッシュによる高速配送を実現します。

## 3. CSP（コンテンツセキュリティポリシー）とは

CSPは、ブラウザが読み込むことを許可されているリソースの範囲を指定するセキュリティ機能です。これにより、XSS攻撃などを防ぐことができます。設定を間違えると、サイトのリソースが正しくロードされないことがあります。

## 4. エラーの例と一般的な原因

CSPエラーが発生する主な原因は、不適切なヘッダー設定です。たとえば、外部のJavaScriptやスタイルシートのロードが妨げられることがあります。具体例として、以下のようなエラーメッセージが表示されることがあります。

![img](/mosaic-code.jpg)

## 5. CSPエラーの対処方法

### 5-1. 正しいヘッダー設定

CloudFrontの「レスポンスヘッダー設定」でCSPを正しく定義することが重要です。以下のようにS3またはCloudFrontの設定でCSPポリシーを調整します。

![img](/mosaic-code.jpg)

### 5-2. ワイルドカードの使用

一部のケースでは、ワイルドカード（*）を使用することもできます。ただし、これを利用することでセキュリティリスクが上がるため、注意が必要です。

### 5-3. 特定のソースを許可

特定の外部リソースを許可する場合は、信頼できるソースを個別に追加します。

![img](/mosaic-code.jpg)

## 6. ポリシー設定のテストと検証

ポリシーを設定したら、ブラウザの開発者ツールを用いてエラーがないか確認します。特にChromeやFirefoxのコンソールタブで詳細なエラーメッセージを確認することができます。

## 7. CloudFrontでの最適な練習

CloudFrontの設定で、オリジンキャッシュ設定やHTTPSオプション、CORS（Cross-Origin Resource Sharing）ポリシーに十分注意してください。

## 8. まとめ

CloudFrontとS3を利用した静的ホスティングでは、適切なCSP設定が不可欠です。ポリシー設定の細部を確認し、継続的にテストを行うことで、安全かつ機能的なウェブサイトを運営することが可能です。

## 目次

1. イントロダクション

2. S3とCloudFrontの基本設定

3. CSP（コンテンツセキュリティポリシー）とは

4. エラーの例と一般的な原因

5. CSPエラーの対処方法

   - 5-1. 正しいヘッダー設定

   - 5-2. ワイルドカードの使用

   - 5-3. 特定のソースを許可

6. ポリシー設定のテストと検証

7. CloudFrontでの最適な練習

8. まとめ

## 1. イントロダクション

Amazon S3を利用した静的ウェブサイトのホスティングは、パフォーマンスに優れたCloudFrontと組み合わせることで非常に効果的ですが、正しい設定が重要です。特にCSP（コンテンツセキュリティポリシー）の誤設定は、サイトの動作に悪影響を与えることがあります。

## 2. S3とCloudFrontの基本設定

AWSで静的ウェブサイトをホスティングする際、S3バケットにホスティング用のファイルを配置し、CloudFrontを介して配信します。S3とCloudFrontを適切に統合することで、キャッシュによる高速配送を実現します。

## 3. CSP（コンテンツセキュリティポリシー）とは

CSPは、ブラウザが読み込むことを許可されているリソースの範囲を指定するセキュリティ機能です。これにより、XSS攻撃などを防ぐことができます。設定を間違えると、サイトのリソースが正しくロードされないことがあります。

## 4. エラーの例と一般的な原因

CSPエラーが発生する主な原因は、不適切なヘッダー設定です。たとえば、外部のJavaScriptやスタイルシートのロードが妨げられることがあります。具体例として、以下のようなエラーメッセージが表示されることがあります。

```

Refused to load the script 'https://example.com/script.js' because it violates the following Content Security Policy directive: "script-src 'self'".

```

## 5. CSPエラーの対処方法

### 5-1. 正しいヘッダー設定

CloudFrontの「レスポンスヘッダー設定」でCSPを正しく定義することが重要です。以下のようにS3またはCloudFrontの設定でCSPポリシーを調整します。

```plaintext

Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline' https://trusted.cdn.com

```

### 5-2. ワイルドカードの使用

一部のケースでは、ワイルドカード（*）を使用することもできます。ただし、これを利用することでセキュリティリスクが上がるため、注意が必要です。

### 5-3. 特定のソースを許可

特定の外部リソースを許可する場合は、信頼できるソースを個別に追加します。

```plaintext

script-src 'self' https://apis.google.com

```

## 6. ポリシー設定のテストと検証

ポリシーを設定したら、ブラウザの開発者ツールを用いてエラーがないか確認します。特にChromeやFirefoxのコンソールタブで詳細なエラーメッセージを確認することができます。

## 7. CloudFrontでの最適な練習

CloudFrontの設定で、オリジンキャッシュ設定やHTTPSオプション、CORS（Cross-Origin Resource Sharing）ポリシーに十分注意してください。

## 8. まとめ

CloudFrontとS3を利用した静的ホスティングでは、適切なCSP設定が不可欠です。ポリシー設定の細部を確認し、継続的にテストを行うことで、安全かつ機能的なウェブサイトを運営することが可能です。

目次

続きを読むには単価診断を受けてください（30秒）