Introduction to Angular Security
for Angular Developers
currentSpeaker().getIntro();
{
name: "Syed M. Taha",
designation: "Senior Software Engineer",
organization: "Loops Digital",
twitter: "twitter.com/smtaha512",
email: "s.m.taha10@gmail.com"
}Disclaimer
Not a comprehensive guide, just introduction
@smtaha512
Disclaimer
Does not cover application level security like authentication and authorization
@smtaha512
Lets talk about the most common attack on the web
@smtaha512
Cross Site Scripting (XSS) Attack
@smtaha512
Let's go to few years back
@smtaha512
XSS Demo with PHP
@smtaha512
How to prevent
htmlentities(variableName)@smtaha512
<table>
<?php foreach($array as $key=>$value): ?>
<tr class="<?php echo $classes; ?>">
<td style="color: <?php echo $cell_color; ?>"><?php echo $key; ?></td>
</tr>
<?php endforeach; ?>
</table>But how about this?
@smtaha512
@smtaha512
@smtaha512
Let's try in ngular
@smtaha512
How Angular block XSS
@smtaha512
Treating all values as untrusted
@smtaha512
Sanitizing & Escaping untrusted values
@smtaha512
Sanitization
@smtaha512
Security Contexts
@smtaha512
Security Contexts:
is a URL that will be loaded and executed as code, for example, in <script src>.
is used when interpreting a value as HTML, for example, when binding to innerHtml.
used for URL properties, such as <a href>.
-
HTML
-
Style
-
URL
-
Resource URL
is used when binding CSS into the style property.
Trusting safe values
@smtaha512
To mark a value as trusted
- Inject `DomSanitizer`
- Call any one of the following
- bypassSecurityTrust
- bypassSecurityTrust
- bypassSecurityTrust
- bypassSecurityTrust
- bypassSecurityTrust
Html
Script
Style
Url
ResourceUrl
These methods should be avoid as much as possible
@smtaha512
What you can do to avoid XSS?
@smtaha512
Do not call the DOM APIs directly
@smtaha512
Avoid libraries that manipulate DOM, like jQuery
@smtaha512
Try to avoid byPassSecurityTrust* methods
@smtaha512
This is just start...
@smtaha512
Thank you
s.m.taha10@gmail.com