用Javascript填充iframe中的输入字段

Question

我使用Stripe进行支付，使用angular e2e进行测试。我想把卡的testdata添加到支付窗口。Stripe将iframe include . form元素注入到#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>

//完整选择器://#根比;形式比;div祝辞div.CardField-input-wrapper。is-ready-to-slide祝辞span.CardField-number。CardField-child祝辞跨度:nth-child(2)比;div祝辞div.CardNumberField-input-wrapper祝辞跨度比;输入

我已经成功选择了card-element和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次命中，但同样的问题，没有打开…

所以我的问题是，我如何设法将数据填充到名为"卡号"的输入字段中?

BTW:我也知道跨域问题，但我还没有击中那些(尚未)，不确定是否会因为iframe从Stripe注入。

Answer 1

简短的回答是，根据设计，你不能。出于安全原因，JavaScript不能访问跨域iframe的内容。Stripe使用此功能来确保没有人可以访问iframe中包含的敏感信息(例如信用卡号码)。

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

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

Answer 2

我已经在不到3小时的时间内从安装到成功测试了一个针对Stripes iframe card-element解决方案与Cypress基于这篇文章的工作测试用例:https://medium.com/@michabahr/testing-stri-elements-with-cypress -5a2fc17ab27b我不得不做一些修改，这些都在这里提到:Cypress:信用卡支付的自动测试

原始帖子的想法是使用香草ajax实现相同的功能，所以你不能说它真的解决了。但我想说我确实花了更长的时间试图找到一个解决方案与香草ajs比柏树，这是易于使用，所以给它去，如果你在相同的情况下:-)