Why are my environment variables explicitly visible in my Vue application through Google Chrome Inspector, and not obfuscated?

Question

Hello everyone,

I have built a Vue app, and when I build the application using npm run build, the app builds successfully. However, when I look into the Google Chrome inspector, I notice something.

49650: function(e, t, r) {
            var i = r(74971);
            function a(e, t) {
                if ("string" === typeof e) {
                    if (["legacy", "regional"].indexOf(e.toLowerCase()) >= 0)
                        return e.toLowerCase();
                    throw i.util.error(new Error, t)
                }
            }
            function s(e, t) {
                var r;
                if (e = e || {},
                e[t.clientConfig] && (r = a(e[t.clientConfig], {
                    code: "InvalidConfiguration",
                    message: 'invalid "' + t.clientConfig + '" configuration. Expect "legacy"  or "regional". Got "' + e[t.clientConfig] + '".'
                }),
                r))
                    return r;
                if (!i.util.isNode())
                    return r;
                if (Object.prototype.hasOwnProperty.call({
                    VUE_APP_URL_API: "https://ms-brick.loc:31060/api",
                    NODE_ENV: "production",
                    BASE_URL: "/"
                }, t.env)) {
                    var s = {
                        VUE_APP_URL_API: "https://ms-brick.loc:31060/api",
                        NODE_ENV: "production",
                        BASE_URL: "/"
                    }[t.env];
                    if (r = a(s, {
                        code: "InvalidEnvironmentalVariable",
                        message: "invalid " + t.env + ' environmental variable. Expect "legacy"  or "regional". Got "' + {
                            VUE_APP_URL_API: "https://ms-brick.loc:31060/api",
                            NODE_ENV: "production",
                            BASE_URL: "/"
                        }[t.env] + '".'
                    }),
                    r)
                        return r
                }
                var o = {};
                try {
                    var n = i.util.getProfilesFromSharedConfig(i.util.iniLoader);
                    o = n[{
                        VUE_APP_URL_API: "https://ms-brick.loc:31060/api",
                        NODE_ENV: "production",
                        BASE_URL: "/"
                    }.AWS_PROFILE || i.util.defaultProfile]
                } catch (p) {}
                if (o && Object.prototype.hasOwnProperty.call(o, t.sharedConfig)) {
                    var u = o[t.sharedConfig];
                    if (r = a(u, {
                        code: "InvalidConfiguration",
                        message: "invalid " + t.sharedConfig + ' profile config. Expect "legacy"  or "regional". Got "' + o[t.sharedConfig] + '".'
                    }),
                    r)
                        return r
                }
                return r
            }
            e.exports = s
        },

The app works perfectly, but I'm wondering about this because I can see my environment variables explicitly, like this VUE_APP_URL_API and not obfuscated

Could anyone help me to fix this? I'll appreciate.

I hope the value of each variable is obfuscated

kissu · Accepted Answer · 2024-06-20 01:15:51Z

1

How would you hide environment variables on a client-side app? You cannot.

It is supposed to be visible and available to the client for the app to work correctly.
You will need to use a proxy of some sort remotely on a backend of some sort to hide those.

Plenty of answers are available on the platform about that subject, an example.

answered Jun 20, 2024 at 1:15

kissu

47.3k16 gold badges94 silver badges196 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Eliyonai Molero Over a year ago

I mean, I don't want to hide... i just want to obfuscate. I have another Vue application and I can't see explicitly my environment variables, and its the same Vue version, the same packages...

kissu Over a year ago

@EliyonaiMolero what will the obfuscation help you with? If it's some sensitive tokens, it's not a good idea. The rest, is mostly just making a worse experience to your visitors for no benefit really.

Collectives™ on Stack Overflow

Why are my environment variables explicitly visible in my Vue application through Google Chrome Inspector, and not obfuscated?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related