対象
Webフォーム機能（オプション）契約者のうち、フォームの埋め込み先サイトでContent-Security-Policy（CSP）を設定・運用されている方
またはこれから上記の設定を検討されている方
Content-Security-Policy（CSP）とは
CSP（Content Security Policy）とは、ブラウザに対して「このページで読み込んでよいスクリプト・スタイル・通信先」を明示的に許可するセキュリティ設定です。
Webフォームはドメインをまたいでスクリプトの読み込み・API通信・iframe表示を行うため、
埋め込み先サイトのCSPが未設定、または必要な許可先が不足していると、フォームが表示されない、または送信できないといった不具合が起こります。
概要
Mazricaが提供するWebフォームは、埋め込み先のページ上でスクリプトを読み込み、
外部ドメインとの通信やフォームのスタイル適用・送信処理を行うことで動作します。
多くのお客様のサイトではこのまま問題なくご利用いただけますが、セキュリティ診断や社内基準にもとづき、埋め込み先のページに厳格なContent-Security-Policy（CSP）をあらかじめ設定・運用されているサイトでは、CSPの内容によってはWebフォームが正しく表示・送信されない場合があります。
このページでは、埋め込み先サイトでCSPを運用されているお客様向けに、Webフォームが問題なく動作するために必要なCSPの設定内容と手順をご案内します。
CSP設定手順
1. CSPを設定する（metaタグ、またはHTTPレスポンスヘッダー）
埋め込み対象ページの <head> 内、他のスクリプトタグより前に、以下の内容でCSPを設定してください。
<meta http-equiv="Content-Security-Policy" content="default-src 'self';
script-src 'self' 'nonce-XXXXXXXX' https://senses-form.mazrica.com;
connect-src 'self' https://senses-form.mazrica.com https://senses-ma-api.mazrica.com https://senses-form-api.mazrica.com;
style-src 'self' 'nonce-XXXXXXXX' https://fonts.googleapis.com https://cdnjs.cloudflare.com;
font-src 'self' https://fonts.gstatic.com;
frame-src 'self' https://senses-form.mazrica.com;
form-action 'self' https://senses-form.mazrica.com">
💡サーバー側でContent-Security-PolicyをHTTPレスポンスヘッダーとして送信できる場合は、metaタグより優先してそちらをご利用ください。metaタグよりも堅牢な設定方法です。 |
2. 各ディレクティブの役割
上記のCSPで指定している各ディレクティブの役割は以下の通りです。
埋め込み先サイトの既存のCSPに追記する際は、この対応関係を参考に、必要なディレクティブへ許可先を追加してください。
ディレクティブ | 役割 | 許可先 |
| 個別指定のない項目全体のデフォルトの許可元 |
|
| JavaScriptの読み込み元 | 自サイト＋nonce＋ |
| fetch/XHR等の通信先（フォーム送信APIを含む） |
|
| CSSの読み込み元 | 自サイト＋nonce＋Google Fonts／cdnjs |
| フォントファイルの読み込み元 | Google Fonts |
| iframe埋め込みの許可先 |
|
| フォーム送信先 |
|
3. nonce（ナンス）を発行し、埋め込みコードに反映する
'nonce-XXXXXXXX'のXXXXXXXX部分には、任意の値をご利用いただけます。
同じ値を、埋め込みスクリプトタグ側の
nonce属性、およびsensesWebform.create()のcspNonceオプションにも指定してください。
CSP側の
nonce-XXXXXXXXと、スクリプトタグ側のnonce属性・cspNonceオプションの値は、必ず同じ値にしてください。
値が一致していない場合、ブラウザ側でスクリプトがブロックされます。
<div id="senses-webform-webform-id"></div>
<script charset="utf-8" type="text/javascript"
src="https://senses-form.mazrica.com/webforms-embed/embed.js"
nonce="XXXXXXXX"></script>
<script nonce="XXXXXXXX">
sensesWebform.create({
webformId: "webform-id", // フォーム管理画面で発行されたID
cspNonce: "XXXXXXXX" // CSPのnonceと同じ値
});
</script>
注意事項
CSPの設定・管理は、埋め込み先サイトを運用されているお客様ご自身に行っていただく項目です。Mazrica側で代理設定することはできません。
埋め込み先サイトですでにCSPを運用中の場合は、既存のポリシーへ追記する形で反映してください。
既存のディレクティブを上書きすると、埋め込み先サイトの他の機能に影響が出るおそれがあります。
同一ページ内に複数のWebフォームを埋め込む場合は、すべてのフォームで同じnonce値をご利用ください。
フォームごとに異なるnonce値を指定すると、後から読み込まれたフォームの値で上書きされ、意図しない動作になる場合があります。
よくあるエラーと対処
エラー内容 | 原因 | 対処 |
Refused to load the script 'https://senses-form.mazrica.com/...' |
|
|
Refused to connect to 'https://senses-ma-api.mazrica.com/...' |
|
|
インラインスクリプトが実行されない | nonce値が一致していない、またはnonceが未設定 | CSPとスクリプトタグのnonceを一致させる |
フォームが埋め込まれない（iframe利用時） |
|
|
フォーム送信時にエラーが発生する |
|
|