JS works on Greasemonkey, but does not work directory on the page

Question

JS works on Greasemonkey, but does not work directory on the page

Asked 6 years, 8 months ago

Viewed 164 times

0

I’m doing some tests using Google Recaptcha.

What I am trying to do is to automatically click on the checkbox when the captcha appears. I took this function teste() on the website of greasemonkey and it works perfectly using the plugin, but it doesn’t work if I add it directly to my page.

Could anyone tell me why? What greasemonkey makes it different for the script work?

<html>
    <head>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script type='text/javascript' src='https://www.google.com/recaptcha/api.js'></script>
    </head>
    <body onload='test();'>
        <form action="hello" method="POST">
            <div id='testid'>
                <div class="g-recaptcha"
                    data-sitekey="SITE_KEY_HERE"
                    data-callback="onSuccess">
                </div>
            </div>
        </form>
    </body>

    <script>

        function test() {
            var domain = (window.location != window.parent.location) ? document.referrer.toString() : document.location.toString();
            if (domain.indexOf('miped.ru') == -1 && domain.indexOf('indiegala') == -1 && domain.indexOf('gleam.io') == -1) {
                var clickCheck = setInterval(function() {
                    console.log('test');
                    if (document.querySelectorAll('.recaptcha-checkbox-checkmark').length > 0) {
                        clearInterval(clickCheck);
                        document.querySelector('.recaptcha-checkbox-checkmark').click();
                    }
                }, 100);
            }
        }

        var onSuccess = function(response) {
              alert(grecaptcha.getResponse());
        };

    </script>

</html>

1 answer

Browser other questions tagged javascript recaptcha tampermonkey

You are not signed in. Login or sign up in order to post.

by Valdeir Psr • **10,804** points · Answer 1 · 2018-01-22T21:06:24+00:00

The difference is that when you add Recaptcha through the code below, Google’s script automatically creates a iframe.

<div class="g-recaptcha" data-sitekey="MY-KEY"></div>

It turns out that when you try to alter an elementro inside that iframe, you can’t. That’s due to safety.

Already the greasemonkey injects that same script within the iframe created, so it works correctly.

Even you can test it (I will use Chrome for the test).

Step 1 - Access https://patrickhlauke.github.io/recaptcha/

Step 2 - Press F12 to open the browser console.

Step 3 - Enter the code document.querySelector('iframe').querySelector('.recaptcha-checkbox-checkmark'); and press enter.

See that nothing happens. That’s because you’re trying to access an element of an iframe outside of it.

Step 4 - Now change the access to within Google’s iframe. Click Top and subsequently in Anchor.

Step 5 - Now that you are "inside" the created iframe, you can access and modify any element within it. Try running the code below.

document.querySelector('.recaptcha-checkbox-checkmark').click();

That’s how the greasemonkey makes. It simply injects the code into the iframe, allowing it to access/modify a particular event of an element.