How to protect API againest malicious attack?

Hello 👋

I'm working on an API that is reciving requests from websites (Shopify stores), the request looks like:

shopCentralAPI.apiToken = "123"
shopCentralAPI.metafieldCreateUpdate(shopCentralAPI.apiToken, {
      store_id: "{{ shop.domain | remove: ".myshopify.com" }}",
      metafield: {
        shopify_obj_type: metafield_obj_type,
        shopify_obj_id: metafield_obj_id,
        namespace: metafield_namespace,
        key: metafield_key,
        value: metafield_value,
        value_type: metafield_value_type
      }
    });

When the request hits the API

1. I find the user by the API token (JWT)
2. make sure the request is coming from a store belongs to the user
3. process the request

The shopCentralAPI.apiToken as you can see is exposed so what would be a better or more secure way to send a request from a website to the API? Which would protect againest malicious console request or any other attack I'm not aware of.

TIA 🙌

Well, use an environment variable to store keys so they aren't in your code anywhere. You can do this with Heroku or a Digital Ocean droplet very easily. Easier to do on Heroku thank a droplet.

As far as when the app itself is communicating with Shopify, use an SSL connection if they have one available (which I'm pretty sure they do). The key itself has to be available in the request for you to authenticate the request and I don't think encrypting it outside of SSL will allow you to work with the API.

Here's a good explanation for both the CLI and web interface way to add environment variables to protect your API key: https://devcenter.heroku.com/articles/config-vars

Always protect API keys! :) Especially so they don't end up on Github and possibly exposed to the world.

Thanks Seth, unfortionatly that's not what I'm looking for!

To clarify - the request is being built in the browser with the API token exposed, correct?

And you're concerned about this API token being visible to anyone that pokes around in the browser dev tools?

Seems like this kind of request would be better built server-side so the API token is protected. The website would send the contents of the hash back to the server then the server would build the full requests and send it to your API.

But aybe you don't have control over the client side of things?

Hey Daniel, spot on 🙌

The app I'm building is actually the middleware, the whole idea of the app is to make Shopify theme developers able to do things that they are usually aren't able to, without a middleware.

So I can't remove the token from the website, I need a practical secure soltion that can put developers minds at ease so they can use the app I'm building. So far this seems like a show stopper 😔