How to retrieve _data query string parameter in loader/action?

[rhatton77]

I'm using Shopify App Proxy with Remix.

To verify the request came from Shopify, I have to SHA256 hash the query parameters which Shopify adds to the request when it's forwarded on, then compare with the additional signature value.

I notice in my actions that occasionally there is a _data parameter containing the route name e.g. routes/my.route.($id) which is not available with the rest of the searchParams. It is like Remix strips this before I can access the request object's URL.

This is causing my verification function to fail as Shopify used it to originally hash the request.

export const loader = async ({ request, params }: LoaderFunctionArgs) => {
    const url = new URL(request.url);
    // url.searchParams does not contain the _data parameter
}

Is there a way for me to access this via the request object in the action? Or at the very least, access this value dynamically so I can manually append it to the searchParams?

[kiliman]

It looks like Shopify uses Remix App Server, so unfortunately there isn't an easy way to store those params in context via getLoadContext.

So the simplest solution is to just stop Remix from stripping those out. Here's a patch that comments out the stripping of _data and index params.

Oddly enough, there's a comment to stop stripping these out in Remix v2, but looks like it was overlooked. It shouldn't affect the functioning of Remix. And as long as your app accounts for the fact that these params may exist, you shouldn't have any issues there either.

Simply copy the patch to patches/@remix-run+server-runtime+2.8.1.patch.

Install patch-package and add to your package.json scripts:

"scripts": {
  "postinstall": "patch-package"
}

diff --git a/node_modules/@remix-run/server-runtime/dist/data.js b/node_modules/@remix-run/server-runtime/dist/data.js
index e84a3d6..5f39431 100644
--- a/node_modules/@remix-run/server-runtime/dist/data.js
+++ b/node_modules/@remix-run/server-runtime/dist/data.js
@@ -74,7 +74,7 @@ async function callRouteLoaderRR({
 function stripIndexParam(request) {
   let url = new URL(request.url);
   let indexValues = url.searchParams.getAll("index");
-  url.searchParams.delete("index");
+  //url.searchParams.delete("index");
   let indexValuesToKeep = [];
   for (let indexValue of indexValues) {
     if (indexValue) {
@@ -97,7 +97,7 @@ function stripIndexParam(request) {
 }
 function stripDataParam(request) {
   let url = new URL(request.url);
-  url.searchParams.delete("_data");
+  //url.searchParams.delete("_data");
   let init = {
     method: request.method,
     body: request.body,

I tested with the default Shopify app.

// routes/auth.login/route.tsx
export const loader = async ({ request }: LoaderFunctionArgs) => {
  const u = new URL(request.url);
  console.log("loader _data:", u.searchParams.get("_data"));
  const errors = loginErrorMessage(await login(request));

  return json({ errors, polarisTranslations });
};

After clicking the login button

12:01:27 │ remix      │ 
12:01:34 │ remix      │ loader _data: routes/auth.login