- 00:00:02 hey welcome to this video
- 00:00:03 there is one question which i get quite
- 00:00:05 a lot is my javascript code
- 00:00:08 secure because you probably
- 00:00:11 saw before that if you open the
- 00:00:13 developer tools on a page
- 00:00:15 created by you and it's the same for
- 00:00:17 other pages by the way
- 00:00:18 you can inspect the javascript code
- 00:00:20 there in the chrome developer tools
- 00:00:22 you can simply go to sources and boom
- 00:00:25 you see
- 00:00:26 all the javascript code of that project
- 00:00:30 so all the javascript code running in
- 00:00:32 the browser but doesn't that mean that
- 00:00:34 your project is insecure let me answer
- 00:00:37 this question
- 00:00:38 in this video
- 00:00:42 so we can inspect all the javascript
- 00:00:44 code and this is a very simple
- 00:00:46 angular application here now in the
- 00:00:49 sources tab of the chrome developer
- 00:00:50 tools we can see the javascript files
- 00:00:53 that were
- 00:00:53 loaded as part of this website here and
- 00:00:56 this website happens to use angular so
- 00:00:59 what we see here in the end
- 00:01:00 is the compiled angular code because we
- 00:01:03 obviously in case you know angular
- 00:01:05 we write angular with typescript and a
- 00:01:07 lot of cool features
- 00:01:08 but in the end all of that gets compiled
- 00:01:10 to javascript code
- 00:01:12 that runs in the browser which doesn't
- 00:01:13 support typescript for example
- 00:01:15 so here we get the compiled javascript
- 00:01:17 code and in there in the end we see
- 00:01:19 all the code we wrote in the main.js
- 00:01:21 file here for example
- 00:01:23 if we scroll through it we could find
- 00:01:25 some snippets of
- 00:01:26 our app some code which belongs to our
- 00:01:29 app which we
- 00:01:30 wrote just compiled to javascript now i
- 00:01:33 got a very simple app here i got a login
- 00:01:34 screen can also switch to the sign up
- 00:01:36 screen
- 00:01:37 get some validation in place and if i do
- 00:01:39 sign up nothing will work as of now
- 00:01:41 because there's one thing i still have
- 00:01:43 to add
- 00:01:44 i'll use firebase here but you could use
- 00:01:46 any backend
- 00:01:47 what i do have to add here in the case
- 00:01:49 of firebase is my
- 00:01:50 api key and for that i created a
- 00:01:53 firebase
- 00:01:54 project but again that could be the case
- 00:01:56 for any backend
- 00:01:57 you might need some api key to send
- 00:02:00 requests there
- 00:02:01 or you've got some other parts some
- 00:02:03 other information in your code
- 00:02:05 where you're not sure if you can share
- 00:02:07 that
- 00:02:08 so let's work on firebase here quickly i
- 00:02:10 already created a project
- 00:02:12 here it is and in that project
- 00:02:15 i won't do anything here i just want to
- 00:02:17 enable authentication so in
- 00:02:18 authentication let's
- 00:02:20 turn this on like this and again not
- 00:02:23 really related to firebase it's just a
- 00:02:25 convenient to use
- 00:02:26 dummy back-end here where i don't need
- 00:02:28 to write a lot of code i need my api key
- 00:02:30 then
- 00:02:31 so this key let me copy that and add it
- 00:02:34 here we'll replace that api key with
- 00:02:37 that
- 00:02:38 with that replaced what i can do is i
- 00:02:40 can go back to my angular app
- 00:02:42 and let me open the console now
- 00:02:46 in there i can now start creating users
- 00:02:49 so i can create a user here with
- 00:02:51 testedtask.com
- 00:02:52 let's pick a password sign up it's
- 00:02:54 loading and i'm authenticated
- 00:02:56 this also is a success response sent by
- 00:02:59 firebase
- 00:03:00 if i go back to firebase and i have a
- 00:03:02 look at my users i can see that user
- 00:03:04 there
- 00:03:05 with that user created if i reload the
- 00:03:07 app and i'm therefore locked out because
- 00:03:09 i have no
- 00:03:10 mechanism to keep me logged in i can log
- 00:03:13 in again with the same credentials
- 00:03:16 i should be able but i had a wrong
- 00:03:18 password i guess
- 00:03:20 yeah so it works so this is all working
- 00:03:23 but what
- 00:03:23 am i trying to show you here well
- 00:03:26 obviously it's all about that api key
- 00:03:29 that is information which any user of
- 00:03:32 our app
- 00:03:32 can access in the running app and not
- 00:03:34 just us
- 00:03:35 so here if i go to sources again in the
- 00:03:38 main.js file this is where
- 00:03:41 our code lives let's search for
- 00:03:44 api in there and indeed if i increase
- 00:03:47 that
- 00:03:47 we see here is some code which in the
- 00:03:49 end holds
- 00:03:50 these links and there we can see that
- 00:03:52 api key and
- 00:03:54 any user of this app can see that now
- 00:03:57 here it's particularly
- 00:03:58 easy to read because i'm still in
- 00:04:00 development mode in production mode it
- 00:04:02 would look a bit different
- 00:04:03 we can quickly have a look at another
- 00:04:05 app for that
- 00:04:06 why not add the firebase console which
- 00:04:09 also uses a lot of javascript
- 00:04:11 there if i open the sources tab we also
- 00:04:14 find
- 00:04:14 some code in there now let me quickly
- 00:04:16 grab a promising
- 00:04:18 file say this file doesn't really matter
- 00:04:22 then you see this is how it would look
- 00:04:23 like in a production build
- 00:04:26 so all the variable names are shortened
- 00:04:29 and all the white space is removed
- 00:04:31 because this
- 00:04:32 still is javascript code that executes
- 00:04:34 without issues the browser can read that
- 00:04:36 for users it's harder but even in that
- 00:04:39 version
- 00:04:40 this url would still be what it is this
- 00:04:43 can't be
- 00:04:44 hidden it won't be hidden the browser
- 00:04:46 can't hide this because the browser
- 00:04:49 parses this and it's part of what gets
- 00:04:51 shipped to the browser
- 00:04:52 so every user of this page can access
- 00:04:55 this data
- 00:04:56 now that leads us to the final question
- 00:04:58 is this a problem
- 00:05:00 and the answer is no not necessarily at
- 00:05:03 least
- 00:05:03 you should definitely not put anything
- 00:05:06 into your javascript code
- 00:05:07 which is absolutely confidential which
- 00:05:11 users must not
- 00:05:12 see like your root password for your
- 00:05:15 firebase account you don't want to put
- 00:05:17 that in here
- 00:05:18 the api key is something different with
- 00:05:20 the api key
- 00:05:22 and that of course is not only the case
- 00:05:23 for firebase but for most api or all api
- 00:05:26 keys you use on any api with dev key
- 00:05:28 alone no one can access your firebase
- 00:05:30 account
- 00:05:31 they don't have your password and that
- 00:05:33 api key is not even your username
- 00:05:35 so people can't access the account what
- 00:05:37 they can do of course
- 00:05:39 is they can grab that url that entire
- 00:05:42 url
- 00:05:42 and add this login and sign up to their
- 00:05:45 own page
- 00:05:45 using your api now is that an issue
- 00:05:49 it depends you can have an api which
- 00:05:51 should be public which you want other
- 00:05:54 users to use
- 00:05:55 and then this is perfectly fine if
- 00:05:57 you're saying
- 00:05:58 hey i got my firebase project and i only
- 00:06:01 want to use it from my angular app and
- 00:06:03 not from
- 00:06:03 any app well then you can lock down
- 00:06:06 access
- 00:06:07 you can do that in firebase you can set
- 00:06:09 up a api
- 00:06:10 whitelist to be precise you can do that
- 00:06:12 in the google
- 00:06:13 developer console not the google play
- 00:06:16 console but the google api console to be
- 00:06:19 precise
- 00:06:20 there what you can do is you can visit
- 00:06:23 that credentials page and on the
- 00:06:24 credentials page
- 00:06:27 you can load your firebase project here
- 00:06:30 on the top with this drop down
- 00:06:31 and there you see that api key and on
- 00:06:35 that api key
- 00:06:36 if you click on it we need the browser
- 00:06:38 key here
- 00:06:39 then you can restrict it to certain ip
- 00:06:41 addresses or domains
- 00:06:43 so this is a way for you to control
- 00:06:45 which ip addresses or domains can
- 00:06:48 send requests to this api with that key
- 00:06:51 and if the request is coming from
- 00:06:52 another page it will get blocked
- 00:06:55 and you have similar mechanisms for
- 00:06:57 other solutions or if you're creating
- 00:06:59 your own api you simply have to add the
- 00:07:01 logic to have
- 00:07:02 this extra filter if you want that
- 00:07:04 lockdown
- 00:07:05 so long story short if you got
- 00:07:08 information which gives direct access to
- 00:07:10 your account like your password or your
- 00:07:12 email address or stuff like that
- 00:07:14 don't put it into your javascript code
- 00:07:16 into your frontend-facing javascript
- 00:07:18 code i should say for node.js it's fine
- 00:07:21 if you get other things which only grant
- 00:07:23 access to an api but not to your account
- 00:07:26 you might want to grant that access to
- 00:07:28 everyone if you don't
- 00:07:29 set up some filtering logic which uses
- 00:07:32 an ip white list
- 00:07:34 for example to lock down access now if
- 00:07:37 you got
- 00:07:38 some information which you need to use
- 00:07:40 from your front end for example i had a
- 00:07:42 use case where
- 00:07:44 i needed a token where i needed to sign
- 00:07:47 up users
- 00:07:48 to my newsletter and that token actually
- 00:07:51 was not something i
- 00:07:52 wanted to expose to other users because
- 00:07:54 with the token
- 00:07:56 anyone could target my newsletter api
- 00:07:59 and could send requests to it to add
- 00:08:01 users to it
- 00:08:02 without the consent of these users the
- 00:08:05 problem is i also
- 00:08:06 couldn't lock down access through a
- 00:08:08 whitelist because my newsletter provider
- 00:08:10 the service i was using didn't offer
- 00:08:12 such a feature
- 00:08:13 so what i did is i wrapped it into some
- 00:08:15 server-side code
- 00:08:16 i created aws lam the function but you
- 00:08:19 can of course also create your own
- 00:08:21 api with node php whatever you need and
- 00:08:24 there i sent that request
- 00:08:26 to my newsletter service and with that
- 00:08:30 i had to send a request to my
- 00:08:33 cloud function to my aws lambda function
- 00:08:36 and that would then forward the request
- 00:08:38 and i could lock down the access to my
- 00:08:41 lambda function so
- 00:08:42 i created my own wrapper that is
- 00:08:44 basically what i wanted to say
- 00:08:45 and this is also some creative way you
- 00:08:47 can work around this
- 00:08:48 issue if you have an api which doesn't
- 00:08:51 give you a native
- 00:08:52 lockdown mechanism so i hope this was
- 00:08:55 helpful and this clarifies this
- 00:08:57 question of whether it's a problem that
- 00:08:59 people can read your javascript code
- 00:09:02 they can read it but if you do it right
- 00:09:04 they can't do anything with that
- 00:09:06 and by the way if you're worrying about
- 00:09:08 people stealing your logic
- 00:09:10 yes they can do that but for one the
- 00:09:13 production code is really hard to read
- 00:09:15 so it's not that much fun and two yeah
- 00:09:18 people can
- 00:09:19 steal it but your app shouldn't be great
- 00:09:22 or because of your complex
- 00:09:24 browser javascript code your core
- 00:09:27 business logic
- 00:09:28 will always reside on the server any
- 00:09:31 machine learning or whatever you got
- 00:09:33 there
- 00:09:34 that will be on the server your
- 00:09:35 front-end javascript code
- 00:09:37 is always about creating pleasant user
- 00:09:39 experiences
- 00:09:40 handling user interactions stuff like
- 00:09:42 that
- 00:09:43 and if that is your most valuable asset
- 00:09:47 you can't hide that unfortunately but it
- 00:09:49 also shouldn't be that easy
- 00:09:51 to clone it and there should be more to
- 00:09:52 your product than your browser site
- 00:09:55 javascript code
