1 00:00:02,420 --> 00:00:09,800 So what could go wrong when we write Javascript code or when we expose our Javascript code? For that, 2 00:00:09,810 --> 00:00:15,410 we also have to differ between writing code that runs in the browser and writing code that runs on the 3 00:00:15,410 --> 00:00:16,280 server 4 00:00:16,550 --> 00:00:23,630 and I will start with something that is only relevant if you're writing browser side Javascript code 5 00:00:23,630 --> 00:00:30,940 and that would be security details in your code or private information in your Javascript code. 6 00:00:31,340 --> 00:00:36,620 We'll also have a look at cross site scripting attacks though which is also relevant for browser 7 00:00:36,620 --> 00:00:38,540 side Javascript code. 8 00:00:38,540 --> 00:00:46,070 I'll briefly touch on cross site request forgery or CSRF attacks which is related to both frontend 9 00:00:46,070 --> 00:00:51,530 backend code but which only works or only is a thing if you have some backend you're sending data 10 00:00:51,530 --> 00:00:57,320 to and therefore I'll briefly talk about that as well and I'll revisit this concept of cross origin 11 00:00:57,320 --> 00:00:59,780 resource sharing we already talked about earlier. 12 00:01:00,410 --> 00:01:02,900 So let's start with the security details in your code, 13 00:01:02,900 --> 00:01:04,720 what do I mean with that? 14 00:01:04,790 --> 00:01:11,390 The important thing to understand about Javascript in the browser is that your Javascript code is part 15 00:01:11,480 --> 00:01:16,070 of what the browser downloads and runs in the browser, 16 00:01:16,160 --> 00:01:22,730 so all your code runs on the machine of your page visitors and it's important to understand that your 17 00:01:22,730 --> 00:01:25,760 Javascript code can be read by them, 18 00:01:25,790 --> 00:01:31,410 anyone who is visiting your page can read your Javascript code that runs on this page, 19 00:01:31,460 --> 00:01:36,100 it's not hidden, it's not compiled to some unreadable machine code, 20 00:01:36,170 --> 00:01:41,680 it's totally available to anyone visiting your page and that is super important. 21 00:01:41,700 --> 00:01:45,370 Therefore any security relevant details you have in there, 22 00:01:45,440 --> 00:01:52,670 any confidential data you have in there is exposed to your users and therefore it should not be in there, 23 00:01:52,700 --> 00:01:59,810 you should not have security relevant information or confident data in your client side, in your browser 24 00:01:59,810 --> 00:02:04,920 side Javascript code because attackers may be able to abuse that exposed data, 25 00:02:05,000 --> 00:02:10,250 for example if you have your database credentials in there, attackers could read them and could connect 26 00:02:10,250 --> 00:02:15,740 to your database to then read your data, change your data or do whatever they want to do or if you're 27 00:02:15,740 --> 00:02:18,470 storing some client related data, 28 00:02:18,500 --> 00:02:24,290 so about all your users, not just this user who's visiting your page but all users of your page, 29 00:02:24,410 --> 00:02:29,570 if you have something like this in your browser side Javascript code, well then anyone can read it and 30 00:02:29,570 --> 00:02:34,550 you might expose information about other people to all users. 31 00:02:34,760 --> 00:02:40,760 So therefore because of this database example or any other data that might be confidential, you should 32 00:02:40,760 --> 00:02:43,190 ensure that such does not end up in there 33 00:02:43,190 --> 00:02:48,600 and let me show you what I mean. I'm back in our practice application we wrote, 34 00:02:48,600 --> 00:02:54,380 so this application and you might remember that in the debugging section, we had a look at the sources 35 00:02:54,390 --> 00:03:00,630 tab and there we actually could read the source code of this page, here in the assets scripts folder, 36 00:03:00,630 --> 00:03:01,730 there it is. 37 00:03:01,860 --> 00:03:06,910 Now of course here, we're seeing the code after webpack worked on it. 38 00:03:06,930 --> 00:03:12,120 This is the code in development mode and therefore if you scroll enough at some point, you will find your 39 00:03:12,120 --> 00:03:18,240 actual code and it will be quite readable because it's not minified because it's not optimized 40 00:03:18,270 --> 00:03:19,200 at all. 41 00:03:19,230 --> 00:03:26,550 So all of this actually will be quite accessible and quite readable if you scroll down far enough and 42 00:03:26,770 --> 00:03:28,920 therefore anything you have in there is exposed, 43 00:03:28,920 --> 00:03:34,320 for example if I scroll also the bottom where our script code should actually be found, 44 00:03:34,560 --> 00:03:40,620 we see here it's hinting at location.js and if we scroll to the right, we actually find our code in 45 00:03:40,620 --> 00:03:41,390 here, 46 00:03:41,430 --> 00:03:42,740 this all inline code, 47 00:03:42,750 --> 00:03:48,400 that's our code, it's of course a bit hard to read but it is readable and it's not just us who can read 48 00:03:48,400 --> 00:03:51,440 that, anyone visiting our page can read that. 49 00:03:51,450 --> 00:03:56,820 Now once you build for production, this will be optimized and it will be more unreadable 50 00:03:56,820 --> 00:04:01,160 Bbut there are tools to make it a bit more readable, actually built here in the dev tools 51 00:04:01,170 --> 00:04:05,310 if you click on pretty print, this code is formatted such that it's a bit easier to read 52 00:04:05,370 --> 00:04:10,770 if it were minified and besides that if someone is really interested in getting your data, there 53 00:04:10,770 --> 00:04:16,650 are certain pieces of data, like your database connection string and your password which is just a string 54 00:04:16,710 --> 00:04:21,380 which of course will always be the same string, no matter if the other code is minified or not, 55 00:04:21,390 --> 00:04:24,080 so such data can be found and can be used. 56 00:04:24,210 --> 00:04:30,810 So any data which could be abused by other people should not go in there, should not go into your client 57 00:04:30,810 --> 00:04:32,840 side Javascript code. 58 00:04:32,850 --> 00:04:38,900 Now in this project specifically, you might be wondering about things like our Google API key, isn't that 59 00:04:38,910 --> 00:04:41,640 for example a security relevant detail? 60 00:04:41,640 --> 00:04:48,390 Well it could be but in Google's case or in the Google API key case here, you can actually restrict 61 00:04:48,420 --> 00:04:51,850 the usage of that key in your Google developer console, 62 00:04:51,960 --> 00:04:58,080 there you could restrict that only certain IP addresses can use that key so that only the IP address 63 00:04:58,080 --> 00:05:02,940 where you are hosting your application can really send requests with that help of that key 64 00:05:02,940 --> 00:05:09,950 and if anyone steals that key and tries to use it, Google will block requests by that person's IP address. 65 00:05:09,960 --> 00:05:16,570 So this is some security mechanism which a lot of APIs offer if you use their API keys and therefore 66 00:05:16,570 --> 00:05:23,490 this is not a security relevant detail. That would be a different thing though if we would expose data 67 00:05:23,580 --> 00:05:26,400 from our backend, from this Node.js application. 68 00:05:26,400 --> 00:05:31,590 Now keep in mind here, I loaded a different project, this is the Node.js application we wrote and there 69 00:05:31,590 --> 00:05:38,070 for example in the location.js file, we are connecting to the MongoDB database, here I got my password 70 00:05:38,070 --> 00:05:39,980 and my user name I use there. 71 00:05:40,050 --> 00:05:45,720 Now this is data which is not exposed to our users because this is now actually only running on the 72 00:05:45,720 --> 00:05:47,210 server through Node.js, 73 00:05:47,220 --> 00:05:53,820 this runs on a machine and the user will never be able to see that code because this Javascript code is never 74 00:05:53,820 --> 00:05:55,030 sent to the user, 75 00:05:55,110 --> 00:05:57,980 it's never attached to the outgoing HTML page, 76 00:05:58,020 --> 00:06:00,750 it's not loaded by any outgoing HTML page. 77 00:06:00,780 --> 00:06:07,230 So this code here is secure, it runs on a server and unless users can access our server, which of course 78 00:06:07,230 --> 00:06:11,400 requires them to effectively hack our server, they can't read that code, 79 00:06:11,400 --> 00:06:17,520 so this code is secure but if this code here were in our client side Javascript code, 80 00:06:17,580 --> 00:06:23,880 so in the code which is loaded by the browser and which the user can see, then users could see that data 81 00:06:24,060 --> 00:06:25,290 and abuse it. 82 00:06:25,290 --> 00:06:31,760 So long story short, don't put any important, confident information into your client side code, 83 00:06:31,770 --> 00:06:38,040 users can read it and there is absolutely no way for you to avoid that. You can make that code harder 84 00:06:38,040 --> 00:06:43,230 to read, you can minify it and so on but it will always be readable and people can therefore read it.