How to Securely Fetch Product Data via Shopify App in Storefront?

[greeshma]

Hi everyone,

I’ve developed a Shopify app that uses the unauthenticated_read_product_listings scope to fetch product details via GraphQL in the storefront. The data is successfully retrieved, but I noticed that the API endpoint is visible in the browser's network tab. This makes it possible for someone to use tools like Postman or other methods to access or manipulate the endpoint, which raises potential security concerns.

Is there a recommended way to securely fetch product data in the storefront through an app without exposing the API endpoint publicly? What best practices should I follow to prevent misuse or unauthorized access?

Any guidance or suggestions would be greatly appreciated.

Thanks!

[BiDeal-Discount]

Hi @greeshma 

No way to hide the store query because all of them display on network tab. It's client side so you can't hide unless you call the api on the server side

[MandasaTech]

Hi @greeshma ,

Here’s some clarity and best practices to help secure your Shopify app’s data access:

Why the Endpoint Is Visible

When using Shopify’s Storefront API (especially from the frontend), the endpoint and requests will always be visible in the browser’s network tab — this is by design. Shopify allows read access to certain product information publicly for storefront functionality.

Unfortunately, you can't completely hide the Storefront API endpoint or prevent tools like Postman from accessing it, because the token (storefront access token) is embedded in your frontend code.

Best Practices for Minimizing Risk

1. Use Storefront API Scopes Appropriately
   The unauthenticated_read_product_listings scope is intentionally limited in what data it can expose — it only allows access to public product data. No sensitive data (like inventory, prices behind a login wall, or customer data) is accessible with this token.
   
   

2. Avoid Overexposing Custom App Logic via Storefront API
   If you're exposing more than product data (like metafields, tags used for logic, or private business logic), consider moving that logic to your backend app and serve only what's necessary to the frontend.
   
   

3. Rate Limiting and Abuse Prevention
   Shopify has built-in rate limits, but you can also:

   • Monitor access logs for unusual activity

   • Use bot detection or recaptcha for pages that make heavy API calls

   • Obfuscate logic in your frontend if applicable (though not a true security solution)
     
     

4. Secure API Logic via Proxy Routes (Optional)
   If you're building a custom storefront experience and need tighter control:

   • Create app proxy routes via your Shopify app backend

   • Use authenticated requests and serve only sanitized data to the frontend

Conclusion:

Unfortunately, you can’t completely hide the Storefront API usage — but if you only expose public product data, and offload sensitive logic to a backend or proxy, you're following Shopify’s intended use and staying secure.

[greeshma]

@MandasaTech 

Thanks for your reply.
I'm currently building a Wishlist app, and I've noticed that the API endpoints for adding and removing items from the wishlist are visible in the browser's network tab. This means anyone can potentially access those endpoints directly and manipulate the data, which is a serious security concern.

Do you have any suggestions for securing these endpoints and preventing unauthorized access?

[MandasaTech]

Hello @greeshma 

You're absolutely right to be concerned — exposing API endpoints without proper protection can leave your wishlist app vulnerable to unauthorized manipulation or abuse.

Here’s a structured way to secure your wishlist endpoints effectively:

1. User Authentication (Auth Check)

Ensure that only authenticated users can access the wishlist endpoints.

• If you're building this into a Shopify app, you can:

  • Use Shopify’s App Bridge + session tokens to confirm that requests are coming from logged-in users.

  • On custom stores or headless setups, use JWTs, session cookies, or OAuth.
    
    Check the user identity on every API request server-side, and reject unauthenticated ones.

2. CSRF Protection (for Web Apps)

If your wishlist feature is used inside a theme or public storefront:

• Use CSRF tokens to prevent other sites or scripts from sending requests on the user’s behalf.

Most frameworks (e.g., Express.js, Django, Laravel) have built-in CSRF protection.

3. Rate Limiting

Prevent abuse by rate-limiting the API:

• Only allow a certain number of wishlist actions (e.g., add/remove) per IP or user per minute.

• Use tools like:

  • express-rate-limit (Node.js)

  • rack-attack (Ruby)

  • django-ratelimit (Python)

4. Validate Ownership Server-Side

Just because a request is authenticated doesn’t mean it’s valid.

On the backend:

• Confirm that the user ID in the session matches the wishlist owner.

• Never rely on data passed from the frontend (like user_id) without verification.

5. Use POST/DELETE with Proper Headers

• Avoid using GET requests for changing data (like adding/removing wishlist items).

• Require custom headers or auth tokens that aren't easily spoofed.

6. Avoid Exposing Sensitive Data

Even if endpoints are secured, avoid returning too much data.

• Only return what’s necessary (e.g., wishlist item IDs or product handles).

• Don’t expose internal logic or admin-level data.

Bonus: Obfuscation Isn’t Security — But Can Help

Though security by obscurity isn’t a solution, you can:

• Prefix your wishlist endpoints with less-obvious routes (e.g., /api/user/wishlist/secure-add instead of /wishlist/add)

• Keep everything behind auth walls.

Example: Secured Wishlist Endpoint (Node.js)

app.post('/api/wishlist/add', authenticateUser, async (req, res) => {
  const userId = req.user.id;
  const { productId } = req.body;

  // Validate productId, prevent duplicates, etc.
  await Wishlist.add(userId, productId);
  res.status(200).json({ message: 'Item added to wishlist' });
});

 
Please share if you have any questions!

[damon64]

---

@greeshma whycatmeows comwrote:

Hi everyone,

I’ve developed a Shopify app that uses the unauthenticated_read_product_listings scope to fetch product details via GraphQL in the storefront. The data is successfully retrieved, but I noticed that the API endpoint is visible in the browser's network tab. This makes it possible for someone to use tools like Postman or other methods to access or manipulate the endpoint, which raises potential security concerns.

Is there a recommended way to securely fetch product data in the storefront through an app without exposing the API endpoint publicly? What best practices should I follow to prevent misuse or unauthorized access?

Any guidance or suggestions would be greatly appreciated.

Thanks!

---

For Shopify apps using `unauthenticated_read_product_listings` to fetch data client-side, the API endpoint's visibility in the browser is **normal and expected**, as this scope is designed for public access to product information. Security relies on the **limited permissions** of this scope, which prevents access to sensitive data or unauthorized manipulation. While basic scraping might occur, Shopify has built-in rate limits to mitigate abuse; for any operations requiring authentication or handling sensitive data, these must be processed securely on your app's **backend server**.