# Help needed re : usage of environment variable / snippet injection

**URL:** <https://answers.netlify.com/t/help-needed-re-usage-of-environment-variable-snippet-injection/32734>\
**Category:** Support\
**Tags:** environment-vars, netlify-newbie, deployment\
**Created:** [February 18, 2021, 4:18pm UTC](https://answers.netlify.com/t/help-needed-re-usage-of-environment-variable-snippet-injection/32734 "2021-02-18T16:18:09Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![0750kosse](https://avatars.discourse-cdn.com/v4/letter/0/aeb1de/32.png) [@0750kosse](https://answers.netlify.com/u/0750kosse)\
**Post date:** [February 18, 2021, 4:18pm UTC](https://answers.netlify.com/t/help-needed-re-usage-of-environment-variable-snippet-injection/32734/1 "2021-02-18T16:18:09Z")

</div>

Hi there,

A very basic question from a newbie….

I have created a basic front end only news reader application with vanilla JS, no frameworks, which fetches news from a third party API and display them on the front end.

Site name is:

[https://clabs-newsreader.netlify.app/](https://clabs-newsreader.netlify.app/)

I would not want to share the api key, so I have hidden the api key in a config.js file, and then placed it into a script in the HTML, and then created a variable on index.js to use on the call to the API :

[//config.js](https://config.js)

```
const config = {

API_KEY: “ *********** ”

}

```

HTML

```
<script src="config.js"></script>

<script src="index.js"></script>

```

JS

const apikey = config.API\_KEY

const topHeadlines = `https://content.guardianapis.com/search?api-key=${apikey}&show-fields=thumbnail`;

The app works fine locally, however does not when deployed to netlify. Console error is :

index.js:8 Uncaught ReferenceError: config is not defined

I have tried:

1. setting the apikey as environment variable through netlify UI - does not work

2.added a snippet injection trough netlify UI ( )- does not work either

Am i missing something?

Thanks in advance

---

<div class="post-metadata">

**Author:** ![hrishikesh](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/hrishikesh/32/74607_2.png) [@hrishikesh](https://answers.netlify.com/u/hrishikesh)\
**Post date:** [February 18, 2021, 5:07pm UTC](https://answers.netlify.com/t/help-needed-re-usage-of-environment-variable-snippet-injection/32734/2 "2021-02-18T17:07:45Z")

</div>

Your config.js script returns 404, thus the error.

---

<div class="post-metadata">

**Author:** ![gregraven](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/gregraven/32/23821_2.png) [@gregraven](https://answers.netlify.com/u/gregraven)\
**Post date:** [February 18, 2021, 5:37pm UTC](https://answers.netlify.com/t/help-needed-re-usage-of-environment-variable-snippet-injection/32734/3 "2021-02-18T17:37:00Z")

</div>

> [@0750kosse](#):
>
> I would not want to share the api key, so I have hidden the api key in a config.js file, and then placed it into a script in the HTML

If there is a link to your config file in your HTML, your API key is not hidden, it’s just moved. Anyone looking for it will be able to find it.

---

<div class="post-metadata">

**Author:** ![0750kosse](https://avatars.discourse-cdn.com/v4/letter/0/aeb1de/32.png) [@0750kosse](https://answers.netlify.com/u/0750kosse)\
**Post date:** [February 18, 2021, 6:28pm UTC](https://answers.netlify.com/t/help-needed-re-usage-of-environment-variable-snippet-injection/32734/4 "2021-02-18T18:28:59Z")

</div>

@hrishikesh @gregraven Thanks both!!

I understand config script gives 404 as it is included into a .gitignore

I guess I was just looking for a way to try and hid the apikey, mainly because I am trying to put a portfolio in place & was trying to show that I am also thinking about security of my application…

Any advice for what I am trying to achieve?

Many thanks again!

---

<div class="post-metadata">

**Author:** ![tomrutgers](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/tomrutgers/32/107_2.png) [@tomrutgers](https://answers.netlify.com/u/tomrutgers)\
**Post date:** [February 18, 2021, 6:39pm UTC](https://answers.netlify.com/t/help-needed-re-usage-of-environment-variable-snippet-injection/32734/5 "2021-02-18T18:39:44Z")

</div>

You’ll have to make use of a Netlify Function to be able to hide your API key. If you use an environment variable in your JS build, it will still show up on your site.

Here’s a simple Netlify function `get-headlines.js` to get you going:

```auto
exports.handler = async (event, context) => {
  const headlines = `https://content.guardianapis.com/search?api-key=${process.env.API_KEY}&show-fields=thumbnail;`
  return {
    statusCode: 200,
    body: headlines
  };
};

```

You’ll have to set an environment variable called `API_KEY` for it to work.

You then fetch it kinda like this (untested)

```auto
const response = await fetch('/.netlify/functions/get-headlines, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  }
}).then((res) => res.json());

console.log(response.body);

```

For obvious reasons I wouldn’t copy and paste this to use in production. I recommend you read up on Netlify Functions in the [docs](https://docs.netlify.com/functions/overview/) and browse through the [playground](https://functions-playground.netlify.app/) a bit

---

<div class="post-metadata">

**Author:** ![luke](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/luke/32/39_2.png) [@luke](https://answers.netlify.com/u/luke)\
**Post date:** [February 19, 2021, 6:22am UTC](https://answers.netlify.com/t/help-needed-re-usage-of-environment-variable-snippet-injection/32734/6 "2021-02-19T06:22:03Z")

</div>

Hi, @0750kosse. We also have a support guide here about how to use Functions to keep your API keys safe:

> [@\[Support Guide\] How do I keep my API keys/tokens safe using Netlify Functions?](https://answers.netlify.com/t/support-guide-how-do-i-keep-my-api-keys-tokens-safe-using-netlify-functions/293):
>
> Last reviewed by Netlify Support on Oct 2023 With Jamstack sites, using API keys/tokens to make API calls to other services is a frequent pattern. In some cases, you may want to hard code the keys in your html, when invoking those API calls - which on a service like Netlify means these keys are now public. Anyone can open their browser dev tools and view them, and of course this can lead to someone abusing this access. In some cases, this is fine. For instance, some types of Firebase and Faun…