# content-security-policy 設定

Content-Security-Policy (コンテンツセキュリティポリシー) とは

Content-Security-Policy の略は CSP でクロスサイトスクリプティング XSS など攻撃を防ぐために、広くサポートされているウェブ セキュリティポリシーです。

Netlify など CSP の設定があるサーバーへデプロイする場合、ローカルではうまく表示するけどサーバーへデプロイしたらコンソールからエラーでたり、スクリプトが読み込みできなくてページ表示できなかったりします。
実際のトラブルから SNS のボタンが表示されない (opens new window)Refused to frame error (opens new window)
adsense content security policy error (opens new window) などがよく出ます。
攻撃からサイトを守るために CSP が大事ですが、理解しなければ意味がないより HP 運営に支障がでます。

# CSP Syntax 構文書き方

To enforce the default-src directive, the user agent MUST enforce the following directives:

W3C org default-src (opens new window)

# 構文フォーマット

Content-Security-Policy: <directive>: <value>; <directive>: <value>

Content-Security-Policy: default-src 'self' *.example.com;
                         connect-src 'none';
Content-Security-Policy: connect-src *.example.com;
                         script-src *.example.com

Content-Security-Policy:からスタートしてルール中身色々設定できます。
まずは default-src というディレクティブ 設定してから以下のディレクティブを設定したほうがいいでしょう

# ソース value の種類

# host-source ホストソース

名前または IP アドレス、およびオプションの URL スキームやポート番号によるインターネットホスト

  • *.example.com
  • http://*.example.com
  • https://*.example.com

# scheme-source スキーマソース

  • 'self' 同一オリジン
  • 'unsafe-eval' 安全でないイーバル
  • 'unsafe-hashes' 安全でないハッシュ
  • 'unsafe-inline' 安全でないインライン
  • 'none' 許可なし

# nonce-<base64-value> 暗号ナンス

# <hash-algorithm>-<base64-value> sha256、sha384、または sha512 ハッシュロジック

スキーマソースはシングルクォーテーションで囲む必要があります

# default-src

デフォルトソースとは別のディレクティブに対する代替として設定ができます。default-src が none(すべての読み込み禁止)の場合でも child-src などの子ソースに設定すれば、個別指定で許可することができます。
子ソースの使用は default-src があることが前提ですが、特に設定がなければ、default-src にある設定を基準に判断します。

同一オリジンのみから読み込み許可する場合

Content-Security-Policy: default-src 'self';

child-src ディレクティブは、 frame iframe などの要素を使用して読み込まれる Web ワーカーとネストされたブラウジングコンテキストの有効なソースを定義します。指定がなければ、default-src に従います。

Content-Security-Policy: default-src 'self'; script-src *.google.com *.hapicode.com;
Refused to load the script 'https://xml.affiliate.rakuten.co.jp/widget/js/rakuten_widget.js' because it violates the following Content Security Policy directive...

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' *.hotjar.com *.googleapis.com *.googleadservices.com *.googletagservices.com *.google.co.jp *.google.com *.googlesyndication.com *.fontawesome.com *.google-analytics.com *.doubleclick.net *.google.com".

Refused to frame 'https://pagead2.googlesyndication.com/' because it violates the following Content Security Policy directive: "frame-src cm.g.doubleclick.net googleads.g.doubleclick.net www.google.com accounts.google.com pagead2.googlesyndication.com/pagead/s/cookie_push.html gmsg: https://tpc.googlesyndication.com/pagead/gadgets/in_page_full_auto_V1/Responsive_Monte_GpaSingleIframe.html".

# netlify _headers ファイル Content-Security-Policy 設定

_headers

  X-Frame-Options: SAMEORIGIN
  X-Content-Type-Options: nosniff
  Content-Security-Policy: default-src 'self' *.codepen.io *.hotjar.com *.googleapis.com *.googleadservices.com https://*.googlesyndication.com *.googlesyndication.com *.fontawesome.com *.doubleclick.net *.google-analytics.com *.rakuten.co.jp;
                           script-src 'self' 'unsafe-inline';
                           img-src 'self' *;
                           style-src 'self' 'unsafe-inline';

# CSP で Google タグ マネージャー 有効化

script-src: 'unsafe-inline' https://www.googletagmanager.com
img-src: www.googletagmanager.com
2021-09-03
  • server

関連記事

積水ハウス 個人情報流出 SQL インジェクション攻撃か
ZeroSSL で無料 SSL できるけど Let's Encrypt と比較
ジェネレーティブ AI と大規模言語モデル(LLM)を学ぶためのリソース
XZ Utils 事件対応
Ubuntu で Web サーバーを構築する手順
メールサーバー移行と POP & IMAP 設定
Docker Supervisor 使ってバッチ処理
よく使う WSL コマンド
自宅サーバー構築!  Nextcloud で NAS クラウドストレージ
no such file or directory: /usr/share/zsh/vendor-completions/_docker
oh my zsh 使うべし
AWS CloudWatch ログ監視で Lambda 処理
AWS SES メール開封確認  DB に集計
Vim 操作とショートカット
DDNS 無料ダイナミック DNS サービス 4 つ
Nginx 基本設定
SPF メール送信なりすまし対策
Windows Mac Linux hosts ファイル場所
AWS Unresolved resource dependencies [AWSEBV2LoadBalancer] エラー
ディスク容量を確認する df コマンド
Laravel Address already in use の原因
AWS Elastic Beanstalk php.ini 設定変更
AWS Elastic Beanstalk 環境設定
AWS のタイムゾーンを UTC 協定世界時から JST 日本標準時に変更
Docker の基本的な使い方
Amazon DynamoDB 制限調査
AWS 504 Gateway Timeout エラー対応
Shell と Bash のいろいろ
Mac ターミナル SSH 接続設定
Elastic Beanstalk \$\SERVER['REMOTEADDR'] 取得できない
crontab 設定いろいろ
AWS EC2 の amazon-linux-extras の話
デプロイツール Capistrano
解決! xserver php バージョンアップした時に ssh 環境に反映されない
youtube 見れるように vpn サーバー建ててみた
xserver に vim インストール
xserver に nodejs インストール
レンタルサーバーなら xserver おすすめ理由
Docker command でドッカー練習する時のメモ
Windows10 Home に Docker 入れた時のメモ
Centos7 Webserver 構築の時のメモ