Angular js security
Download as PPTX, PDF1 like521 views
This document discusses various techniques for securing AngularJS applications, including authenticating users via API endpoints, using services for session management, interceptors for authentication, and resolving routes. It also covers preventing CSRF and XSS attacks using tokens, sanitizing untrusted data, and tools for security audits. Recommendations are to make security decisions on the server, protect services, and use security HTTP headers while being careful with untrusted client-side data.
![Authentication Interceptor config
factory('AuthInterceptor', ['$q', '$rootScope', function($q, $rootScope) {
return {
'responseError': function(rejection) {
if (rejection.status === 401) {
$rootScope.$broadcast('Auth:Required');
}
return $q.reject(rejection);
}
}
}])](https://image.slidesharecdn.com/angularjssecurity-160708143503/85/Angular-js-security-8-320.jpg)
![CSRF Interceptor
var deferred = $q.defer();
var req = {config: config, deferred: deferred}
if (angular.isUndefined($rootScope.pendingRequests)) {
$rootScope.pendingRequests = [];
}
$rootScope.pendingRequests.push(req);
// Raise an event
$rootScope.$broadcast('XsrfToken:Invalid');
return deferred.promise;
Store the original request and the promise](https://image.slidesharecdn.com/angularjssecurity-160708143503/85/Angular-js-security-20-320.jpg)
![CSRF Interceptor
$rootScope.$on('XsrfToken:Valid', function() {
var i, requests = $rootScope.pendingRequests ?
$rootScope.pendingRequests : [];
for (i = 0; i < requests.length; i++) {
retry(requests.pop());
}
function retry(req) {
$http(req.config).then(function(response) {
req.deferred.resolve(response);
});
}
});
Resume the pending requests](https://image.slidesharecdn.com/angularjssecurity-160708143503/85/Angular-js-security-22-320.jpg)
![JWT
• Store the token from service response
• Sending the token at each request with interceptor
$http(...).then(function(response) {
currentToken.jwt =response.data.access_token;
}
angular.module('myApp')
.config(function ($httpProvider,jwtInterceptorProvider) {
jwtInterceptorProvider.tokenGetter=['currentToken',function(current
Token) {return currentToken.jwt;}];
$httpProvider.interceptors.push('jwtInterceptor');
});](https://image.slidesharecdn.com/angularjssecurity-160708143503/85/Angular-js-security-38-320.jpg)
Angular js security
- 2. iNDEX • Authenticate users API • Securing Admin pages • CSRF,XSS Prevention • Sanitize Module • Security Audit Tools • OWASP
- 3. Authenticate users API POST /register POST /login POST /logout GET /status # returns 401 or the authenticated user
- 5. Session service Represent the user’s session
- 7. Session management global config $rootScope.$on('Auth:Required', function() { $location.path('/login'); }); $rootScope.$on('Auth:Login', function() { $location.path('/'); }); $rootScope.$on('Auth:Logout', function() { StorageService.clear(); // clear user info $rootScope.$broadcast('Auth:Required'); });
- 8. Authentication Interceptor config factory('AuthInterceptor', ['$q', '$rootScope', function($q, $rootScope) { return { 'responseError': function(rejection) { if (rejection.status === 401) { $rootScope.$broadcast('Auth:Required'); } return $q.reject(rejection); } } }])
- 10. Auth Service
- 11. Securing admin pages .service("AuthService", function() { var data = {}; data.checkAuth = function() {return true;} return data; }) .when("/admin", { templateUrl: “admin.html", controller: “adminController", resolve: { checkAuth: function(AuthService){ return AuthService.checkAuth(); } } })
- 12. Securing admin pages controller(“adminController", function ($scope, checkAuth) { $scope.isAuthenticated = checkAuth; });
- 13. Browser risks • Cross Site Scripting(XSS) • Cross-Site Request Forgery(CSRF)
- 14. CSRF Prevention • XSRF token • Inject in HTTP Forms • Protected from Cross-Site Request Forgery attack • XSRF-TOKEN → HTTP HEADER X-XSRF-TOKEN • Set a domain cookie in the request • Validate the header with the content the cookie • Used for authorize requests from the user
- 15. CSRF Prevention
- 16. XSRF Token
- 17. XSRF Token • When using $http ,Angular automatically look for a cookie called XSRF-TOKEN • If this cookie is found,when make a request add this information in the request-header • This header is sent to the server,at the token can be validated • The API can verify that the token is correct for the current user • Server sends success or failure
- 18. Module CSURF app.js var csrf = require("csurf"); //require package app.use(csrf()); //initialize //middleware for every http request app.use(function(req, res, next) { res.cookie("XSRF-TOKEN", req.csrfToken()); next();});
- 19. CSRF Interceptor 'responseError': function(rejection) { var statusCode = rejection.status; var config = rejection.config; // Check if XSRF token is invalid if (statusCode === 403 && rejection.data === 'XsrfToken.Invalid') { // Handle invalid token } return $q.reject(rejection); } } Http Interceptor - Handle invalid token responses
- 20. CSRF Interceptor var deferred = $q.defer(); var req = {config: config, deferred: deferred} if (angular.isUndefined($rootScope.pendingRequests)) { $rootScope.pendingRequests = []; } $rootScope.pendingRequests.push(req); // Raise an event $rootScope.$broadcast('XsrfToken:Invalid'); return deferred.promise; Store the original request and the promise
- 21. CSRF Interceptor $rootScope.$on('XsrfToken:Invalid', function() { Security.status().then(function() { $rootScope.$broadcast('XsrfToken:Valid'); }); }); Store the original request and the promise
- 22. CSRF Interceptor $rootScope.$on('XsrfToken:Valid', function() { var i, requests = $rootScope.pendingRequests ? $rootScope.pendingRequests : []; for (i = 0; i < requests.length; i++) { retry(requests.pop()); } function retry(req) { $http(req.config).then(function(response) { req.deferred.resolve(response); }); } }); Resume the pending requests
- 23. XSS Protection For XSS protection, AngularJS uses Strict Contextual Escaping (SCE). We need to include $sce service to the code. SCE defines a trust in different context. Since 1.3, the HTML compiler will escape all {{}} & ngbind by default https://www.ng-book.com/p/Security http://java.dzone.com/articles/angularjs-how-handle-xss
- 24. Sanitize • The ngSanitize module provides functionality to sanitize HTML. • Avoid Cross Site Scripting(XSS) attacks • Requires angular-sanitize.js • Provides ng-bind-html directive for sanitize HTML filtering the javascript code <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular- sanitize.js"></script>
- 25. ngSanitize && SCE • The input is sanitized by parsing the HTML into tokens. • All safe tokens are then serialized back to properly escaped html string • SCE(Strict Contextual Escaping) is a mode in wich AngularJS requires binding in certain contexts to result in a value that is marked as safe to use for that context.
- 26. Strict Contextual Escaping Service
- 27. Strict Contextual Escaping Service var data ='<b onmouseover="alert('over')">trust me</b>:<script>alert("XSS");</script> <xss>XSS</xss>'; $scope.untrusted = data; $scope.sanitized = $sanitize(data); $scope.trusted = $sce.trustAsHtml(data); {{ untrusted }} <span ng-bind-html="sanitized"></span> <span ng-bind-html="trusted"></span>
- 28. ng-bind-html .vs. ng-bind <div ng-bind-html="to_trusted(msg)"> </div> • ng-bind-htmlAutomatically uses $sanitize • <p ng-bind="msg"></p> Hello, <b>World</b>! • <p ng-bind-html="msg"></p> Hello, World!
- 29. Retire.js • Detecting components and JavaScript libraries with known vulnerabilities • https://raw.githubusercontent.com/RetireJS/retire.js/m aster/repository/jsrepository.json • Retire.js has these parts: • A command line scanner • A grunt plugin • A Chrome plugin • A Firefox plugin • Burp and OWASP Zap plugin
- 30. Build a secure HTTPS Server var https = require('https'); var privateKey = fs.readFileSync('cert/privatekey.pem').toString(); var certificate = fs.readFileSync('cert/certificate.pem').toString(); var credentials = {key: privateKey, cert: certificate}; var secureServer = https.createServer(credentials, app); secureServer.listen(config.server.securePort); //443
- 31. Build a secure HTTPS Server https-redirect-server https://www.npmjs.com/package/https-redirect-server A node module to redirect all traffic to https and a secure port.
- 33. Securing Headers
- 37. JWT • JSON Web Token • Avoid CSRF and XSS • angular-jwt
- 38. JWT • Store the token from service response • Sending the token at each request with interceptor $http(...).then(function(response) { currentToken.jwt =response.data.access_token; } angular.module('myApp') .config(function ($httpProvider,jwtInterceptorProvider) { jwtInterceptorProvider.tokenGetter=['currentToken',function(current Token) {return currentToken.jwt;}]; $httpProvider.interceptors.push('jwtInterceptor'); });
- 39. OWASP • Open Web Application Security Project • Online community dedicated to web application security • Identify Vulnerabilities • Document Best Practices • Repository with use cases • https://github.com/hakanson/ng-owasp
- 40. Recommendations • Access control input validation and security decisions must be made on the server. • Handle untrusted data with care • Use contextual encoding and avoid building code from strings. • Protect your services • Learn how to use security HTTP headers
- 41. Conclusions • Angular is a purely client side framework • There are risks in the client that are discret to the network and server • The client and the network are not in your control! • Protect the server!
- 43. Youtube videos Security in the world of JS frameworks https://www.youtube.com/watch?v=4Qs5mqa4ioU Top 10 Security Risks for AngularJS Applications https://www.youtube.com/watch?v=6uloYE87pkk JS Security - A Pentesters Perspective https://www.youtube.com/watch?v=LVamMYljS4Q