Hiding contentful Space id and access token, client side javascript file

Question

I am new in contentful and I am trying to display content from contentful to a web page. I am displaying the content using contentful.js, I wanted to know How can i hide these information(space id and access token values) from public users when i am using it in a js file to display contents in a web page. Below is the Javascript code which i am using in main Js file to display the content in html file.

var client = contentful.createClient({
  accessToken: 'b4c0n73n7fu1',
  space: 'cfexampleapi'
});

client.entries()
.then(function (entries) {
  // log the file url of any linked assets on image field name
  entries.forEach(function (entry) {
    if(entry.fields.SampleContent) {
      document.getElementById('sample_content_block').innerHTML = entry.fields.SampleContent;
    }
  })
})

Thanks in advance!

Answer 1

There a few different ways that you could do this. The easiest way would be to move your space ID and accessToken into an environment variable. Take a look at this medium post on how to do that with Javascript: https://medium.com/ibm-watson-data-lab/environment-variables-or-keeping-your-secrets-secret-in-a-node-js-app-99019dfff716.

Then on your hosting provider, you'd be able to set the environment variable as those variables and your code would be able to utilize them.

Something interesting to note is that all the content that you put onto Contentful is assumed to be read-only. Exposing your Content Delivery API key (the access key in your example) and your space ID isn't the end of the world in a way that sharing an API Key for an alternative service can be. Using that CDA Key you posted wouldn't enable someone to edit any of the data you have stored on Contentful, just to read it.

However, you want to make sure you don't expose your CMA Key (Content Management API Key) as that would allow people to edit and change your content in Contentful.