Creating a .env file using Vanilla JavaScript to securely store and conceal tokens

Question

Creating a .env file using Vanilla JavaScript to securely store and conceal tokens

I am currently working on a vanilla JavaScript project. Within the app.js file, I am making an API call to retrieve specific values. Initially, I tested the API using Postman by including all the necessary headers there and then implemented the code in my JavaScript fetch function. Everything is functioning correctly, but the issue is that my token and session id are appearing in the code.

var myHeaders = new Headers();
    myHeaders.append("Content-Type", "application/json");
    myHeaders.append("Authorization", "Token <mytoken>");
    myHeaders.append("Cookie", "sessionid= <mysessionid>");
    myHeaders.append("User-Agent", "Mozilla/5.0");

I am wondering how I can securely store these sensitive values in a .env file for better security.

Thank you!

javascript

Answer 1

Answer №1

If you're looking for a solution without the need to install additional packages, I have one!

You can find my original response here, but I'll share it here as well.

I managed to develop a viable solution by referring to this informative article. Feel free to customize the steps below according to your variables and dive into the article for a comprehensive understanding.

Note: This approach is suitable for small personal projects where data confidentiality is not critical, but it's best avoided in larger projects that demand robust security measures.

In case your project is hosted on platforms like Netlify with build/deploy capabilities:

Navigate to the build settings

If your script file resides in a directory, specify the build command as follows:

cd DIRECTORY-FOR-THE-SCRIPT-FILE && echo -e "export const USERNAME="123";\nexport const PASSWORD="password";" > config.js

For scripts in the root folder, set the command to:

echo -e "export const USERNAME="123";\nexport const PASSWORD="password"; > config.js

In your index.html file where the script is imported, ensure your script tag includes this attribute: type="module" e.g.,
```
<script src="./index.js" type="module"></script>
```
To access the variables in your script file, add this line:
```
import {USERNAME, PASSWORD} from "./config.js"
```
Manually trigger a redeploy on Netlify or let automatic deploys take over if already enabled for the repository.
That's all there is to it!

This method resolved my issue and hopefully benefits others too✨.

Answer 2

If you're looking for a solution without the need to install additional packages, I have one!

You can find my original response here, but I'll share it here as well.

I managed to develop a viable solution by referring to this informative article. Feel free to customize the steps below according to your variables and dive into the article for a comprehensive understanding.

Note: This approach is suitable for small personal projects where data confidentiality is not critical, but it's best avoided in larger projects that demand robust security measures.

In case your project is hosted on platforms like Netlify with build/deploy capabilities:

Navigate to the build settings

If your script file resides in a directory, specify the build command as follows:

cd DIRECTORY-FOR-THE-SCRIPT-FILE && echo -e "export const USERNAME="123";\nexport const PASSWORD="password";" > config.js

For scripts in the root folder, set the command to:

echo -e "export const USERNAME="123";\nexport const PASSWORD="password"; > config.js

In your index.html file where the script is imported, ensure your script tag includes this attribute: type="module" e.g.,
```
<script src="./index.js" type="module"></script>
```
To access the variables in your script file, add this line:
```
import {USERNAME, PASSWORD} from "./config.js"
```
Manually trigger a redeploy on Netlify or let automatic deploys take over if already enabled for the repository.
That's all there is to it!

This method resolved my issue and hopefully benefits others too✨.

Answer 3

Answer №2

Start by installing the dotenv npm package

You can do this in your terminal:

npm install dotenv

If you're working with vanilla JavaScript that doesn't support require, consider installing the requirejs npm package

This is how you can do it in your terminal:

npm install requirejs

Once installed, you can implement require in vanilla JavaScript using the following code:

var requirejs = require('requirejs');

requirejs.config({
    // Top-level main.js/index.js require function
   // to load node modules relative to the top-level JS file  
    nodeRequire: require
});

requirejs(['foo', 'bar'],
function (foo, bar) {
    // foo and bar are loaded as per requirejs config,
   // but if not found, then node's require is used
   // to load the module 
});

For further information on requirejs, refer to their documentation here.

You can now incorporate environment variables into your vanilla JavaScript.

To learn more about this, visit this link.

Answer 4

Start by installing the dotenv npm package

You can do this in your terminal:

npm install dotenv

If you're working with vanilla JavaScript that doesn't support require, consider installing the requirejs npm package

This is how you can do it in your terminal:

npm install requirejs

Once installed, you can implement require in vanilla JavaScript using the following code:

var requirejs = require('requirejs');

requirejs.config({
    // Top-level main.js/index.js require function
   // to load node modules relative to the top-level JS file  
    nodeRequire: require
});

requirejs(['foo', 'bar'],
function (foo, bar) {
    // foo and bar are loaded as per requirejs config,
   // but if not found, then node's require is used
   // to load the module 
});

For further information on requirejs, refer to their documentation here.

You can now incorporate environment variables into your vanilla JavaScript.

To learn more about this, visit this link.

Answer 5

Answer №3

Utilizing environment variables in the backend of an application is crucial. While some may argue that a .env file can be created within a React app, it's important to note that React comes bundled with Node.js. Therefore, npm must be used for specific tasks.

In VanillaJS, you can also generate a .env file; however, the process.env global variable provided by Node won't be accessible during runtime. Node interprets the .env file as an object, enabling access through process.env.env_variable.

const env = {
    env_variable: "bgrtyaqQtyfadV0F08BHGvfsgskl",
    topic_id: "F08BHGvfsgsklgrtyaqQtyfadV0F08"
}

console.log(process.env.env_variable)

// prints bgrtyaqQtyfadV0F08BHGvfsgskl to the console

Answer 6

Utilizing environment variables in the backend of an application is crucial. While some may argue that a .env file can be created within a React app, it's important to note that React comes bundled with Node.js. Therefore, npm must be used for specific tasks.

In VanillaJS, you can also generate a .env file; however, the process.env global variable provided by Node won't be accessible during runtime. Node interprets the .env file as an object, enabling access through process.env.env_variable.

const env = {
    env_variable: "bgrtyaqQtyfadV0F08BHGvfsgskl",
    topic_id: "F08BHGvfsgsklgrtyaqQtyfadV0F08"
}

console.log(process.env.env_variable)

// prints bgrtyaqQtyfadV0F08BHGvfsgskl to the console

Creating a .env file using Vanilla JavaScript to securely store and conceal tokens

Answer №1

Answer №2

Start by installing the dotenv npm package

If you're working with vanilla JavaScript that doesn't support require, consider installing the requirejs npm package

Once installed, you can implement require in vanilla JavaScript using the following code:

For further information on requirejs, refer to their documentation here.

You can now incorporate environment variables into your vanilla JavaScript.

Answer №3

Similar questions

What steps can be taken to resolve the error "Incompatible types: TodoItem undefined cannot be assigned to type TodoItem"?

Setting the current time in an Animation using ThreeJS

What is the best way to choose an item from a dropdown menu using JavaScript?

The challenge of default Vuetify styles within a Nuxt environment

How to adjust transparency in Three.js objects

Validate that the input is an array

Having trouble getting webpack to transpile typescript to ES5?

A guide on linking an object in strapi V4 to a React app

The layout of the keyboard in Cordova has been altered

Utilizing multiple address parameters within a single-page application

What is the best method for utilizing the jQuery Selector in this particular web application?

What is the best approach to retain a user's selection for dark mode?

Utilizing a variable within an Angular filter: A step-by-step guide

Error encountered while deploying to Heroku: cross-env not detected in Node.js application

Tips for eliminating repeated values in a textbox

Triggering a Bootstrap 5 dropdown through code is only effective within the browser's developer console, rather than standard JavaScript implementation

Employing angularjs alongside a static jsonp file produces results on the first attempt

"Effortlessly search and replace text with a click of a button using jQuery - A beginner

Tips for placing <div .right> above <div .left> when the window is small, given that <div .right> is positioned to the right of <div .left> when the window is large

What is the way to instruct Mongoose to exclude a field from being saved?