条纹元素基于什么？他们如何保护它？

问题描述

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

据我所知，这些只是 javascript 小部件（为了让 Stripe 用户能够更改 css 并使其适应他自己的网站）但是 - 正在研究它，我不确定这如何安全.

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

我在 Stripe 上找不到任何解释其工作原理\安全的内容，也没有在 Internet 上找到任何解释 Stripe 元素究竟是什么以及它们如何保护它们的内容。

有什么线索吗？

解决方法

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

,

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

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

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

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