DOM Sanitizer | XSS Attack | Ensuring Secure Web Content | Advanced Angular | Hero to Superhero
Aug 15, 2023
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