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

関連記事

Laravel Address already in use の原因

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

AWS 504 Gateway Timeout エラー対応

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

AWS EC2 の amazon-linux-extras の話

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

AWS CloudWatch ログ監視で Lambda 処理

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

デプロイツール Capistrano

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

AWS Elastic Beanstalk php.ini 設定変更

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

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

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

AWS Elastic Beanstalk 環境設定

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

Amazon DynamoDB 制限調査

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

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

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

Shell と Bash のいろいろ

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

Centos7 Webserver 構築の時のメモ

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

AWS Unresolved resource dependencies [AWSEBV2LoadBalancer] エラー

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

crontab 設定いろいろ

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

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

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

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

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

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

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

Windows10 Home に Docker 入れた時のメモ

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

Docker の基本的な使い方

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

Docker Supervisor 使ってバッチ処理

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

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

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

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

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

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

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

Nginx 基本設定

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

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

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

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

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

積水ハウス 個人情報流出 SQL インジェクション攻撃か

積水ハウスの会員制サイトが攻撃を受け、顧客と従業員情報などが流出と公表した。...

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

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

Mac ターミナル SSH 接続設定

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

Vim 操作とショートカット

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

robots.txt の書き方

robots.txtの書き方、よく使う例などrobots.txtの遊び方について...

5 分で VPN サーバー立てる! wg-easy の使い方

自前のVPNサーバー構築して、地域制限を回避してYoutubeみたり、セキュア通信したりできるように...

Windows Mac Linux hosts ファイル場所

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

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

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

XZ Utils 事件対応

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

oh my zsh 使うべし

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

xserver に vim インストール

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

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

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

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

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

よく使う WSL コマンド

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

ZeroSSL で無料 SSL できるけど Let's Encrypt と比較

SSL無料証明書はLets Encrypt以外にZeroSSLも一つの選択として存在します。...

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

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

xserver に nodejs インストール

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