使用 Javascript 填写 iframe 中的输入字段

Posted 2023-05-09

【中文标题】使用 Javascript 填写 iframe 中的输入字段

【英文标题】：fill out input field in iframe with Javascript

【发布时间】：2021-05-18 17:52:42

【问题描述】：

我使用 Stripe 进行支付，使用 angular e2e 进行测试。我想将卡测试数据添加到支付窗口中。 Stripe 注入了一个 iframe，包括。将表单元素放入#card-element（这是我的标记的一部分），但没有表单名称和ID。这是 Stripe 注入支付容器后的部分标记：

<div id="card-element" class="StripeElement StripeElement--empty">
 <div class="__PrivateStripeElement">
  <iframe frameborder="0" allowtransparency="true" scrolling="no" name="__privateStripeFrame5395" allowpaymentrequest="true" src="https://js.stripe.com/v3/elements-inner-card-xxx.html" ></iframe>
 </div>
</div>

iframe 内部是（仍然只显示部分标记）：

<form class="ElementsApp is-empty" dir="ltr">
 <div tabindex="-1" class="CardNumberField CardNumberField--ltr">
  <div class="CardNumberField-input-wrapper">
   <input class="InputElement is-empty Input Input--empty" autocomplete="cc-number" autocorrect="off" spellcheck="false" type="text" name="cardnumber" data-elements-stable-field-name="cardNumber" inputmode="numeric" aria-label="Kredit- eller debetkortnummer" placeholder="Kortnummer" aria-invalid="false" value="">
  </div>
 </div>
 <button tabindex="-1" aria-hidden="true" type="submit"></button>
</form>

// 检查器的完整选择器： //#root > form > div > div.CardField-input-wrapper.is-ready-to-slide > span.CardField-number.CardField-child > span:nth-child(2) > div > div.CardNumberField-输入包装器 > 跨度 > 输入

我已经成功地选择了卡片元素和 iframe：

var cont = document.getElementById('card-element');
console.log(cont); // i get the card-element markup
var iframe = cont.getElementsByTagName('iframe');
console.log(iframe); 

iframe 在控制台中显示：

HTMLCollection []
0: iframe
length: 1
__privateStripeFrame3085: iframe
__proto__: HTMLCollection

从这里我有点卡住了，我在 iframe[0] 数组中单击，但我在列表中找不到 name="cardnumber"，搜索它会给我 15 次点击，但数据集没有打开，所以还是卡住了。 CardNumberField-input-wrapper 只提供 3 次点击，但同样的问题，没有打开...

所以我的问题是，我如何将数据填充到名为“cardnumber”的输入字段中？

顺便说一句：我也知道跨域问题，但我还没有遇到这些问题，并且不确定我是否会这样做，因为 iframe 是从 Stripe 注入的。

【参考方案1】：

简短的回答是，你不能，按设计。出于安全原因，跨域 iframe 不能让 javascript 访问其内容。 Stripe 使用它来确保没有人可以访问 iframe 中包含的敏感信息（例如信用卡号）。

这具有双重目的，即保护您的用户以及将您的 PCI 合规级别保持在最低水平。

如果您尝试自动化端到端测试，这确实会让事情变得棘手。幸运的是，有像 Cypress 这样的工具可以解决这个问题。这是一篇关于如何使用 Cypress 测试 Stripe Elements 的好文章：https://medium.com/@michabahr/testing-stripe-elements-with-cypress-5a2fc17ab27b

【讨论】：

谢谢，我已经看过这个解决方案，我只是想用 vanillaJS 来做（因为我对 Angular 不是很熟悉）——我可能不得不给 Cypress 一个机会： -)

用 Cypress 解决了，做了一些修改，这里提到：***.com/questions/64391115/…

Asjas - 如果您知道在 0:iframe 中寻找什么会很好，那就是我正在寻找的提示。我的解决方案显示“0.contentDocument.body”，但如果我在 console.log 中打开“iframe”，contentDocument 为空 - 我只是想找到包含“#root > form”等的路径和数据...

【参考方案2】：

从安装到成功测试，我在不到 3 小时的时间里根据这篇文章用 Cypress 制作了一个针对 Stripes iframe 卡元素解决方案的工作测试用例：https://medium.com/@michabahr/testing-stripe-elements-with-cypress-5a2fc17ab27b 我必须进行一些修改，这里提到了这些：@987654322 @

原帖的想法是使用 vanillaJS 实现相同的目的，所以你不能说它已经解决了。但是我想说我确实花了更长的时间来尝试使用 vanillaJS 找到解决方案，而不是使用易于使用的 Cypress，所以如果您处于相同的情况，请尝试一下 :-)