React SPA using the Kentico delivery client

liamgoldfinchliamgoldfinch Member
edited April 21 in Back-end Development

Hi,

I've been checking out the sample react cloud on github.

Since the content delivery API key is visible directly in the browser console for XHR calls, what's to stop someone using your API key and abusing the API limits set on your account? e.g. Dancing Goat's homepage:
https://deliver.kenticocloud.com/975bf280-fd91-488c-994c-2f04416e5ee3/items?order=elements.post_date[desc]&language=en-US&system.type=article

Do you need to upgrade to a Professional tier account and enable the secured delivery API?

Also, does the sample react application have any delivery API caching at all?

Finally, is it possible to see the content structure of the dancing goat application inside Kentico Cloud?

Regards,

Comments

  • OndrejCh@kentico.com[email protected] BrnoMember, Kentico Staff mod
    edited April 26

    Hi Liam,

    Thanks for the question.

    The sample app is just a proof of concept to showcase javascript SDK code in combination with React. The common approach is using project ID on the client side. We decided on this format because we wanted to have a convenient showcase for our readers as well as ourselves. If you take this approach, your project could get targeted as you mention. But there is no need to worry, we're dedicated to deal with such cases individually and wouldn't charge the extra API calls made by an attacker.

    If you want to stick with React and avoid others seeing your project GUID or draining your API calls, you could use server side rendering and load the data using the project id on the server side.

    The app itself implements just a simple example of in-app caching e.g. on articles. There are articleListand articleDetails properties in the /src/Stores/Article.js file where the articles are cached in-memory. But as I said, it is just a sample. If you want to cache requests, you could cache content in the local storage, or even better, use the support of the service worker and set up some proper caching strategy. You can take a look at one of the Bryan's posts on the Hackernoon about the progressive web apps and service worker . But still, keep in mind the cache invalidation using webhooks provided by KC.

    Regarding the content structure, the quickest way to take a look at the content structure in json is just calling the api to get all items. If you want to take a look at the structure in Kentico Cloud UI, just follow the readme and connect the application to your own project. You could go to generate a sample project. Then you will be able to manage the content and see how it influences the application.

Sign In or Register to comment.