2

我需要将条带集成到我的网站并开始研究它们是如何工作的，除了支付处理条带还有一个叫做条带元素的东西。

据我所知，这些只是 javascript 小部件（为了让条带用户能够更改 css 并将其调整到他自己的网站）但是 - 调查它，我不确定这如何安全。

我知道，如果它是 iFrame，则用户无法根据自己的喜好更改 css，但是当用户可以控制小部件时 - 这难道不符合条带安全的目的吗？（在用户的意义上，拥有最终用户的详细信息 - 即从条纹的角度来看，用户的用户）。

我在条带上找不到任何解释它如何工作\安全的东西，也找不到任何互联网上解释条带元素到底是什么以及它们如何保护它们的东西。

有什么线索吗？

4

2 回答 2

2

涉及到一个 iframe。

当您在输入字段上安装 Stripe 元素时，该字段将替换为如下所示的 DIV：

<div class="form-control StripeElement StripeElement--empty" id="cc_number">
  <div class="__PrivateStripeElement" style="margin: 0px !important; padding: 0px !important; border: none !important; display: block !important; background: transparent !important; position: relative !important; opacity: 1 !important;">
    <iframe name="__privateStripeFrame2365" frameborder="0" allowtransparency="true" scrolling="no" allow="payment *" src="https://js.stripe.com/v3/elements-inner-card-4c3fbb0b6f5096dd4a3a7a3ec37002fe.html#wait=true&amp;showIcon=true&amp;style[base][iconColor]=%23235fc6&amp;style[base][fontWeight]=500&amp;style[base][fontFamily]=Roboto%2C+sans-serif&amp;style[base][fontSize]=16px&amp;rtl=false&amp;componentName=cardNumber&amp;keyMode=test&amp;apiKey=pk_XXXXX&amp;referrer=https%3A%2F%2Fdevbenoit.bridgebase.com%2Fpurchase%2Fpay.php&amp;controllerId=__privateStripeController2361"
      title="Secure card number input frame" style="border: none !important; margin: 0px !important; padding: 0px !important; width: 1px !important; min-width: 100% !important; overflow: hidden !important; display: block !important; user-select: none !important; will-change: transform !important; height: 19.2px;"></iframe>
    <input class="__PrivateStripeElement-input" aria-hidden="true" aria-label=" " autocomplete="false" maxlength="1" style="border: none !important; display: block !important; position: absolute !important; height: 1px !important; top: -1px !important; left: 0px !important; padding: 0px !important; margin: 0px !important; width: 100% !important; opacity: 0 !important; background: transparent !important; pointer-events: none !important; font-size: 16px !important;"></div>
</div>

用户与之交互的输入在 iframe 中。iframe 具有使用 AJAX 与 Stripe 服务器通信的 JavaScript。

于 2021-07-04T16:54:36.753 回答
0

该元素是一个iframe，它是另一个窗口，它有自己的window对象和document对象。父页面无法访问这些对象，除非 iframe 位于同一origin中。

唯一的例外是window.location——父页面可以更改它，它将 iframe 导航到不同的 url，但父页面无法读取它。

另一方面，如果 iframe 共享相同的来源，则父页面可以window通过 handle 完全访问 iframe 对象iframeNode.contentWindow。

在 Stripe 元素的情况下，iframe 将直接与 Stripe 服务器通信，开发人员无法看到敏感的用户输入（如信用卡号、地址等）。

于 2021-07-11T16:31:50.047 回答