目次
目次
この記事は、Framer を学ぶ国内ユーザーが日本語資料の不足で感じる困難を解決するために、公式ブログの内容を日本語に翻訳し、実務で役立つ情報を追加しました。Framer を使用する皆様に少しでもお役に立てれば幸いです。
Content Security Policyとは何ですか？
CSPは、サイトで許可されるリソースを制限することでクロスサイトスクリプティング（XSS）攻撃を防ぐのに役立ちます。Framer サイトは基本的に安全に設計されており、CSPは追加の保護層の役割を果たします。特にタグマネージャーを通じて挿入されるトラッキングスクリプトのような信頼できないサードパーティのコードをカスタムHTMLやカスタムコードコンポーネントを通じて追加する場合、CSPが役立つことがあります。
Framer サイトは基本的に安全に構成されていますが、以下のような場合にはCSPを適用すると、万一の悪意のあるコードの実行可能性を大幅に減らすことができます。
Google Tag Manager などのサードパーティのトラッキングスクリプトを追加する時
外部ライブラリやウィジェットをカスタムコードで挿入する時
メタタグを通じたCSPの追加
CSPはカスタムコードを利用して<head>タグの先頭にメタタグ（meta tag）として追加できます。
Framer ページ設定>カスタムコードに移動
<head>の先頭にCSPメタタグを挿入メタタグの後にすべての追加スクリプトを配置
注意事項
必ずCSPメタタグの後に他のスクリプトを挿入してください。そうしないとポリシーが適用されなかったり、サイトが正常に機能しなくなる可能性があります。
例のスクリーンショットにあるコードは使用しないでください。サイトが破損する可能性があります。
必要に応じてReport URIなどのツールを使用して、サイトに適したCSPを生成することができます。
メタタグ vs HTTPヘッダーパフォーマンス比較
CSPはメタタグ方式とHTTPヘッダー方式で設定できます。ただし、両者にはパフォーマンスの違いがあります。
方式 | 利点 | 欠点 |
|---|---|---|
メタタグ | タグを通じて簡単にCSPを追加でき、原理はHTTPヘッダー方式と類似 | Chromeでのパフォーマンス低下の可能性 |
HTTPヘッダー | 優れたパフォーマンス、ブラウザーのサポート範囲が広い | リバースプロキシの設定が必要で、Framer単独では不可 |
この記事は、Framer公式ブログの「How to add a content security policy」を翻訳・改編したコンテンツです。
