diff --git a/README.md b/README.md index d7284cf..b18f5a2 100644 --- a/README.md +++ b/README.md @@ -162,13 +162,20 @@ window.recaptchaOptions = { }; ``` -### CSP Nonce support +#### CSP Nonce support ```js window.recaptchaOptions = { nonce: document.querySelector('meta[name=\'csp-nonce\']').getAttribute('content'), }; ``` +#### Trusted Types support +```js +window.recaptchaOptions = { + trustedTypes: true, +} +``` + #### ReCaptcha loading google recaptcha script manually You can also use the barebone components doing the following. Using that component will oblige you to manage the grecaptcha dep and load the script by yourself. diff --git a/src/recaptcha-wrapper.js b/src/recaptcha-wrapper.js index d83ac3c..5e63561 100644 --- a/src/recaptcha-wrapper.js +++ b/src/recaptcha-wrapper.js @@ -11,6 +11,12 @@ function getOptions() { function getURL() { const dynamicOptions = getOptions(); const hostname = dynamicOptions.useRecaptchaNet ? "recaptcha.net" : "www.google.com"; + if (self.trustedTypes && self.trustedTypes.createPolicy && dynamicOptions.trustedTypes) { + const policy = self.trustedTypes.createPolicy('react-google-recaptcha', { + createScriptURL: (_ignored) => `https://${hostname}/recaptcha/api.js?onload=${callbackName}&render=explicit&trustedtypes=true` + }); + return policy.createScriptURL('_ignored'); + } return `https://${hostname}/recaptcha/api.js?onload=${callbackName}&render=explicit`; }