title: Safari won't execute Recaptcha on validation
body: <p>I'm having an issue with Google <code>reCaptcha</code> on my registration form. I use <code>Formik</code> library for my registration form and <code>react-recaptcha</code> library for captcha . In Google Chrome I have no issues with this component whatsoever, but on Safari if I navigate directly to <code>/register</code> path <code>reCaptcha</code> is not being executed and it won't work.</p>
  <p>While if I navigate to <code>/login</code> page then click on <code>/register</code>, it works.</p>
  <p>Here's a snippet preview of my component:</p>
  <pre><code>const RegisterForm = () =&gt; {
    const siteKey = 'site-key-strinng';
    const [userData, setUserData] = useState({
      password: '',
      email: '',
      recaptcha: '',
    });
  
    let recaptchaInstance;
  
    const executeCaptcha = () =&gt; {
      recaptchaInstance.execute();
    };
  
    return (
          &lt;Formik
            initialValues={{
              email: '',
              password: '',
              recaptcha: '',
            }}
            validate={values =&gt; {
              executeCaptcha();
              const errors = {};
              if (!values.password) errors.password = 'Password Required';
              if (!values.recaptcha) errors.recaptcha = 'Captcha Required';
              if (!values.email) {
                errors.email = 'Email Required';
              } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) {
                errors.email = 'Invalid email address';
              }
              return errors;
            }}
            onSubmit={(values, { setSubmitting }) =&gt; {
              setTimeout(() =&gt; {
                setSubmitting(false);
                setUserData(values);
                register(values);
              }, 500);
            }}
          &gt;
            {({ submitForm, isSubmitting, setFieldValue }) =&gt; (
              &lt;Form&gt;
                &lt;UI.Heading&gt;Register&lt;/UI.Heading&gt;
                &lt;UI.FormItem&gt;
                  &lt;Field
                    component={TextField}
                    style={{ paddingRight: '5px' }}
                    type=&quot;email&quot;
                    label=&quot;Email&quot;
                    name=&quot;email&quot;
                    variant=&quot;outlined&quot;
                    fullWidth
                  /&gt;
                  &lt;Field
                    component={TextField}
                    type=&quot;password&quot;
                    label=&quot;Password&quot;
                    name=&quot;password&quot;
                    variant=&quot;outlined&quot;
                    fullWidth
                  /&gt;
                &lt;/UI.FormItem&gt;
                &lt;UI.FormItem&gt;
                  &lt;UI.Button
                    variant=&quot;contained&quot;
                    color=&quot;primary&quot;
                    disabled={isSubmitting}
                    onClick={submitForm}
                  &gt;
                    Register
                  &lt;/UI.Button&gt;
                &lt;/UI.FormItem&gt;
                &lt;Recaptcha
                  ref={e =&gt; {
                    recaptchaInstance = e;
                  }}
                  sitekey={siteKey}
                  size=&quot;invisible&quot;
                  verifyCallback={response =&gt; setFieldValue('recaptcha', response)}
                /&gt;
              &lt;/Form&gt;
            )}
          &lt;/Formik&gt;
    );
  };
  
  export default RegisterForm;
  </code></pre>
  <p>Also on Safari, I get a weird warning in the console when loading the page:</p>
  <pre><code>The source list for Content Security Policy directive 'script-src' contains an invalid source: 'strict-dynamic'. It will be ignored.
  </code></pre>
  <p>Is this warning related to the fact the reCaptcha won't execute? Is there a way to fix the warning?</p>
  <p>Or how can I make my component working on Safari, as well?</p>