title: Google reCAPTCHA doesn't work
body: <p>This question has been asked before at <a href="https://stackoverflow.com/questions/29578250/recaptcha-uncaught-securityerror-blocked-a-frame-with-origin-https-www-googl">here</a> and <a href="https://stackoverflow.com/questions/37458183/uncaught-securityerror-blocked-a-frame-with-origin-https-www-google-com-fro">here</a>. but the solution does not work for me, the reCAPTCHA sometimes works but most of the times doesn't work on my <code>localhost</code>! so I tried to switch to <strong>valid</strong> <code>https</code> in my development URL on my server, but the problem persists to exist:</p>
  
  <blockquote>
    <p>Uncaught DOMException: Blocked a frame with origin "<a href="https://www.google.com" rel="nofollow noreferrer">https://www.google.com</a>" from accessing a cross-origin frame.   <code>recaptcha__fa.js:formatted:10721</code><br />
        at Kp.f.Yb (<a href="https://www.gstatic.com/recaptcha/api2/r20170411114922/recaptcha__fa.js:413:353" rel="nofollow noreferrer">https://www.gstatic.com/recaptcha/api2/r20170411114922/recaptcha__fa.js:413:353</a>)<br />
        at Kp.xb (<a href="https://www.gstatic.com/recaptcha/api2/r20170411114922/recaptcha__fa.js:409:59" rel="nofollow noreferrer">https://www.gstatic.com/recaptcha/api2/r20170411114922/recaptcha__fa.js:409:59</a>) </p>
  </blockquote>
  
  <p>I have looked at <code>line:10721</code> in <code>recaptcha__fa.js:formatted</code> it seems that the error come from <code>var a = Dg().parent.frames[this.Yc];</code> which it means the code tries to access the parent's frames.</p>
  
  <h3>Questions:</h3>
  
  <ol>
  <li>What is wrong with reCAPTCHA?</li>
  <li>How can I fix this?</li>
  </ol>
  
  <hr>
  
  <h3>P.S:</h3>
  
  <p>More info:</p>
  
  <ul>
  <li>Site's framework: Rails</li>
  <li>I use tubrolink.</li>
  <li>This is how I use it (as documents):</li>
  </ul>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;script src="https://www.google.com/recaptcha/api.js?hl=&lt;%= I18n.locale.to_s %&gt;"&gt;&lt;/script&gt;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class='g-recaptcha' data-sitekey='&lt;%= ENV["KEY"] %&gt;' data-callback='alert("IT IS OK")'&gt;&lt;/div&gt;
     </code></pre>
  </div>
  </div>
  </p>
  
  <hr>
  
  <h1>EDIT</h1>
  
  <p>It just took me a day to figure out that it's the <code>bootstrap modal</code> that causes the issue... I place the code outside of the modal, everything works fine, but when it's inside the modal it's not! </p>
  
  <p>Has anybody have a workaround for this?</p>