karser / KarserRecaptcha3Bundle

Google ReCAPTCHA v3 for Symfony
MIT License
158 stars 21 forks source link

Problem with vue.js #29

Closed UstinovV closed 3 years ago

UstinovV commented 3 years ago

Hello, we used your bundle in Symfony 4 project with vue.js and we get this error:

Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed.

This problem could be solved by adding type="application/javascript" into the <script> tag.

Currently we solved it by overriding template, but may be it make sense to add some specific parameter like for nonce attribute ?

karser commented 3 years ago

Just pass script_nonce_csp to add nonce attribute:

        $builder->add('captcha', Recaptcha3Type::class, [
            'constraints' => new Recaptcha3(),
            'action_name' => 'homepage',
            'script_nonce_csp' => $nonceCSP,
        ]);

Why do you need type="application/javascript"?

UstinovV commented 3 years ago

Maybe I was not clear enough. We need some specific attribute for <script> tag to have type="application/javascript" attribute set, because vue.js will not render <script> tags without it and this part of code wont be added to form

<script>
    var recaptchaCallback_form_captcha = function() {
    grecaptcha.execute('<YOUR-RECAPTCHA-KEY>', {action: 'landing'}).then(function(token) {
    document.getElementById('form_captcha').value = token;
    });
    };
    </script><script src="https://www.google.com/recaptcha/api.js?render=<YOUR-RECAPTCHA-KEY>&onload=recaptchaCallback_form_captcha" async defer></script> 
karser commented 3 years ago

I don't mind adding type="application/javascript" to the template. Can you please make a PR?

karser commented 3 years ago

Or if you want to pass an array of attributes to render. Just submit a PR and let's take a look at the code.

UstinovV commented 3 years ago

I have submitted a PR, please check it when you will have time.

karser commented 3 years ago

Closed by #30