javascript - Stripe 元素基于什么？他们如何保护它？

Question

我需要将 stripe 集成到我的网站并开始研究它们的工作原理，除了支付处理 stripe 还有一种叫做 Stripe Elements 的东西。

据我所知，这些只是简单的 javascript 小部件(以便 stripe 用户能够更改 css 并使其适应他自己的网站)但是 - 调查它我不确定如何保证安全.

我知道，如果它是一个 iFrame，则用户无法根据自己的喜好更改 css，但是当用户可以控制小部件时 - 这是否违背了 stripe 安全的目的？ (在用户的意义上，具有最终用户的详细信息 - 即，从用户的用户 Angular 来看)。

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

有什么线索吗？

Answer 1

涉及一个 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。