Shopify / shopify-app-bridge

https://shopify.dev/docs/api/app-bridge
88 stars 9 forks source link

Filter out 'host' and 'new_design_language' in route propagator #45

Closed sergey-v9 closed 1 year ago

sergey-v9 commented 3 years ago

useRoutePropagation hook does not remove host and new_design_language search parameters from the app frame URL while propagating them to the browser address bar when the application starts.

image

There is the code which removes several other parameters: https://unpkg.com/browse/@shopify/app-bridge-react@1.30.0/components/RoutePropagator/route-propagator.js#L47

// These parameters are added to the iframe url but we don't want to propagate
// them up to the address bar as they are not provided by the application
// Removing hmac is especially important as its presence may cause infinite
// oauth authentication loops
var embeddedFrameParamsToRemove = ['hmac', 'locale', 'protocol', 'session', 'shop', 'timestamp'];

It looks like a bug, and host and new_design_language should be removed too (as they were added by the app-bridge itself, not by the user application)

As a workaround these parameters can be filtered out from location.search manually before useRoutePropagation(location) called:

function ClientRouter(props: BrowserRouterProps) {
  const { location, history } = props;

  const params = new URLSearchParams(location.search);
  params.delete('host');
  params.delete('new_design_language');
  location.search = '?' + params.toString();

  useRoutePropagation(location);

  return (
    <AppBridgeClientRouter history={history} />
  );
}

const PropagatingClientRouter = withRouter(ClientRouter);
sergey-v9 commented 3 years ago

Found that host was added to the list in a new package version: https://unpkg.com/browse/@shopify/app-bridge-react@2.0.2/components/RoutePropagator/route-propagator.js#L47

var embeddedFrameParamsToRemove = [
    'hmac',
    'locale',
    'protocol',
    'session',
    'shop',
    'timestamp',
    'host',
];
MitchLillie commented 1 year ago

new_design_language is no longer used internally, so apps can feel free to use it if they like. Closing as already completed.