WordPress で Content Security Policy を設定してみた

最終的にNginxで以下のヘッダを設定した。

add_header Content-Security-Policy "default-src 'none'; script-src 'self' 'unsafe-inline' 'unsafe-eval' pagead2.googlesyndication.com googleads.g.doubleclick.net www.google.co.jp apis.google.com www.google-analytics.com adservice.google.co.jp adservice.google.com www.googletagservices.com platform.twitter.com uh.nakanohito.jp cdn.syndication.twimg.com tpc.googlesyndication.com; font-src 'self' fonts.googleapis.com fonts.gstatic.com data:; style-src 'self' 'unsafe-inline' fonts.googleapis.com ajax.googleapis.com platform.twitter.com ton.twimg.com; img-src * data:; child-src www.google.com apis.google.com accounts.google.com googleads.g.doubleclick.net; object-src 'self' pagead2.googlesyndication.com; media-src 'self' pagead2.googlesyndication.com; connect-src 'self' pagead2.googlesyndication.com googleads.g.doubleclick.net uh0.nakanohito.jp; frame-ancestors 'self' googleads.g.doubleclick.net platform.twitter.com syndication.twitter.com www.youtube.com; frame-src 'self' googleads.g.doubleclick.net platform.twitter.com syndication.twitter.com www.youtube.com hatenablog-parts.com; base-uri 'self'; form-action 'self' platform.twitter.com syndication.twitter.com; report-uri https://{subdomain}.report-uri.com/r/d/csp/wizard";

設定で苦労したこと

プラグインで対処しようとしたがうまくいかなかった

HTTP headers to improve web site securityというプラグインに[CSP options]タブがあったがreport-uriの設定方法が見つけられなかった。

report-uriの書き方に苦労した

Report URIに登録して、Content Security Policyにreport-uriの書き方があるため、まずは以下を設定した。

add_header "Content-Security-Policy-Report-Only" "default-src 'none'; form-action 'none'; frame-ancestors 'none'; report-uri https://{subdomain}.report-uri.com/r/d/csp/wizard"

{subdomain}.report-uri.com部分については、アカウントごとに異なるため[Setup]タブを確認する。

あとはReport URIのサイトやChromeなどブラウザのデベロッパーツールでエラーを対処していく。

Content-Security-Policyヘッダの書き方

細かい書き方などは、以下2記事を参考にした。
Content Security PolicyをWordPressに対応する方法
Nginx設定の肝

その他参考情報

Security Headers:セキュリティ関連ヘッダチェックツール
Observatory:セキュリティチェックツール

メニューを閉じる