Defending Angular Applications with a Content Security Policy

An effective CSP will provide you with a safety net against XSS attacks. Kendo UI for Angular components are fully compatible with strict CSPs.

We've got an important update for you on Kendo UI support for Angular and Content Security Policies (CSPs). For the quick version, you can skim the summary right here, or dive into the full content below.

TL;DR

• A good policy makes cross-site script injection impossible 
• 'unsafe-eval' compromises the policy effectiveness 
• Kendo UI for Angular components no longer use 'eval' 

What is a Content Security Policy?

Content Security Policy is a browser feature for protecting against cross-site scripting attacks (XSS), one of the most common attack vectors on the web. It is a useful layer to have in your defense-in-depth strategy.

But it's just that—a layer, not a complete solution in itself. Not all browsers support it, the most notable exception being IE prior to Edge.

How to make a policy effective?

• Restrict script execution to whitelisted sources, most commonly the application itself
• Disallow unsafe inline scripts and dynamic evaluation (no "unsafe-eval" and "unsafe-inline")
• Disallow or whitelist object (embed, object, applet) sources

An example policy that satisfies the rules above is: "script-src 'self'; object-src 'none'"

The CSP Evaluator tool can be used to identify problems with your policy. An extensive research on the real-world effectiveness of different policies is available in the CSP Is Dead, Long Live CSP! research paper.

How to use a strict policy in an Angular application?

Your application has to use Ahead of Time Compilation (AOT). The JIT compiler is not suitable as it must generate dynamic scripts at runtime.

What are the restrictions to the CSP when using Kendo UI with Angular?

As of this week—none. The @progress/kendo-data-query has dropped the use of "eval" in version 1.1.0, making the suite fully compatible with a strict CSP. A sample application is available on GitHub.

What about Kendo UI and jQuery?

The template engine in Kendo UI for jQuery requires `script-src: "unsafe-eval"` due to the use of dynamic code generation, much like the Angular JIT compiler. A pure client-side framework doesn't have the luxury of server-side template compilation. That said, we actively manage XSS vectors by sanitizing input data.

Further Reading

For more details on CSP, you may want to review the articles on Web Fundamentals and on MDN.

In the context of Angular applications, the Intro to Web Security by Dominik Kundel (slides) talk from Angular Connect '17 talk is definitely worth your time. Last, but not least, you can check out the Security topic from the Angular documentation.