Question

I got a question about security. I am building a mobile webshop in Flutter. Is it bad to make those API calls in the frontend? Should I make a separate backend for it in Node for example?

I have also read that you can 'create' your own endpoints in WordPress with PHP. What about that? Does that make it any safer or not?

What endpoints do I use?

There is an existing WooCommerce API to retrieve products, get categories, create orders on the WooCommerce API. On the CoCart API, you can retrieve the cart, add to cart, delete cart, etc...

For the Mollie payment APIs, I think it is better to make a backend.

My take on it

I think it is fine to call those endpoints in the frontend. I have seen Flutter packages for WooCommerce to call those endpoints. Yes, I do send the basic auth in the headers... so I am not sure how 'dangerous' that is.

But on the other side. What can the 'hacker' do? They can see all the products, that is fine I guess. I am not sure if they can create orders... They cannot steal money at least :)

Reference code

For reference, here is a piece of code when calling an endpoint:

Future<Product> getProductById(int productId) async {
    String basicAuth =
        'Basic ' + base64Encode(utf8.encode('$username:$password'));
    print(basicAuth);

    var response = await http.get(
        Uri.parse(
            'https://websitename/wp-json/wc/v3/products/${productId}'),
        headers: <String, String>{'Authorization': basicAuth});
    if (response.statusCode == 200) {
      return Product.fromJson(jsonDecode(response.body));
    } else {
      throw Exception('Failed');
    }
  }

Let me know your opinion!


Solution 1: Lukas Liesis

When talking about security main question is what goes over the network request. If your username & password from code above is something to keep secret, that can't be on client side.

If you sent code to user, user got it and can check what's happening while tracing network requests.

You can always skip the UI, debug network request and take all the details that were sent over that request and send those requests with cURL or anything else. Yet client must authenticate somehow, and that's a wide topic from "unlisted" URLs where you just need to have exact "random id" to get to the resource (e.g. youtube's or many file sharing services use that as "unlisted" link, which means this won't be in search results but if you have exact link, you will get into the resource) to oAuth2, which you can learn more about here and you could check this post too which covers several methods of token-based authentication.