JavaScript Security: Hide your Code?
Vložit
- čas přidán 9. 07. 2018
- Should you hide your frontend JavaScript code? CAN you hide your browser JavaScript code?
Join the full JavaScript course: acad.link/js
Exclusive discount also available for our Node.js course: acad.link/nodejs
Check out all our other courses: academind.com/learn/our-courses
----------
• Go to www.academind.com and subscribe to our newsletter to stay updated and to get exclusive content & discounts
• Follow @maxedapps and @academind_real on Twitter
• Join our Facebook community on / academindchannel
See you in the videos!
----------
Academind is your source for online education in the areas of web development, frontend web development, backend web development, programming, coding and data science! No matter if you are looking for a tutorial, a course, a crash course, an introduction, an online tutorial or any related video, we try our best to offer you the content you are looking for. Our topics include Angular, React, Vue, Html, CSS, JavaScript, TypeScript, Redux, Nuxt.js, RxJs, Bootstrap, Laravel, Node.js, Progressive Web Apps (PWA), Ionic, React Native, Regular Expressions (RegEx), Stencil, Power BI, Amazon Web Services (AWS), Firebase or other topics, make sure to have a look at this channel or at academind.com to find the learning resource of your choice! - Věda a technologie
Biggest reason why I obfuscate my code: To hide my incompetence.
True it is.
I just thought about it and then saw your comment.
🤣
I do it to make it HARDER to steal my work
obfuscation is not the solution
@Pavel Rakowski please show me a tutorial how exacty it works
If it's client side, client can see it. If it's server side, server can see it.
Thanks captain obvious
Like I've got a coock but at the toilet still using the pussy...
@@cipherxen2 😂😂
He sounded so dumb right?
Tldr: hide JavaScript? Nope
Title is not match exactly what you want to convey... It is fully related cloud api restriction not JavaScript code.
06:49 you can change the headers with curl so that won't help.
May be we could implement JWT or CORS
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
But you can then still send a request to that backend API to proxy the request to the API-keyed API. You can of course control access (as described in the video) but you can still do that on many APIs - essentially rendering the key alone worthless.
It really depends on the scope of the API key-and whether it is meant to be public or private.
As long as the key can't access anything outside of your desired scopes, it is perfectly fine to store them client-side.
Some APIs also allow you to write "rules", which you can use to allow/deny access based on your own conditions with a script or similar.
Well usually that's a public key they see, the secret key is in the server end which can't be seen in the browser.
Client will however be in touch With API true Wireshark and intercept the pakets with API secret... Even SSL can't help... I can hack it anyway....
I agree with this logic.
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.
I have struggled to English language but this video can easy to catch ... thanks
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
Video summary: No problem showing your front end js code to the clients.
u saved me 10 mins, thank you :D
@@pneujai 😁️
@@sergsergesrgergseg why do u put backend codes in clients
Can we also use environmental variables? Some js frameworks allow that.
Stick to the point man..your videos are good,but you should focus on the point on title of video..
this
Yaap
I think he explained it very well
@@DerClaudius window
I appreciate his help, but yeah, he's long-winded for sure.
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.
Hi. I was wondering - (for paid-for chrome extensions) with Google stopping their payments and licensing api's - previously you couldn't read the client-side code if it's a purchased extension if you use the licensing api, but soon that wont be the case. So for example, with the code for a purchased extension that's a content script - the code would become visible. Is there a way to prevent this please? Not so bad maybe if it relies on a lot of server side code as well but if its just say, a content script that a developer wants to charge for then its a bit of a problem. Thank you
I'm also using firebase and placing the api key in frontend code also makes me worried. What if we store the api key in the backend and we just request that. But before sending it to client, we encrypt it first and decrypt it once we receive it and store it to our secured local state. It is still possible to read the logic and decrypt the api key but it should be hard to that. However, people can still extract the api key by looking at the network requests. It is included in the api url, header, body etc.
How can I protect the nodejs source codes Academind? because I want to upload my application to a cloud server ( maybe AWS ) and I do not want cloud staff access to my source codes! thanks
you also can use global variables when you host to keep it safer
How should I implement google address autocomplete because getting that data from backend can be slow and if i keep the api key on the frontend then people can use my quota .. so how do you advise me to handle that?
But how the other website encrypt their code? example like facebook google when u do inspect element, all the javascript code is unreadable
Great video. This was one of my concerns but didn't have time to look into.
Just fantastic to read that the video was helpful for you, thank you very much for your comment!
HI will you please upload a course related to web application security with XSS or CSRF kind of thing especially for Angular pls?
Thanks
I am experiencing exact same problem, my API key is being exposed in the web console. From UI, my request passes through AWS Gateway, that requires API key for my request to pass through to server. What could be the better way to hide my API key (in Angular)from client.? Thank you
Great video as usual! Thanks for sharing the information!
Also, cloud services let you create environment variables that are not "visible" in the code
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 CZcams list
Thanks a lot for your great feedback and for your suggestion Randy! GraphQL is indeed an interesting topic, I do not have any concrete plans regarding a course as of now though, but this might of course change in the future :)
Randy Tellez Galan I agree
Academind I also want to vote for a GraphQL course
React - Relay - GraphQL would be dopeski. :D
So as HTML5 Game Developers where content is 100% in the client, we're essentially screwed?🤔
That is why we have cors so we can restrict call by domain. So we can accept the call to our api only if it comes from a specific domain. For Native clients like mobile and desktop we can obfuscate the code
So if I have a use-case, in which I have developed a PWA for a client of mine, and the users need half of the time, open and use the PWA in an offline mode (they just read PDFs btw), I as a developer, still have to send a POST request to my own custom-made API?
in other words, how can I still log-in in an offline PWA app?
You almost answered my exact question! I have a Vue front end, with a Django backend (all running off the same host & port (proxied), using sessions). As it stands, a user can get full access to the front-end of the system by faking a login on the client-side, i.e. flipping a 'loggedIn' boolean. They will not get any data, but they will see the full UI, and I don't think I want this. How can that be prevented?
Lazy loading modules with canLoad guards is how it's being done in Angular. However it's always possible to circumvent with enough effort. And it shouldn't matter because your front-end should not contain the value, but access the value of your application.
thanks man this is really helpful. can you do a follow-up on that AWS Lambda function or a secure web-service on how to log data or login users securely without exposing the API credentials?
Really Helpful Max.
Hi,There
as u have shown that we can see are Js code through inspect element and also we can hide it for security reasons,can u please provide me solution like i have uploaded my website on a free domain and though i can see all code and files from inspect element,i want to hide everything it is showing complete directory with folder names and files and can be downloaded easily
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.
Also, if you'd like to restrict it even further some APIs provide a way to define your own conditions, usually called "rules". This allows you to write scripts that you can use to restrict the access on behalf of the third-party, without the need of your own backend.
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
I wonder how that IP whitelist works, because the requests are being made from the end-users' browser, so any IP address can be doing the request really. Also, if the domain checking is based on the referrer header, that can be very easy to spoof as well. So that essentially means it can be easily abused. What we should be discussing is what sort of features can really protect you in this case.
Yup, like without SSL you can't even use Stripe API.
The best is to have to api keys. One for --prod and one for --dev. Then lock only one.
if you want to store this client-side why would you not just set the keys as an environment variable so they accessible to the dev but they are not rendered to the DOM for client-side viewing? Can someone help me understand where my logic is wrong here so that I can improve this in the future? -Thank you
How to restrict jQuery Ajax call from browser console window?
What if somebody change headers by curl? This can avoid our whitelist
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.
to be honest I am a bit flinched regarding NodeJS backend. I am a Newbie but everyone is saying better code your backend in Python, Java, C# etc. I wanted to learn Python anyways since it opens you a lot of doors additionally.
How about config variables?
Cant we just load the configs from process.env by tweaking the webpack? It wont make it completely secured but less vulnerable?
Cmd + f is still a problem. However you can use this to prevent making values available in git. Though if it’s available in the front-end, that probably doesn’t help
Hi max your video is awesome, but what about secure an api that an app is connected with in this position we can't set acssess cors to the client adress because it is an app ...
Thanks for you 😍😘😘
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.
In the Google API Console, the IP restriction is only for server side requests. For the front end you would have to use the "HTTP referrers" restriction, and the problem is that the referrers header can be easily spoofed.
And if you create a lambda function (or hide the key on the server side in general) doesn't your function merely act as a proxy to the API service? Couldn't somebody create a script that uses your lambda function to fill your newsletter db with random emails? (or in cases of paid APIs to increase your bill)
The only sort of solution I found is to have a rate limiter in the server side function (or the API service itself, if possible), so that e.g. allow only 3 newsletter sign-ups from the same IP within a certain period.
I actually did talk about this, too. Yes, the function is a proxy and yes, you can of course call it. But since I also use API Gateway together with Lambda, I can control access there. It is one way of creating a wrapper where you can add an IP whitelist for cases where the API you're wrapping doesn't give you a native way of doing that.
Finally a man that talks about this things!
Thanks so much, this honestly means a lot to me!
@@academind Can't someone copy the firebase config credentials, embed it in their own app, and then write queries to get all the data?
5:37, so lets say somebody copies the api key and creates a fake, phising website and creates a form, if i logged in in the fake.com website, will the fake.com website be able to steal data?
White listing isn't available for most APIs. The best solution is to invoke the API from the server side.
@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 =)
That is exactly what I mean => The code might look unreadable but it's actually pretty easy to read.
Hi Max, I am new with React app. I learn videos tutorial from your udemy channel. I got some problems with building react project and deploy build files to herokuapp. And my full source code is completely show extract of my project source code look like. Please help me, Thanks
Thanks for this! Great explanations.
Thank YOU for your great feedback!
can you download source code of website whose code is locked
May be we could implement JWT or CORS?
Hey thanks max for such a good tutorial. :)
Thank YOU for your comment Siddhesh, happy to read that you like the video!
Best explanation!
Starts by saying you can use this with any backend, gives a solution specific to firebase.
He explained that it could be applied to any backend and it's true. I did it with my nodejs server.
Can't someone copy the firebase config credentials, embed it in their own app, and then write queries to get all the data?
Ok, but i would have implemented it in my Backend-Server and send the user-credentials to my own API wich interacts with Firebase.
This way no one can see my access-Keys and i can use the resulting data (if i wanted to) and implement my own logic to keep my stuff save.
Just a tought i had ^^
The video content has nothing to do with the title
Great, great vídeo! Thanks and Cheers from Brazil!
Thanks a lot Flavio, really cool to read that! Best wishes from Germany :)
I faced this issue a while ago. Seems like we solved it the same way.
Isn't http referrer too easy to manipulate for someone who is going to try to steal your API key from chrome dev tools?
Hey Max, i just deployed a MERN app in heroku, when i inspect the source in browser it exposes the src/components folder of the react client part of my app. Hope you can help me with whats wrong with my setup
First off, ensure that you always deploy your app in production mode.
Secondly, the reason for this is source maps. It can be helpful if you use things like Sentry to get accurate and detailed errors, but does give people the possibility to view the actual source code, depending on the variety of source maps.
Find documentation about how to change how source maps are generated for your framework, and see if there is any settings which limits the output to only the necessary parts that you need.
If you use webpack, you can set the devtool setting to e.g. `nosources-source-map` to completely hide the source code and only retrieve line numbers. This comes with the limitation of not being able to see the exact problem, though.
Using sever side frameworks like Web Firm Framework is more secure.
its not just api key or whatever . what about changing the code? if you make a front page game and you dont wanna put the code in the server what if the client change the rules of the game? for example change the time clock. if you have thousands of users playing simultaneously you dont wanna calculate the time and every movements and the rules in your server
There is another problem that come next with some vulnerable npm packages like (st, moongose=12, ....)
Hey Max, nice video. How about fetching the key from a config file?
Thanks man you are the best 😃
Thanks a lot for your great feedback, YOU are the best!
Thats some very valuable information. Thanks. Appreciate the detailed explanation. Keep it up
Thank you :)
Hi Max, your explanations are always out of the world
I like the way you explain
So great to read that you like my explanation style Rohit, thank you very much for your comment!
Academind my pleasure
Moin Max, was hast du für dieses Jahr noch alles an Kursen oder Videothemen geplant ganz grob? Ich finde fast alle Themen interessant und komme jetzt schon kaum hinterher das Meiste zu schauen :D
Das kann ich ehrlich gesagt nicht genau sagen Lukas, ich genieße es das relativ spontan zu entscheiden, daher habe ich keinen genauen Plan bzgl. zukünftiger Themen bzw. ändere auch meine groben Planungen öfter mal ;)
Thanks for so good explanation!
Dear Max ... Can I put the API key in cloud function if my project host in firebase ?
Thanks
Your cloud function code will not be accessible. But anyone with the URL to it can send a request and execute it of course, that's what I meant with the "wrapping function". But this gives you more control of course and (as you correctly stated) ensures that your key isn't directly shared.
In Angular => put firebase credentials inside environment.ts file.. then init you FirebaseModule inside app.module.ts
Another great video!!! Next time could you make a video about MVC(Model-View-Controller). Thank you.
Thanks for the nice feedback and suggestion! I'll note it but I believe there already are plenty of videos on that topic. So it's not #1 priority right now to be honest - still noted! :)
Thanks for video - if possible please help me make a video on how to block people from copying content/texts from a website.
I come across such sites that prevent visitors from copying text and I wonder how it is done.. Thanks
Oston Code Cypher
google that very question you should get an answer. There are news sites 4 example that only let you read half an article but inside the code (if poorly written, you can see the entire article)
What about .env files for hiding api keys? Isnt that a secure option?
Not if the keys end up in your frontend JS code - which they will if you need them there.
Can you please show us how to user firebase sdk in our apps
Thank you so much for this
Thanks a lot for your comment!
exactly what i need to know .. thank you!!
Meaning you can really hide js just to don't show confidential information, to add i believe extra confusion to people inspecting your code you can minify it
Awesome video straight to point with perfect explanation i really got allot of questions answered for me
It really makes me happy to read that the video was helpful for you, thank you very much for sharing this fantastic feedback!
Great stuff...
Good insights! Thanks
Happy to read that Tomasz, thank you for your comment!
Thanks bro but i don't want anybody to steal my alert('are you sure you want to leave this page') logic magic code😃
That is all too understandable!
Hello Max, if I want to make an Angular library like Firebase, in the sense that I want it to have an ApiKey. Is there an article that you can pass me to achieve this?
Great video by the way.
I got no article in mind unfortunately, sorry :/
Thanks for your nice feedback! :)
this video has everything to do with the title. i got an answer to something that was bothering a lot on watching this the 3rd time. i dont know why i didn't get it before. i think people who are into spa will find that the title of the video goes well with the content (since i noticed some comments about title and content )
Can't someone copy the firebase config credentials, embed it in their own app, and then write queries to get all the data?
Atleast newbies like me can't copy
Which IDE you are using? is it Visual Studio?
I use Visual Studio Code.
Thanks , Max i would love to take your course on Javascript if u have :) u are the best instructor
Thanks so much for your great feedback Vince. I do have two JavaScript courses actually, a general JS course (www.udemy.com/javascript-bootcamp-2016/learn/v4/?couponCode=ACAD_M) and an ES6 course (www.udemy.com/es6-bootcamp-next-generation-javascript/?couponCode=ACAD_M)
Thanks bro :)
Very Helpful Video
I guess the point is you don't hide your code, you just don't put anything needs hiding in it.
Can't someone copy the firebase config credentials, embed it in their own app, and then write queries to get all the data? Especially like usernames, emails, etc
what about in react native? can I hide code there?
It is a mobile app sqo i dont think someone can see the source code
hey sir I am taking you react js I personally want to thanks you for you effort
Thank you so much :)
Thank YOU for your comment Dharmaraj!
Tnks Max, U are the best
YOU are the best Daniel, thank you very much for your comment!
Excellent
sir I want to hide html comment "/" from source in my website. please help me.
put it in
or what ever your backend programming language
and will make comment only exist in source code like php code
Where did you exactly hide your code???
this does make sense,y ou talking about hiding code or you talking about firebase
Why even have an api token? Just autoroize the domain
Really enjoying your Udemy courses...especially Vue.
It's really great to read that Rich, thank you very much for your comment and for your support!
Can’t hide it but you can make it almost unreadable
Not really you can unobfuscate code quite easily and if people want to crack your code they can do it for games there where cases of games getting cracked before they come out.
Filip Cordas that’s what I said