Previously, we have shared our AngularJS Security Fundamentals cheatsheet. This time around, we dive straight into the modern Angular security best practices. You can download the Angular Security Best Practices cheat sheet here. Show
6 Angular security best practices
1. The “Angular way” safeguards you from XSSAngular security best practice #1: use interpolation ({{ }}) to safely encode potentially dangerous characters and escape untrusted HTML or CSS expressions within a template expression. Angular, much like React and Vue.js, takes on a security-by-default approach in the way it handles string interpolation in the browser. By default, all data is treated as unsafe and untrusted, and hence all of these libraries, and other modern view libraries, follow the best practice of performing output encoding by default for any text in an HTML context.
2. Use innerHTML with cautionAngular security best practice #2: If you must dynamically add HTML to a component, bind its generation to What is the difference between sanitization and output encoding?In output encoding, strings are replaced with their text representation, which can be mapped to a certain HTML tag. For example, if an input such as We appreciate that, unlike output encoding, the action of sanitization or filtering takes a more proactive approach of detecting unsafe characters and removing them from the text that is then written to the DOM. Context then becomes a deciding factor of output encoding and sanitization as it has a direct influence on how to properly perform the action. We can refer to the Angular documentation to learn more about security contexts., In their own words:
Note the special treatment of URLs, which are not filtered. 3. Never use templates generated by concatenating user inputAngular security best practice #3: Never concatenate any potentially user provided input as a string to a template. There should be minimal use-cases—if at all—deriving in the need to concatenate templates rather than properly using string interpolation or the recommended component composition in an Angular application. If you ever come across this bad practice in a codebase, you are encouraged to sanitize or refactor, to all possible extent, the provided input. Here is an example of what you should watch out for and avoid: Angular Security best practice: never use templates generated by concatenating user inputPay special attention at
the unconventional string to template concatenation in line 20. Following is a more complete picture which you can try in my Angular playground, showing how user input isn’t handled safely if concatenated to the template: Angular Security best practice in action: never use templates generated by concatenating user inputIn this regard, the Angular security guide official recommendation states:
Angular recommends to use its Ahead of Time compiler to compile templates offline. This helps you entirely avoid the plethora of template injection vulnerabilities:
Please notice that in latest versions of Angular—Angular v9 and higher—compiling with Ivy, ahead of time compilation is set to true by default, preventing template injection:
4. Never use native DOM APIs to interact with HTML elementsAngular security best practice #4: Never use native DOM APIs to interact with HTML elements on the page. Avoid direct DOM manipulation and use Angular template mechanisms, and Angular’s own APIs to manipulate the DOM instead. As a general guideline, avoid the following:
There are native Angular APIs that allow the same type of direct DOM manipulation that we’re advising against—for example, the ElementRef API. Angular ElementRef introduces security issues when used to gain access to a direct DOM node and perform manipulations at that point. This and other interactions outside of the Angular set of APIs could potentially lead to security vulnerabilities. 5. Avoid template engines on server-side templatesAngular security best practice #5: Avoid 3rd party template engines to create or add templates data on Angular server-side rendered applications. If you’ve been using Node.js to build web applications, you have probably used a template engine such as EJS, Pug, Handlebars, or one of their alternatives at some point in time. They are used to manage server-side rendered templates for the view layer and may include partials or layouts composites, and other sorts of features that help dynamically generate a view. However, implementing these template engine mechanisms in a configuration of Angular’s server-side rendered application could lead to potential injection of malicious code into a template. That happens because data injected is external to the scope of the Angular API and cannot be sanitized, posing the same risks as template string concatenation 6. Scan your Angular project for components which introduce security vulnerabilitiesAngular security best practice #6: Always scan your Angular project open source dependencies and Angular components for security vulnerabilities. Use Snyk platform or CLI for free to find, fix and monitor for security vulnerabilities. When it comes to using third-party libraries, like Angular and its ecosystem of modules or components, you should keep the following in mind: security vulnerabilities affecting the core Angular library, and security vulnerabilities in the third-party Angular modules you are importing and using in your project. Using components with known vulnerabilities is actually a documented OWASP Top 10 web security risk that you should be aware of. Securing Angular web applicationsIf you’re using However, even if you’re using npm’s audit feature, there are still security concerns you should mitigate:
Snyk solves both of these concerns for you, and it’s free 😉 How to get started? Create your free Snyk account and connect your GitHub or Bitbucket frontend projects —that way Snyk automatically finds and creates fix pull requests for you. Fix vulnerabilities in your Angular appFind vulnerabilities in seconds. Fix quickly with an automated pull request. Another quick way to get started and find Angular security issues is to use the Snyk CLI: The Snyk CLI provides more than just
known CVE vulnerabilities, unlike npm audit which doesn’t report theseSource: Angular vs React: security bakeoff 2019 Snyk provides actionable remediation advice to upgrade to a fixed version. If you’re looking for anything close to an Angular security scanner check Snyk out as a way to track your open source dependencies, get notified, and fix them as vulnerabilities get discovered. Recommended further reading:
How to secure angular application?Here are some key fundamental guidelines to ensure a secure Angular application: 1. Make sure that as a developer you are following the “Angular way” and its best practices to protect you from XSS. For example, this means you shouldn’t use innerHTML, never use templates generated by concatenating user input, and never use native DOM APIs to interact with HTML elements. 2. Make sure you scan your Angular project for components which introduce security vulnerabilities. Even if you follow Angular’s own security practices, other module authors may not, and leave you exposed to severe issues. Do more than scan – fix and monitor for potentially new issues. Snyk is great at that and a free tool you can easily connect to your projects. Read more on Angular security best practices. Does angular sanitize inputAngular by default will output encode all potentially dangerous text that could lead to XSS, given you’re following the Angular way of secure coding practices, such as using the double curly braces ({{}}) for safe interpolation. If you however use Angular’s innerHTML binding then Angular will try its best to protect you by sanitizing the dangerous content. It should however be your last resort at adding user input. What is untrusted input?Untrusted Data
But data that comes from databases, web services, and other sources is frequently untrusted from a security perspective. That is, untrusted data is input that can be manipulated to contain a web attack payload.
What is a security vulnerability that is associated with cookies?Since the data in cookies doesn't change, cookies themselves aren't harmful. They can't infect computers with viruses or other malware. However, some cyberattacks can hijack cookies and enable access to your browsing sessions. The danger lies in their ability to track individuals' browsing histories.
What is untrusted data sent to interpreter?Injection flaws, such as SQL, NoSQL, OS, and LDAP injection, occur when untrusted data is sent to an interpreter as part of a command or query. The attacker's hostile data can trick the interpreter into executing unintended commands or accessing data without proper authorization.
What is the type of flaw that occurs when untrusted user?Injection flaws occur when untrusted user data are sent to the web application as part of a command or query. The attacker's hostile data can trick the web application into executing unintended commands or accessing unauthorized data.
|