JavaScript Security: Hide your Code?

Should you hide your frontend JavaScript code? CAN you hide your browser JavaScript code?

----------

• Follow @maxedapps and @academind_real on Twitter

See you in the videos!

----------

[kebman]

Biggest reason why I obfuscate my code: To hide my incompetence.

[NicholasMaietta]

If it's client side, client can see it. If it's server side, server can see it.

[abhishekdxt]

Stick to the point man..your videos are good, but you should focus on the point on title of video..

[GirishBalanagu]

Title is not match exactly what you want to convey... It is fully related cloud api restriction not JavaScript code.

[destinyjames]

Conclusion: Confidential data needs to be not sent to the browser, like using php.
Non-confidential data like data meant for a user can be sent to the user, and can be processed using js.

[VLS-Why]

I hate to disagree, but I'm not sure that you should EVER send your personal/company
API keys/database information to a client. If a client needs access to an external service that should most likely be something your backend can handle with either a POST route or a websocket if real time is needed. Just my 2 cents

[_Omni]

06:49 you can change the headers with curl so that won't help.

[samms]

Video summary: No problem showing your front end js code to the clients.

[theshermantanker]

Remember: People have cracked Minecraft's compiled and obfuscated Java bytecode and written tools to deobfuscate said code. Given that such a massive and complex game can still have it's (Compiled and double obfuscated, mind you) bytecode cracked, your Javascript code is basically helpless against anyone determined enough

[TheLucausi]

Finally a man that talks about this things!

[dealloc]

Keep in mind that restrictions does not mean that no-one can use it outside of your app (except IP addresses restrictions). Since the Firebase API is over HTTP, it is easy to craft request headers to suit the restrictions. E.g. set the Referrer header to be the same as the site (HTTP referrers restriction).

If someone wanted to use this on their site, they would need to create their own HTTP server, which sets the Referrer header to make the request and thereby circumvent the restriction.

API Keys however are the most secure way (for now) that you can control access and avoid misuse. API keys are usually seen as temporary (even though they might have a long lifetime). It is a good idea to renew your API keys every now and then—for example every 6 months or a year.

Also be very cautious when you use API keys that allow scoping (e.g. create/read/delete/update scopes) which may alter, delete or read data. If your API key is going to be public—as seen in this video—always keep the scopes to a minimum.

In cases where you may want to use an API, but don't want to share the keys, use your webserver which doesn't need to expose any keys to make a request to the third-party platform. Firebase is a special case, in that it is real-time so you would loose that real-timeness, unless you use for example web sockets to message back and forth—though this requires a lot of maintenance that might not be worth it.

[AndiSyafrianda]

I have struggled to English language but this video can easy to catch ... thanks

[ducodarling]

It's bad design baked right into the Google API, or whatever API.

If I were rolling this myself, all identifying info would be on the server. Requests would be made from the client, to the server where the API key would be inserted, then to whatever endpoint you're aiming for - like Firebase.

Just because Google said use it, doesn't mean it's the best option.

[priyanshujindal]

Starts by saying you can use this with any backend, gives a solution specific to firebase.

[kronhyx]

Excellent as always, I would like you to also do a GraphQL course, I am sure that many like me also need it, it is one of the few things that are missing from the Academind Youtube list

[x-]

The video content has nothing to do with the title

[fabriziotofanelli]

@Max, at @4:28 you are showing a minified code, but, at the bottom of that part you can see a { } button, and if you click on it, the code will be unminified.... easy to read, easy to understand =)

[speculativesapient]

Interesting. I developed a React application which is 100% React, therefore all the code is visible. I did worry about it being copied but it's not a app for production, just to demonstrate my skill.

[FGCVidz]

So essentially run a server-side app and use environmental variables. Then create an api for your js frontend to interface with. You can configure your own permissions on the user by coding them yourself since its your api. Mern stack + typescript it is.

[ProgramWithErik]

Good video. I consider all client side JavaScript fairly vulnerable. IP white listing isn't a great solution for production level apps. Although difficult, you can spoof the IP. As you mentioned at the end of the video really the most important services need to be in the back-end. Also a good idea to use SSL/TLS