Hapicode

# 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

関連記事

ジェネレーティブ AI と大規模言語モデル（LLM）を学ぶためのリソース

ChatGPTに惹かれてLLM勉強をはじめました。第１歩英語記事を日本語に翻訳して資料を集める編...

XZ Utils 事件対応

バックドアを利用してssh経由でリモートから侵入する悪意がある XZ Utils メンテナンスについ...

Ubuntu で Web サーバーを構築する手順

UbuntuでWebサーバーを構築する手順についてのメモ...

メールサーバー移行と POP & IMAP 設定

メールサーバーを別のサーバーへ引っ越し作業があったので、資料まとめました。...

Docker Supervisor 使ってバッチ処理

Amazon ECS Dockerfile に Supervisor でプロセス管理します。Lara...

よく使う WSL コマンド

Windows WSL インストールして本物のLinux環境をWindowsで楽しめる Ubuntu...

自宅サーバー構築！　 Nextcloud で NAS クラウドストレージ

NAS 自宅ストレージサーバーをNextcloudで自作するまで、大容量で安全安心のローカルマシンに...

no such file or directory: /usr/share/zsh/vendor-completions/_docker

wslのUbuntuにzshインストールして使ってますが、突然にwarning errorになったた...

oh my zsh 使うべし

カラフルでコマンドがわかりやすいzshが使いやすいので、zshとoh my zshのインストールにつ...

AWS CloudWatch ログ監視で Lambda 処理

Cloudwatch ログ監視して Lambda 処理でチャットワーク送信したり、カスタマイズ処理を...

AWS SES メール開封確認　 DB に集計

メール送信の開封確認して DB更新するために使う AWS サービス SES SNS LAMBDA と...

Vim 操作とショートカット

Linux OS なら Vim 知らない人はいないくらい高性能エディター Vim の各種コマンド シ...

DDNS 無料ダイナミック DNS サービス 4 つ

国内外にあるDDNS無料サービス4つについて調べました。制限の少ないDDNS Nowはいい評判な理由...

Nginx 基本設定

ウェブサーバーNginxの基本設定、バーチャルホスト、ベース認証、SSL設定について...

SPF メール送信なりすまし対策

メール送信なりすまし対策フィッシング詐欺対策に SPF レコードを追加して簡単に送信元IPアドレス認...

Windows Mac Linux hosts ファイル場所

windows hosts mac hosts と linux hostsファイル場所とhostsの...

AWS Unresolved resource dependencies [AWSEBV2LoadBalancer] エラー

aws ELBデプロイでUnresolved resource dependencies AWSEB...

ディスク容量を確認する df コマンド

サーバーのディスク容量確認する dfコマンドの使い方について dfコマンドの...

Laravel Address already in use の原因

laravel artisan serve したら Failed to listen on 127....

AWS Elastic Beanstalk php.ini 設定変更

configファイル使って aws php post_max_size upload_max_fil...

AWS Elastic Beanstalk 環境設定

amazon EB Elastic Beanstalkデフォルト設定と環境プロパティについて...

AWS のタイムゾーンを UTC 協定世界時から JST 日本標準時に変更

AWSの時間が９時間ずれる！UTCからAsia/Tokyo JSTに変更...

Docker の基本的な使い方

環境統一作業効率で使われるDockerfileなど、さくらナレッジの記事を読んで改めてDockerの...

Amazon DynamoDB 制限調査

AWS DynamoDB制限について調べたが、容量制限がアイテムあたり400KBでリクエスト制限もあ...

AWS 504 Gateway Timeout エラー対応

AWSロードバランサー利用して504エラー発生、504の原因と対応を調査してまとめました。...

Shell と Bash のいろいろ

ShellとBashの違いと歴史について学習しました。カラフルにBash使うためにGit Bash使...

Mac ターミナル SSH 接続設定

Mac SSH 接続方法とSSHの歴史、各種設定など。Macターミナルでssh接続は以外と便利で使い...

Elastic Beanstalk \$\SERVER['REMOTEADDR'] 取得できない

ELBで php ユーザーIP取得できなかったので、AWSのセキュリティとロードバランサーについて学...

crontab 設定いろいろ

crontabコマンドとオプションなどの細かい設定いろいろまとめ...

AWS EC2 の amazon-linux-extras の話

Amazon linux2 EC2 インスタンスのパッケージ管理ツール amazon-linux-e...

デプロイツール Capistrano

Capistrano とはデプロイ自動化ツール PHPプロジェクトをAWS Beanstalk に自...

解決! xserver php バージョンアップした時に ssh 環境に反映されない

xserverのphp5から7にアップした時にssh環境ではバージョン5のままでした。...

youtube 見れるように vpn サーバー建ててみた

自己研究用にCentOSにvpnサーバー建ててyoutube見ました。...

xserver に vim インストール

viから脱出してxserverのvim設定...

xserver に nodejs インストール

nodebrewツール使うと誰でもできるレンタルサーバー・エックスサーバーにnodejsインストール...

レンタルサーバーなら xserver おすすめ理由

レンタルサーバーのxserverの評価はどう？って思うエンジニアからみるxserverと愛用する理由...

Docker command でドッカー練習する時のメモ

docker使ってコンテナ操作イメージ操作など、秒単位でウェブサーバー立ち上げると気持ち爽快！doc...

Windows10 Home に Docker 入れた時のメモ

windows homeでもdocker使えます。windows proしかdocker入らないと思...

Centos7 Webserver 構築の時のメモ

centos7にphp apacheのウェブサーバー構築、リポジトリ作成してnginx nodejs...