How Ember and Angular Impact on Content Security Policy

Juan Diego Raimondi

JD is his nickname and he is Solution Architect at Making Sense. He is a Software Engineer and he has been working in this field since 2007. In his spare time Juan loves researching new cool technologies, watching action movies and listening to loud music.

In the banking sector, as in many others, security is paramount. This is especially true as the industry utilizes an increasing amount of technology, including Web and mobile apps, that can require a considerable amount of personal information. In order to keep these details secure, developers can leverage Content Security Policy, or CSP, to help protect against certain types of attacks.

However, a CSP can have different implications depending upon the type of framework used in conjunction with this additional layer of security. Today, we’ll take a look at CSP in the banking sector, and how this protection measure differs when paired with the Ember or Angular frameworks.

What is Content Security Policy?: CSP Explained

First and foremost, one must have a full understanding of CSP and what it means for data protection. Mozilla Developer Network noted that CSP was first widely used in the Firefox 4 browser, and is still utilized in many instances today.

“Content Security Policy (CSP) is an added layer of security that helps to detect and mitigate certain types of attacks, including Cross Site Scripting (XSS) and data injection attacks,” Mozilla Developer Network stated.

Although these types of injections are leveraged for a wide variety of purposes – including data theft, malware distribution and website vandalism – they appear quite frequently in the banking sector. The industry is a top target for many cybercriminals, enticing hackers seeking clients’ personal information, financial details or other data. As a result, the use of CSP is common practice in the banking industry, and quite frequently comes into play to prevent black hats from snooping or intercepting sensitive information.

“A Web site administrator for an online banking site wants to ensure that all its content is loaded using SSL, in order to prevent attackers from eavesdropping on requests,” Mozilla Developer Network noted as an example for this bank “[Using] Content-Security-Policy: default-srchttps://onlinebanking.jumbobank.com, the server only permits access to documents being loaded specifically over HTTPS through the single domain onlinebanking.jumbobank.com.”

CSP add​-on through Ember

While CSP definitely adds extra protection against specific types of attacks, security and risk will differ depending on the framework utilized alongside it. For instance, the Ember command line interface comes equipped with a specific add​-on – ember-cli-content-security-policy – to enable CSP in Web browsers securing the application against XSS attacks during the development while this does not address the deployed environment configuration, it aids the developer in engineering the app with the specified restrictions set with a specific CSP. https://gist.github.com/mravinale/a064d17502f7.

“While browser support is still limited, ember-cli makes it easy to build your app with the CSP in mind,” according to the Ember CLI. “This means enabling it on your production stack will mean little more than adding the correct header.”

CSP with Angular

Angular also supports CSP protection when developers ensure that it is compatible. In order to do so, developers should avoid using the Function constructor to generate optimized value getters, and not inject custom stylesheets, according to AngularJS.org. This will help establish a product that is consistent for CSP use.

Although CSP includes specific restrictions on eval and Function capabilities, with this CSP-specific mode, developers are still able to leverage the framework’s robust templating engine.

While this offers a little less freedom for developers, it can also lead to improve vulnerability.

“That nevertheless bears risks and leads to an interesting phenomenon: In case an attacker can inject HTML into an AngularJS application context, the infected JavaScript will be executed although CSP should protect from this,” experts noted on the Mustache-Security wiki page. “In other words: AngularJS brings inline-JavaScript on CSP-protected websites back by using its own attributes and a complex string parsing and event binding mechanism.”

Thankfully, this CSP bypassing issue has been addressed in the most recent version of Angular following an internal security audit. In light of these changes, Angular is just as secure as Ember when it comes to CSP protection.

To find out more about CSP, Ember and Angular, reach out to the team of experts at Making Sense.

Mariano Ravinale

Mariano is Head of Development. He's committed to convert ideas into innovative worldwide accessible platforms. On his free time, he runs meetups spreading his passion regarding Software and Hardware development. He also loves traveling with his family. Find him on Linkedin!