jquery - How to access environment variables with vanilla javascript - Stack Overflow

admin管理员组

文章数量:1315777

I have an index.html and I need to pass some sensitive information to some JavaScript variables. This index.html contains plain javascript with jquery

so I am settning environmental variable like this:

USERNAME="123"
PASSWORD="password"

And I need to access this using javascript

<script>

var username = process.env.USERNAME;
var pw   = process.env.PASSWORD;

</script>

but this gives the error

Uncaught ReferenceError: process is not defined

Maybe this is because I am using vanilla javascript. And I can't use any other framework other than jquery

Can someone help me how to do this?

I have an index.html and I need to pass some sensitive information to some JavaScript variables. This index.html contains plain javascript with jquery

so I am settning environmental variable like this:

USERNAME="123"
PASSWORD="password"

And I need to access this using javascript

<script>

var username = process.env.USERNAME;
var pw   = process.env.PASSWORD;

</script>

but this gives the error

Uncaught ReferenceError: process is not defined

Maybe this is because I am using vanilla javascript. And I can't use any other framework other than jquery

Can someone help me how to do this?

• javascript
• jquery

Share Improve this question Follow asked Nov 13, 2020 at 18:12 Jananath JayarathnaJananath Jayarathna 20911 gold badge55 silver badges1111 bronze badges 8

• 2 process is only available in a node server, not in the browser. – Daniel Beck Commented Nov 13, 2020 at 18:16
• 1 If the variables are ing from the server, then you should create an endpoint which returns the username and password and fetch from the client. – Emiel Zuurbier Commented Nov 13, 2020 at 18:17
• 1 Well, it might help if you could show actual HTML of where you define those variables so we have some more context. :) – Emiel Zuurbier Commented Nov 13, 2020 at 18:27
• 2 It's not prudent to put sensitive info like passwords and usernames in the frontend. Everyone can see that when the page is loaded in the browser. – BlackMath Commented Nov 13, 2020 at 18:27
• 1 Ah, well that makes sense. Your environment is on the server, and your website runs on clients. If you're making some login / register mechanism then you should keep all sensitive info on the server. Anything on the frontend is public. If this is the case then creating an endpoint on the server where you can validate a user and password would be your best option. And FYI, every JS library and framework is built with Vanilla JavaScript. No framework or lib is more powerful than the language it is built with. – Emiel Zuurbier Commented Nov 13, 2020 at 19:00

 |  Show 3 more ments

2 Answers 2

Sorted by: Reset to default 5

I had this exact issue to deal with and I was able to create a working solution using this article. For this answer, I'll summarise the steps I took for a project deployed to Netlify and already modified to fit your question, but you can check out the article to see the base example and also learn more.

Note: This solution is ideal for small personal projects where the information is not exactly sensitive but you just don't want them displayed so visibly in your code. Do not use for larger projects that require a reasonable level of security measures.

If your project is already deployed to Netlify, or a similar platform where you can add build/deploy mands:

1. Go to the build settings
2. If the script file you want to use the variables for is in a folder, set the build mand to this: cd DIRECTORY-FOR-THE-SCRIPT-FILE && echo -e "export const USERNAME="123";\nexport const PASSWORD="password";" > config.js
3. If the script is in your root folder, set the mand to this echo -e "export const USERNAME="123";\nexport const PASSWORD="password"; > config.js
4. In your index.html file where you import the script, set your script tag to include this attribute type="module" i.e <script src="./index.js" type="module"></script>
5. In your script file, import the variables by adding this line to the file: import {USERNAME, PASSWORD} from "./config.js"
6. Trigger a redeploy manually on Netlify, or it will be deployed automatically if you already set automatic deploys for the repo.
7. That's all!

This solved mine and I hope it helps anyone else✨.

So what is your environment? javascript runs in the frontend, where are you setting the env variable? You may be able to use something like fs - https://www.npmjs./package/file-system to read from a file on the operating system, but I would not imagine most browsers would allow this

本文标签： jqueryHow to access environment variables with vanilla javascriptStack Overflow