What is stripe elements based on? and how do they secure it?

user_1091286 0
Viewed 614

I need to integrate stripe to my website and started looking on how they work, aside for the payment processing stripe also has something called Stripe Elements.

To my best understanding those are simply javascript widgets (in order for a stripe user to be able to change the css and adapt it to his own website) however - looking into it I'm, not sure how can that be secure.

I understand that if it has been an iFrame the user couldn't change the css to his liking but when a user has control on the widget - doesn't that defi the purpose of stripe being secure? (in the sense of the user has the details of an end-user - i.e. in stripes point of view a user of a user).

I couldn't find anything on stripe that explains how that works\secure nor anything on the internet that explains what's exactly the stripe elements and how do they secure them.

Any clue?

web-widget stripe-payments iframe javascript
2 Answers

There is an iframe involved.

When you mount a Stripe element on an input field, the field is replaced with a DIV that looks like something like this:

<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>

The input that the user interacts with is in the iframe. The iframe has JavaScript that uses AJAX to communicate with the Stripe server.

user_14918950

The element is an iframe, which is another window, which has its own window object and document object. The parent page cannot access these objects, unless the iframe is in the same origin.

The only exception is window.location — the parent page can change it, which navigates the iframe to a different url, but the parent page cannot read it.

On the other hand, if the iframe shares the same origin, then the parent page has full access to the iframe window object by the handle iframeNode.contentWindow.

In the case of Stripe element, the iframe will communicate directly with the Stripe server, and the developer can't see the sensitive user inputs (like credit card number, address, etc).

user_88864560
Related