# 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
レンタルサーバー エックスサーバー レンタルサーバー エックスサーバー DMM fx DMM fx 開発/運用エンジニア募集プログラム 開発/運用エンジニア募集プログラム 外為ジャパンFX 新規口座開設促進 外為ジャパンFX 新規口座開設促進 eBay公式ショッピングサイト Qoo10 eBay公式ショッピングサイト Qoo10 Amazon.co.jpのカテゴリごとのページ

関連記事

AWS 504 Gateway Timeout エラー対応
Laravel Address already in use の原因
AWS EC2 の amazon-linux-extras の話
Amazon DynamoDB 制限調査
デプロイツール Capistrano
AWS Elastic Beanstalk php.ini 設定変更
Elastic Beanstalk \$\SERVER['REMOTEADDR'] 取得できない
AWS のタイムゾーンを UTC 協定世界時から JST 日本標準時に変更
AWS Elastic Beanstalk 環境設定
Shell と Bash のいろいろ
crontab 設定いろいろ
Mac ターミナル SSH 接続設定
解決! xserver php バージョンアップした時に ssh 環境に反映されない
xserver に nodejs インストール
Centos7 Webserver 構築の時のメモ
xserver に vim インストール
レンタルサーバーなら xserver おすすめ理由
youtube 見れるように vpn サーバー建ててみた