Create endpoint API for each environment (DEV, STG, PRD) in Shopify theme

Create endpoint API for each environment (DEV, STG, PRD) in Shopify theme

nhtbao101
Tourist
14 0 1

I'm working with Shopify theme and using an access network outside Shopify for each environment.

const environment = '{{ settings.environment }}';
let apiEndpoint;
if (environment === 'Development') {
  apiEndpoint = 'https://dev-api.example.com';
} else if (environment === 'Staging') {
  apiEndpoint = 'https://staging-api.example.com';
} else if (environment === 'Production') {
  apiEndpoint = 'https://api.example.com';
}

All endpoint API on my side is public API, but it just has one problem, all endpoint is saving in liquid file.
So anyone can check and see them.
Ex: A user is using the Product environment, but they can see the endpoint API of DEV, STG. They can access it and know the data test form there. Maybe it has a risk.
Is there a best way to fix this case?

Reply 1 (1)

Liam
Shopify Staff
2807 310 805

Hi Nhtbao101,

 

Instead of making direct API calls from the client-side, you could consider setting up a server-side proxy:

  • Your Shopify theme makes a request to your server.
  • Your server determines the environment (based on domain, headers, or other criteria).
  • Your server then makes the appropriate API call to the correct endpoint.
  • The server returns the API response to your Shopify theme.

This way, the actual API endpoint remains hidden from the client-side, and you can add additional security measures on your server, like rate limiting, logging, and more.

 

Also, even if someone knows your development or staging endpoints, they shouldn't be able to do much without the right authentication. Ensure that your APIs require secure tokens or headers to access. This way, even if someone knows the endpoint, they can't fetch data without the correct credentials.

 

Hope this helps!

Liam | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog