如何针对iframe中的reCAPTCHA元素来显示它,而不显示其他内容(Gatsby/React)



LSS,我不能使用jQuery或额外的CSS文件。现在我正在从shopify加载一个iframe来处理联系人表单提交。一切都很好,只是我把iframe设置为";显示:无";这样我就可以添加我自己风格的联系表格。唯一的问题是iframe包含reCAPTCHA("你不是机器人"的东西(我需要完成表格提交。

有没有一种简单的方法可以针对.js文件中的reCAPTCHA,这样我就可以保留reCAPTCHA,在调用它时把它放在我需要的地方,但隐藏iframe的其他部分?

现在,在我的JSX中,HTML看起来是这样的。

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

如果iframe在不同的源中,则否,您无法访问iframe的内容。

同源策略是一种关键的安全机制,它限制从一个源加载的文档或脚本如何与另一个源的资源交互。它有助于隔离潜在的恶意文档,减少可能的攻击媒介。

点击此处了解有关同源政策的更多信息

如果文档是同源文档的一部分,则可以表面上操纵子iframe的DOM,以隐藏除captcha之外的任何内容,然后还可以使用el.contentWindow(其中el是对DOM中相关iframe节点的引用(从该框架提交表单。

最新更新