DOM Sanitizer | XSS Attack | Ensuring Secure Web Content | Advanced Angular | Hero to Superhero

DOM Sanitizer | XSS Attack | Ensuring Secure Web Content | Advanced Angular | Hero to Superhero


DOM Sanitizer | XSS Attack | Ensuring Secure Web Content | Advanced Angular | Hero to Superhero

DOM Sanitizer | XSS Attack | Ensuring Secure Web Content | Advanced Angular | Hero to Superhero

Best course to become an expert in Angular.


Are you a beginner trying to learn Angular, please use this course Angular - Zero to Hero, which covers all basic concepts in Angular.

   • Angular Tutorial | Angular for beginn…  


This Angular - Hero to Superhero is mainly for angular developers who knows the basic concepts and willing to become an expert. I am trying to explain the advanced concepts in angular using simple examples.

In this video, I am going to explain about Cross Site Scripting (XSS) Attack and DOM Sanitizer in Angular

TIMESTAMPS
00:00 INTRODUCTION
00:39 CROSS SITE SCRIPTING
01:11 XSS EXAMPLE
02:58 DOM SANITIZER



Tags:
#angular, #tutorial, #learn, #advanced, #angular2, #angular4, #angular5, #angular6, #angular7, #angular8, #angular9, #angular10, #angular11, #angular12, #angular13, #interview, #security

DOM Sanitizer | XSS Attack | Ensuring Secure Web Content | Advanced Angular | Hero to Superhero


Content

16.75 -> Hi Friends
17.75 -> Welcome back to Angular - Hero to Super Hero series.
20.53 -> If you are a beginner, trying to learn angular, there is another series, Angular - Zero to
24.98 -> Hero.
25.98 -> In which, I have explained all the basic concepts.
27.86 -> You can find the link in the description.
29.782 -> In this Angular series - Hero to Super Hero, I am focusing on advanced concepts.
34.23 -> In this video, I am going to talk about Cross Site Scripting and DOM Sanitizer in Angular.
39.15 -> Let's start.
40.27 -> What is Cross Site Scripting.
43.05 -> Also know as XSS.
45.29 -> Cross-site Scripting is a client-side code injection attack.
48.629 -> It is a web security vulnerability which allows the attacker to execute malicious scripts
52.71 -> in web browser through some kind of code injection.
55.28 -> Using XSS, the attacker can access your cookies and get the user data, they can turn on your
61.85 -> location, camera, microphone, etc.
63.32 -> They can carry out any actions that you can do.
66.47 -> There are different types of XSS attacks.
69.24 -> Today we are going to see about DOM Based XSS attack.
72.17 -> Let me show you a simple example, so that I can explain XSS better.
75.46 -> This is a simple HTML file, in which I have a search input box and a button.
80.95 -> When I click I need to search something.
83.1 -> And, below this button, I am showing what keyword user has used to search.
86.85 -> So, if you see here I am calling a function on button click and inside that button I am
92.46 -> getting the text box value and assigning that to the span tag using innerHTML.
96.31 -> So, if I search for something here, I can see it is showing here.
102.799 -> Good.
103.799 -> But this is a vulnerable code.
104.799 -> Now, attackers can inject some script into this application.
107.66 -> Some Text
109.329 -> Instead of an alert, they can run a php file to do some unwanted things.
118.96 -> This is code injection.
120.53 -> Now, let's try to do the same in an angular application.
124.02 -> Here, I have created a simple angular application and has started the server.
129.2 -> So, you can see this.
130.95 -> Now, let me copy this code and modify that in angular way.
134.1 -> Ok.
135.1 -> If I search something, I could see this.
136.1 -> Let me try to inject the same malicious code.
160.819 -> It is injected, but the mouseover code is not working.
163.68 -> That is because, you can see in the console, angular has stripped some content.
170.05 -> If you inspect the DOM, you can understand what has been stripped out.
173.75 -> This is DOM Sanitization.
175.52 -> This functionality is coming inbuilt in Angular.
177.94 -> But assume you are creating an application in which you need to allow users to add a
182.19 -> svg image.
183.19 ->
185.93 -> stroke-width="3" fill="red" />
187.05 -> If it is in normal HTML and Javascript, we can see it is working.
191.36 -> But if we try this in our angular application, it will not work, because angular treats svg
197.56 -> as unsafe content.
199.819 -> In this scenario, we can use bypass angular's inbuilt security using one of the functions
204.29 -> available in DomSanitizer.
205.74 -> So, let me inject the DomSanitizer and let me use the byPassSecurityTrustHtml function
217.05 -> to inform Angular that content is safe content.
224.48 -> Now, we can see it is working.
230.62 -> But, we need to be very careful when we use this function.
233.93 -> We have to make sure the injected code is safe by checking whether the code is having
238.39 -> some of the keywords like script, etc
242.849 -> Hope you understood.
243.849 -> Please like this video, subscribe and support me.
246.29 -> I will be back with another concept soon.
248.879 -> Thank you.
249.879 -> Bye.

Source: https://www.youtube.com/watch?v=IvUQt64CCJI