The Shopify Checkout Architecture
How Shopify uses sandboxing to build secure checkout pages.
Hi Friends,
Welcome to the 112th issue of the Polymathic Engineer.
The checkout page is for sure the most critical for an e-commerce website. However, implementing it in a way that ensures security and a smooth, easy-to-use experience isn't simple.
I had the opportunity to talk to Ilya Grigorik, a distinguished engineer at Shopify. He told me about their approach and why they chose it. It was a very interesting chat, and this week, I want to share with you what I learned in short:
The secure checkout problem
The Shopify's approach
Key technologies
Benefits and challenges
Project-based learning is the best way to develop technical skills. CodeCrafters is an excellent platform for practicing exciting projects, such as building your version of Redis, Kafka, DNS server, SQLLite, or Git from scratch.
Sign up, and become a better software engineer.
The secure checkout problem
For any e-commerce website, the checkout is one of the most important pages. That's not only the place where money changes hands but also where you can instrument all your funnels to understand how the users behave, try to upsell them, and discount. A lot of the business logic collapses in checkout.
On the other side, the checkout page is also the most exposed to malicious attacks like digital skimming. Attackers try to get credit card information straight from payment forms or send users to fake checkout pages when they don't know what's going on.
The standard approach currently used by many e-commerce sites and stores is to keep the payment form isolated in a safe frame provided by a payment processor. However, this approach is not enough to meet the new PCI DSS v4 requirements, which call for stronger security steps for both the payment form and the whole checkout page.
From the point of view of software engineering, this change is a big challenge. There are a lot of scripts on checkout pages that do important things like marketing pixels, analytics, A/B testing, and more.
According to the new standard, platforms must keep a list of all the scripts that are used during the checkout process, make sure that only approved scripts are loaded, and check the integrity of each script that is loaded.
In the following sections, we'll take a close look at how Shopify makes all of this possible with a flexible and robust approach.
The Shopify's Approach
A few years ago, Shopify began to think about how to make checkout more secure, even before PCI compliance was made mandatory. Their approach was based on a key concept: sandboxing. The idea is to divide the checkout environment into two parts:
all the code and scripts that Shopify directly controls and manages
third-party content, such as extensions, apps, and custom code, that merchants want to add to the checkout process.
Sandboxing keeps these two environments completely separate from each other. This makes sure that unsafe third-party code doesn't get in the way of the main checkout features or lead to security holes.
By managing the environment in which third-party code runs, Shopify can make clear what these scripts can do and how they interact with the main checkout page.
Having this level of control is very important for keeping a high level of security while still giving merchants the flexibility they need in their checkout processes. In the next part, we'll look at the main tools that Shopify used to build its checkout system.
Key technologies
Shopify uses a number of different web sandboxing tools. Iframes and Web Workers are the most important ones.
Web Workers are JavaScript scripts that run in the background and are separate from the main page. Shopify uses them to run third-party code, keeping it isolated from the top-level checkout environment. This isolation is very important for performance and security. If a third-party script doesn't work right or tries to do something bad, it can't affect the main thread's checkout process.
Even though Web Workers manage most cases, Shopify still uses iframes to handle specific situations. Iframes, which stand for "inline frames," are HTML elements that let add another HTML file to the current one. In the context of Shopify, iframes allow the addition of external content to a page, like web forms, movies, etc. Typically, they are used to run chat widgets or other features that need direct access to certain browser APIs.
A carefully managed communication bridge has been set up by Shopify so that these separate areas can talk to the top-level checkout page. The bridge uses a post-message protocol with strict rules on what kind of messages can be sent or received. Since the bridge is under control, third parties can't send arbitrary messages to the top-level page and execute arbitrary code.
The heart of the communication bridge is an open-source library developed by the company called Remote DOM. This library allows UI extensions to render content on the checkout page without directly accessing the DOM (Document Object Model) of the main page.
UI extensions build their component tree in a sandbox environment. Then, Remote DOM turns these trees into native HTML elements on the parent page. This method lets third parties change things on the checkout page while still giving Shopify tight control over what shows up there.
Benefits and Challenges
There are many benefits in the Shopify's checkout design, not just for the company but also for customers and merchants.
First, the sandboxing approach makes security a lot better. Shopify keeps potentially harmful scripts from getting private information on the checkout page by separating third-party code. This not only meets the standards of PCI DSS v4, but it also stops a whole group of attacks. Customers can be told, "Okay, load your third-party content, and we'll sandbox it." That's fine.
But it's not only about security. Running third-party code in Web Workers keeps the main thread of the checkout page free. This means that even if a custom script uses a lot of resources or has problems, it won't slow down or stop the checkout process for customers.
Finally, Shopify's architecture makes it easier to update and improve the checkout system without breaking merchant customizations. Because custom code works in a controlled setting with a clear API, Shopify can change the structure of the checkout process without affecting how extensions work.
As an individual merchant, it can be hard to reach the same levels of protection and compliance. They have to keep track of all the scripts that are used at the checkout, make sure that only authorized scripts are loaded, and check their integrity. These are all difficult and time-consuming jobs, especially for smaller businesses.
Additional references
Interesting Reading
Here are some articles I enjoyed reading this week:
Excellent explanation Fernando
Before I joined a worldwide business that builds software for enterprises, I thought that all these certifications and compliances are here for bureaucracy, but it's not that simple. Some make total sense and acquiring them can raise user trust and people will likely pick your product over something else. Thanks for sharing this about Shopify, Fernando, and thanks for the mention. 🤝