reCAPTCHAを使用しようとしたらCSP設定で引っかかった

背景

• firebaseのnew RecaptchaVerifierを使ってreCAPTCHのインスタンスと生成
• render()でトークンを更新 ←エラーが出た

Refused to load the script '<https://www.google.com/recaptcha/api.js...>' because it violates the following Content Security Policy directive: xxx. Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

エラーの理由

コンテンツセキュリティポリシー(CSP)に従わないscriptを読み込もうとしているため、'https://www.google.com/recaptcha/api.js...'
は読み込めない

解決策

headerの'Content-Security-Policy'に以下を追加する

"script-src 'self' www.google.com/recaptcha/api.js www.gstatic.com "

終わりに

reCAPTCHAが使えなくてあっせった。。
https://nextjs.org/docs/pages/building-your-application/configuring/content-security-policy