Security and Frontend Performance

Chapter 1. Understanding the Problem

More often than not, performance and security are thought of as two separate issues that require two separate solutions. This is mainly due to the implications posed behind various performance and security products. We typically have either security solutions or performance solutions, but rarely solutions that offer both.

As technology has advanced, so have our attackers, finding newer and better ways to impact both the performance and security of a site. With this in mind, it has become even more critical to come up with solutions that bridge the gap between security and performance. But how do we do that?

We need to shift the focus to what we can do at the browser by leveraging various frontend techniques, such as web linking and obfuscation, versus solely relying upon the capabilities of a content delivery network (CDN) or the origin. We can take advantage of all the new and emerging frontend technologies to help provide a secure and optimal experience for users—all starting at the browser.

Challenges of Today: Rise of Third Parties

Many of the recent web-related concerns stem from an increase in web traffic as well as an increase in security attacks. More specifically, many of these concerns arise due to the presence of embedded third party content. Third party content is a popular topic due to the many risks involved, including both the potential for site performance degradation as well as the introduction of security vulnerabilities for end users. Let’s discuss some of these issues in detail before diving into techniques to address them.

Web Traffic

The latest trends suggest an accelerated increase in overall web traffic; more and more users access the Web through mobile and desktop devices. With the growth in web traffic and ultimately bandwidth, end users continue to demand improved browsing experiences such as faster page loads, etc. Keeping that in mind, we not only need to adapt our sites to handle additional user traffic, but we need to do so in an optimal way to continue delivering an optimal browsing experience for the end user.

One of the higher profile frontend issues arising today is single point of failure. By definition, single point of failure is a situation in which a single component in a system fails, which then results in a full system failure. When translated to websites, this occurs when a single delayed resource in a page results in blocking the rest of the page from loading in a browser. Generally, blocking resources are responsible for this type of situation due to a site’s dependency on executing these resources (i.e. JavaScript) before continuing to load the rest of the page. Single point of failure is more likely to occur with third party content, especially with the increase in web traffic and the obstacles in trying to deliver an optimal experience for the end user.

Attacks on the Rise

While web traffic continues to grow, security threats continue to increase as well. Many of these threats are motivated by financial means or for the purposes of harvesting data, while others execute distributed denial of service (DDoS) or spamming attacks to bring down origin web infrastructures.¹

When discussing security, many different areas can be targeted during an attack, including the end user and/or the origin infrastructure. While security at the origin is important, providing a secure browsing experience for the end user is equally important and is now the focus as security threats continue to rise. Given the guarantee of a secure experience in the browser, end users are more likely to return to a site without having to worry about compromised content affecting their experiences.

As the effort to support increased web bandwidth and security threats continue, so does the need to adapt our sites to handle the increased load in an optimal and secure way for the end user.

Today, attackers are targeting vendor-related content due to the fact that proper security measures are not always in place and verified with third party content. From Alexa’s Top 100 domains, pages on average fetch 48 embedded first party resources while fetching 62 embedded third party resources. Based on these numbers, we can see how heavily reliant websites are on third party content—including fonts, images, stylesheets, etc. Because of this dependency, websites are exposed to vulnerabilities like single point of failure and the potential for delivering malicious content to end users.

Technology Trends

Based on the latest issues, we need solutions to bridge the gap and address both performance concerns as well as security holes at the browser level—and some of the latest technologies do just that. Taking a look at service workers and HTTP/2, these are both technologies aimed at improving the browsing experience; however, both of these methods are restricted to use over a secure connection (HTTPS). These technologies are ideal in demonstrating how solutions can improve both performance and security for any given website.

Other frontend techniques exist to help mitigate some of the security and performance vulnerabilities at the browser. Leveraging <iframe>, Content-Security-Policy, HTTP Strict-Transport-Security, and preload/prefetch directives prove to help protect sites from third party vulnerabilities that may result in performance degradation or content tampering.

Start at the Browser

The main idea behind all these technology trends and frontend techniques is to help provide a secure and optimal experience for the end user. But rather than focusing on what a content delivery network, origin, or web server can do, let’s shift that focus to what the browser can do. Let’s start solving some of these issues at the browser.

In the remaining chapters, we will go through each of the frontend techniques and technology trends mentioned at a high level in this chapter. We will review implementation strategies and analyze how these techniques help achieve an end user’s expectation of a secure yet optimal experience, starting at the browser.

¹ “Takeaways from the 2016 Verizon Data Breach Investigations Report”, David Bisson, accessed October 13, 2016, http://www.tripwire.com/state-of-security/security-data-protection/cyber-security/takeaways-from-the-2016-verizon-data-breach-investigations-report.