Interview: Angular Security with Dr. Philippe De Ryck

Interview: Dr. Philippe De Ryck on Angular Security

This time, we had the pleasure of speaking with Dr. Philippe De Ryck, a globally recognized security expert and Google Developer Expert (GDE).

ANGULARarchitects: Philippe, your expertise lies in securing modern web applications. Given that contemporary frameworks are becoming increasingly secure—Angular, for instance, automatically encodes all bound data—do you worry about your relevance?

Philippe: To be candid, I wish that were the case, as it would signify remarkable progress in building safer software.

The reality is that frameworks have indeed made significant strides in security. Angular, for example, includes built-in protection against Cross-Site Scripting, which is an excellent example of being secure-by-default. However, developers must still understand when these automatic defenses are active and how to avoid introducing vulnerabilities by unintentionally bypassing them.

ANGULARarchitects: You bring up Cross-Site Scripting (XSS), a vulnerability that has persisted for years. Why haven't we found a straightforward and effective solution to eliminate it?

Philippe: That is a complex question. At its core, XSS is deeply rooted in how the web operates. Whenever you combine untrusted data with markup and instruct the browser to render it, you create a potential XSS vulnerability.

Preventing XSS is achievable if you adhere strictly to secure coding practices. The challenge lies in consistently applying these practices across various teams and diverse use cases, which is far from straightforward.

ANGULARarchitects: What are the current strategies available for mitigating XSS?

Philippe: There are two main approaches. First, secure coding guidelines aim to prevent XSS vulnerabilities from being introduced in the first place. Second, defense-in-depth mechanisms act as a safety net in case a vulnerability slips through. Notable examples of the latter include Content Security Policy (CSP) and Trusted Types.

ANGULARarchitects: Implementing CSP often proves to be quite difficult. What makes it so challenging?

Philippe: CSP can be quite messy. The earlier versions, level 1 and level 2, are largely considered obsolete. Elaborate level 2 policies are frequently easy to bypass, undermining most of the security benefits. Level 3 addresses several of these issues but introduces compatibility challenges with frameworks like Angular and React. Properly deploying CSP in modern applications requires substantial expertise. In fact, our workshop dedicates several hours to teaching participants how to configure CSP specifically for Angular.

ANGULARarchitects: Can you elaborate on Trusted Types?

Philippe: Trusted Types is a browser security feature designed to block dangerous assignments to the innerHTML property. In essence, it forces developers to either adopt a clean and secure coding style or to explicitly manage security through a Trusted Types policy.

Going into the granular details would take too long here, but one key point is that Angular is a strong proponent of Trusted Types and has supported it natively since version 11.

ANGULARarchitects: A new iteration of the OWASP Top 10 has recently been published. Based on their findings, what advice would you offer?

Philippe: The OWASP Top 10 is designed to raise awareness. A crucial takeaway is that the list highlights fundamental security issues in software, which often originate in the early design stages.

The most critical concept to grasp about security is that it is a continuous process, not a one-time step. Security must be considered during the design phase, throughout development, and also in testing and deployment.

ANGULARarchitects: After several years, the OAuth 2 team has published best practices that revise several aspects of the original specification. Does this signal major flaws in OAuth 2, and should we be concerned?

Philippe: Significant flaws would typically result in a new version of the protocol, not just an update to best practices. What we're observing in the OAuth 2.0 ecosystem is a natural evolution driven by changing use cases. Over the past 9 years, the types of applications we build have changed, and so have browser capabilities and deployment models.

At its heart, a protocol like OAuth 2.0 evolves organically, which necessitates documentation outlining current best practices.
And if you weren't aware, OAuth 2.1 is set to consolidate many of these new recommendations into a single document.

ANGULARarchitects: How would you approach using OAuth 2 for Angular-based SPAs in today's landscape?

Philippe: Securing OAuth 2.0 entirely within a frontend application is actually quite difficult. The optimal approach for building a secure application with OAuth 2.0 is to pair the frontend with a lightweight server-side component, commonly referred to as a "Backend For Frontend." This architecture allows you to offload sensitive security logic to the server, making it possible to comply with all of OAuth 2.0's best practices.

ANGULARarchitects: Are there any upcoming developments in the security field that you are particularly excited about?

Philippe: Certainly. I'm enthusiastic about the expanding security support in modern environments. Browsers are actively pushing for better security by introducing a range of interesting features. Just consider the new security headers introduced in recent years, or the forthcoming sanitization API.

ANGULARarchitects: Let's discuss your upcoming Angular Security workshop in October. What topics will you be covering?

Philippe: The workshop provides a deep dive into Angular security.
We begin with foundational security principles for frontends, which are essential for designing secure applications.

We explore XSS attack vectors and secure coding guidelines tailored for Angular. We also examine CSP and Trusted Types as additional layers of defense.

Once we've covered these topics and completed some hands-on exercises, we transition to best practices for implementing OAuth 2.0 in Angular applications. This includes the latest flows and the security challenges specific to SPAs. I also delve into the Backend For Frontend pattern in considerable detail.

ANGULARarchitects: Who would you recommend this workshop for?

That's an easy one. Anyone involved in designing or building Angular applications. Whenever we run this workshop, participants immediately apply their new knowledge to evaluate their own projects, and they almost always uncover real vulnerabilities in their production code.

The workshop is full of practical advice, so anyone working with Angular is sure to benefit from it.

ANGULARarchitects: The workshop is delivered as an interactive online event. Is it as effective as an in-person session?

Philippe: It can be, absolutely! Just like my onsite workshops, the online format is interactive. I include live demos between lectures, and we have numerous interactive quizzes throughout the session.

But what truly elevates an online workshop is the participation of the attendees. When they ask questions, I can dive deeper into relevant topics. Sometimes attendees share their own insights, making it a genuinely engaging experience. I really value and encourage that.

ANGULARarchitects: Thank you for your time, Philippe.

Philippe: You're welcome!