I have some JavaScript variables in my code and I need to prevent users from seeing their values when they open the browser’s developer console. Right now anyone can just press F12 and view all my variable contents which is not what I want.
let appVersion = 2.1;
let clientId = 42;
let secretToken = "confidential_data";
Is there a way to make these variables invisible or protected so they don’t show up in the console? I’m particularly worried about the secretToken variable being exposed to users who inspect the page.
Unfortunately, there’s no reliable way to completely hide JavaScript variables from determined users since all client-side code is inherently accessible. However, I’ve dealt with similar concerns in my projects and found some practical approaches that work well. The most important thing is to never put truly sensitive data like API keys or authentication tokens in client-side JavaScript in the first place. For data that needs some level of obscurity, you can use techniques like variable name obfuscation through minification tools, or store values in closures within immediately invoked function expressions which makes them slightly harder to access directly from the console. Code splitting and dynamic imports can also help by not loading sensitive configuration until needed. But honestly, the best solution I’ve implemented is moving any confidential logic to the server side and only exposing what’s absolutely necessary to the client through secure API endpoints.
I ran into this exact problem when building a client dashboard last year. The harsh reality is that anything in JavaScript can be accessed by users who know what they’re doing. I learned this the hard way when a client pointed out they could see configuration values I thought were hidden. What actually solved my problem was restructuring the application architecture. Instead of storing sensitive values client-side, I moved them to environment variables on the server and created API endpoints that return only the data needed for specific operations. For the secretToken in your example, that should never exist in frontend code at all - handle authentication through secure HTTP-only cookies or have your backend generate short-lived tokens. The appVersion and clientId seem less critical, but even those I now fetch from a server endpoint when the app initializes. It requires more backend work but eliminates the security concern entirely.
honestly mate you cant really hide js variables from browser tools. ive tried obfuscation and other tricks but anyone with basic dev knowledge will still access them. your secretToken should definetly not be in frontend code at all - thats asking for trouble. move sensitive stuff server-side asap.