Best practices to implement Cesium code on a web page?

Hi, it’s probably a very beginner question and my javascript knowledge is still very recent but I would like to know the best practices to implement Cesium code on a web page. I guess I am trying to understand the architecture I should be implementing on my web server.
I see a similar question was posted a long time ago but it did not help. So I would like to rephrase it a little.

More specifically, taking the very simple of example of showing the 3D Earth using an access token: I can easily create an html page and show it in my browser and it works all fine. However if I look at the source code of that web page I see the access token for instance which is problematic.
Or another instance would be that I want to draw points over the globe and when clicking them it show the information box populated with data stored from a database.
So do I implement this properly?..

See attached screenshot of my code for just showing the 3D Earth using an access token:

I need to understand the general approach to implement Cesium code? Language(s) used, client vs server side. Is there any Cesium documentation about that?

Thanks

Welcome to the Cesium community @poulinc!

The best guide to answer all these questions is the getting started guide here: https://cesium.com/docs/tutorials/getting-started/

For best practices regarding keeping your token secure, Matt has some good insight in this post: How to secure ION account

The takeaway here is that you shouldn’t share anything on the client that you don’t want the client to have access to. If someone takes your access token, they will not be able to do anything more than what they can do through your app (view the assets they have permission to, geocode etc.)

We do have a feature request for restricting token use by domain (https://github.com/CesiumGS/cesium-ion-community/issues/27) but this won’t be fullproof either.

I would suggest making sure you limit the permissions on the access token you use to only what’s needed and regularly rotating your token. For example, the access tokens that are shipped as part of CesiumJS are changed with each monthly release.

Thanks @omar I will check your recommendations (although I know about the “getting started” section but will check in particular the Cesium Workshop under the Developer Guide section) and hopefully this will help me.

Regarding the topic of keeping the token secure I don’t think the post you mentioned answers my question. What about any other third party rest API I might need to call which also require a token or API key? I don’t want these to be visible to anyone viewing my page. So should I store such key in a config file? Is there some examples done by the Cesium community? Thanks.

This isn’t unique to CesiumJS - the best practice here is as described above. It’s not possible to completely secure a token exposed in the client. This answer explains it a bit more: security - How to secure the JavaScript API Access Token? - Stack Overflow

1 Like