Hi,
how to hide or encrypt the integrated third party API key from front end due anyone can simply view the API key from the page source.
We need to secure the API key from the website to prevent the important information leaks.
Topic summary
Concern: A third-party API key is visible in the storefront’s page source, creating a security risk of key exposure.
Proposed approach: Use a Shopify Application Proxy to avoid exposing secrets on the client. The storefront sends requests to the proxy endpoint (a secure “middleman”), which then makes the actual third‑party API call server‑side using the protected key, and returns only the necessary data to the browser.
Key points:
- API keys should never be embedded client-side; keep them on the server.
- An app proxy routes storefront requests to your app’s backend, where authentication and external API calls occur securely.
- Front-end receives results, not secrets.
Status: A clear mitigation path (app proxy) is suggested; no confirmation of implementation or resolution yet. An attached screenshot illustrates the exposed key in page source.
We ran into the same concern when we were working through things. I would suggest deploying an app proxy → https://shopify.dev/tutorials/display-data-on-an-online-store-with-an-application-proxy-app-extension. This would then pass off the call securely to your middleman, who would then it turn make the third-party API call. And return the results back to the front-end user session.
For anyone that finds this post, the core principle to understand is that if a third party API key is present in storefront code, it can be seen by everyone.
As @Gregarican has suggested, the proper pattern is to use a Shopify App Proxy coupled with a backend service that securely stores and uses credentials. The storefront calls a path like /apps/backend-proxy. Shopify forwards that request to the app backend, signing it cryptographically using the app’s shared secret.
The backend verifies that HMAC signature to ensure the request genuinely passed through Shopify and was not tampered with. Only after successful verification should the backend use securely stored third-party credentials to perform the external API call.
If you do not want to build and host that backend layer yourself, APIEase provides that secure infrastructure so storefront code can call external APIs without exposing credentials.