App Proxy deforming original url query params

Retired Boards Appdev Store Design
1

We’re experiencing an issue where query params in urls that go through Shopify App Proxy are being deformed as they pass through the proxy.

For example this app proxy link which includes a query param with 2 escaped chars (“+”, "=):

https://[shopId]/[app_proxy_prefix]/request_path?param=BSPNfnXwBPQxE1GlmYgYTRO7KcFe%2BqYOWvMWIV0cK0s%3D

Gets transformed to this url when it hits the backend after the proxy:

/request_path?param=BSPNfnXwBPQxE1GlmYgYTRO7KcFe+qYOWvMWIV0cK0s%3D&shop=[shopId]&logged_in_customer_id=&path_prefix=[app_proxy_prefix]&timestamp=1667485109&signature=...

notice that the “+” character (%2B) has been decoded while the “=” (%3D) remains encoded as it should be.

The result is that the backend receives the following value for the param after decoding which is incorrect (space added where the “+” was)

BSPNfnXwBPQxE1GlmYgYTRO7KcFe qYOWvMWIV0cK0s=

The non-Shopify query params should simply pass through the proxy as is.

Anyone encounter something like this? any suggested workarounds?

2

To add some more info: this issue started happening somewhere around Nov 1st.

Beforehand, all url query params were passed on correctly. Starting Nov 1st, they are malformed.

Probably was some breaking change in the App Proxy forwarding

3

Yes we are noticing the same issue with the query parameters - In our case its an email address
abc%2Bdef%40gmail.com this is the param being passed but when our server receives the request
we get the following - abc+def%40gmail.com. Can someone from the shopify app proxy team look into this.

4

Hey @sakshigupta ,

I got the following reply from the Shopify team.

I have no idea if/when they intend to revert this change in the proxy behavior.

The issue seems to stem from an update we recently pushed to enhance App Proxy request security.

If you want to ensure that the “+”/“=” characters are sent to your proxy endpoint intact we would need it to look like below (+ character used in the example):
/apps?test=Alan%252BTest
%25 encodes % and when decoded we’re left with test=Alan%2BTest which is what gets sent to the proxy endpoint and should return as “test=Alan+Test”.

1 Like
5 
 const queryURI = req.nextUrl?.search
    .replace("?", "")
    //Remove signature
    .split("&")
    .filter((x) => !x.startsWith("signature"))
    .map((x) => decodeURIComponent(x).replaceAll("+", " "))
    .sort()
    .join("");

  const hmac = CryptoJS.HmacSHA256(
    queryURI,
    process.env.SHOPIFY_API_SECRET || "",
  );
  const calculatedSignature = hmac.toString(CryptoJS.enc.Hex);

replacing the “+” with “ “ fixed for me