Apache、Nginx、WordPress で CSP フレーム祖先を実装するにはどうすればよいですか?

CSP (コンテンツ セキュリティ ポリシー) ヘッダーを実装して、Web サイトをクリック ジャッキング攻撃から保護します。

CSP は、OWASP のトップ 10 セキュア ヘッダーの 1 つであり、セキュリティの専門家やツールによって CSP の実装が推奨されることがよくあります。 Web リソースの公開方法を強制するポリシーを構築するには、多くのオプションがあります。

CSP バージョン 2 で導入された frame-ancestors と呼ばれるディレクティブの 1 つは、X-Frame-Options ヘッダーと比較して柔軟性が高くなります。 frame-ancestors X-Frame-Options と同じように機能し、iframe、frame、object、embed、および applet 要素を使用して埋め込まれるリソースを許可または禁止します。

CSP がすべての主要ブラウザと完全に互換性を持つようになった近い将来、X-Frame-Options は廃止されると思います。私が書いているように、 CSP フレーム祖先は、 IE を除くすべてのブラウザーの最新バージョンで動作します。

Microsoft がいつ IE のサポートを許可するかわかりません。ブラウザの互換性は、 Can I Use サイト でいつでも確認できます。

次の実装手順を見てみましょう。

アパッチHTTP

mod_headers Apache にヘッダーを挿入するための前提条件です。 OS とバージョンによって異なりますが、Ubuntu と Apache 2.4 を使用している場合は、 a2enmod headers 使用して有効にすることができます。

 root@:/etc/apache2# a2enmod headers
Enabling module headers.
To activate the new configuration, you need to run:
  systemctl restart apache2
root@:/etc/apache2# systemctl restart apache2
root@:/etc/apache2#

注 : httpd.conf ファイルまたは使用している有効な構成ファイルで実行できるすべての構成。

全員から拒否

X-Frame-Options DENY に似ています。どのサイト (自分自身も含む) を埋め込みたくない場合は、以下を追加します。

 Header set Content-Security-Policy "frame-ancestors 'none';"

ファイルを保存し、Apache HTTP を再起動して有効にします。

サイトを埋め込もうとしましたが、ご覧のとおりブロックされていました。

自分からは許可するが他人は拒否する

X-Frame-Options SAMEORIGIN と同様に、以下を追加できます。

 Header set Content-Security-Policy "frame-ancestors 'self';"

自分自身および複数のドメインからの許可

X-Frame-Options には、複数のドメインからのアクセスを許可するオプションがありませんでした。 CSP のおかげで、以下のことが可能になります。

 Header set Content-Security-Policy "frame-ancestors 'self' '.com' 'gf.dev' '.dev';"

上記により、self、.com、gf.dev、.dev からコンテンツを埋め込むことができるようになります。これらのドメインを自分のドメインに変更してください。

Nginx

概念とディレクティブは、ヘッダーを追加する方法を除いて、上記の「Apache HTTP」セクションで説明したものと同じです。 Nginx のヘッダーは、対応する構成ファイルの server ブロックの下に追加する必要があります。

すべて拒否する

add_header Content-Security-Policy "frame-ancestors 'none';";

自分以外はすべて否定する

add_header Content-Security-Policy "frame-ancestors 'self';";

複数のドメインからの許可

add_header Content-Security-Policy "frame-ancestors 'yoursite.com' 'example.com';";

上記の例では、yoursite.com と example.come にコンテンツを埋め込むことができます。変更を加えた後は、Nginx サーバーを再起動してポリシーをテストすることを忘れないでください。

ワードプレス

それはWordPressをどのようにホストしているかによって異なります。

クラウドや VPS のように自己ホスト型の場合は、Apache や Nginx などの Web サーバーを使用している可能性があります。その場合は、上記の手順に従って、WordPress の代わりに Web サーバーに実装できます。ただし、共有ホスティングを使用している場合、または Web サーバーを変更するアクセス権がない場合は、プラグインを利用できます。

WordPress に CSP を実装するには、 Content Security Policy Pro プラグイン を使用できます。

検証

実装が完了したら、ブラウザーに組み込まれた開発者ツールまたはセキュア ヘッダー テスト ツールを使用できます。

結論

CSP は、Web の脆弱性を防ぐための強力で安全なヘッダーの 1 つです。上記の手順が、Apache と Nginx でフレーム祖先を実装する方法を理解していただければ幸いです。