CODEWITHSUNDEEP
reactjsiframerecaptchagatsby
pedrorolando
pedrorolando

Reputation: 41

How do I target the reCAPTCHA element within an iframe to show it, and nothing else (Gatsby/React)?

LSS, I can't use jQuery or extra CSS files. Right now I'm loading in an iframe from shopify to handle a contact form submit. Everything is working great, except I have set the iframe to "display: none" so that I can add my own styled contact form. The only issue is the iframe contains the reCAPTCHA ("you are not a robot" thing) I need to complete the form submission.

Is there an easy way to target the reCAPTCHA in the .js file so I can keep the reCAPTCHA, put it where I need it to go when it is called upon, but hide every other part of the iframe?

Right now the HTML looks like this inside my JSX.

  <iframe
    width='100%'
    height='100%'
    css={{ display: 'none' }}
    src='https://shop.examplestore.com/pages/contact-store'
  />

Upvotes: 0

Views: 7797

Answers (1)

coreyward
coreyward

Reputation: 80090

Provided that the iframe is in a different origin, then no, you cannot access the contents of the iframe.

The same-origin policy is a critical security mechanism that restricts how a document or script loaded from one origin can interact with a resource from another origin. It helps isolate potentially malicious documents, reducing possible attack vectors.

Learn more about the same-origin policy here

If the document is part of the same origin, you could ostensibly manipulate the DOM of the child iframe in order to hide any content other than the captcha, and then you could also submit the form from that frame, using el.contentWindow (where el is a reference to the relevant iframe node in the DOM).

Upvotes: 2

Related Questions