Application proxies - front end development
An application proxy is a feature that fetches and displays data on a Shopify shop page from an outside location that you, the developer, specify. For app developers, this means that the content on these proxy pages can be dynamic; capable of being updated as much as you feel necessary. App developers can use application proxies to display image galleries, statistics and custom forms, just to name a few examples.
Application proxies do not have to be set up before installation to start working. Application proxies added to an app after it is installed will update its existing install-base.
As a bonus, through the application proxy, it is possible to have Shopify render Liquid responses from the Proxy URL. Liquid is Shopify's customization engine and rendering a Liquid response displays your proxy page as if it were a part of the shops theme.
Add a proxy to your app
1. Click to open the Apps section of the Partners dashboard
2. Click on your App's name, then click Edit app settingsfind the "App Proxy" section near the bottom.
3. Find the "App Proxy" section near the bottom.
4. Click Add app proxy.
5. Set the Proxy URL to the URL within your app's domain where you would like these requests to be proxied.
It should be noted that Shopify will not recognize localhost or example.com as the proxy URL and will return an error.
6. Set a default sub-path for where the application should respond when it is installed in a shop.
7. Click Save changes.
What the store owner sees
After a store owner installs an app with a proxy, they have the ability to change the sub-path. The sub-path is where the application proxy will be accessed from a store owner's own shop (Apps > Manage Apps). Store owners may choose to change the sub-path so that the URL in the location bar makes the proxy page appear like it is being hosted in their store instead of externally. Ultimately, the sub-path is purely for shop aesthetics and will not affect the actual location of the proxy URL (edited sub-paths will still be forwarded to the proxy URL).
Here's what that looks like:
Issue a proxy request
When Shopify receives an HTTP request for a proxied path, it will forward that request to the specified Proxy URL. For example, when the following HTTP request is sent from the client user agent:
Shopify will forward the request using the specified Proxy URL.
Given that the Proxy URL is set to
https://proxy-domain.com/proxy, the client's IP address is
188.8.131.52 and the applications shared secret is
hush, the forwarded request will look like the following:
Cookies are not supported for the application proxy, since the application is accessed through the shop's domain. Shopify will strip the
Cookie header from the request and
Set-Cookie from the response.
The forwarded request adds the following parameters:
shop: The myshopify.com domain for the shop.
path_prefix: The proxy sub-path prefix at which the shop was accessed. In this case, it's/apps/awesome_reviews, which was replaced in the forwarded request URL with the proxy application's Proxy URL.
timestamp: The time in seconds since midnight of January 1, 1970 UTC.
signature: Verifies that the request was sent by Shopify. A hexadecimal encoded SHA-256 HMAC of the other parameters, split on the "&" character, unencoded, sorted, concatenated and using the applications Shared Secret as the HMAC key.
Security: Calculate a digital signature
Just like our webhooks, we sign all our proxy requests.
In Ruby, the algorithm for calculating the signature looks like this using the ruby-hmac gem:
The request method and request body will be forwarded, so content from form submission and AJAX requests can be used in the proxy application. In this case, the URL will still contain the query parameters added by the proxy (i.e. shop, path_prefix, timestamp, and signature) even when the body also contains URL encoded parameters.
If the HTTP response from the Proxy URL has
Content-Type: application/liquid set in its headers, Shopify will evaluate and render any Liquid code in the request's body in the context of the shop using the shop's theme. When used the right way, it can automatically make your app look like it belongs as part of the shop without any manual intervention.
Otherwise, the response will be returned directly to the client. 30* redirects will be followed in case you need that sort of thing.