Security and Frontend Performance

Chapter 3. iFrame and Content‑Security‑Policy

As mentioned in Chapter 1 of this book, the latest trends include the rise in third party popularity, which exposes end users to several risks associated with this type of content. These risks mainly concern single point of failure and the potential for delivering compromised content to end users. Because third party content is not under developer control, we must utilize alternate methods to address both performance and security concerns. We can implement <iframe> and Content-Security-Policy techniques to improve the frontend browsing experience while enforcing security at the browser, specifically when embedding third party content.

Third Party Risks

Third party content is essentially untrustworthy content for obvious performance and security concerns. Let’s take a look at a sample third party resource that is often used in Google Ad implementations. Generally, the resource in Example 3-1 would be included in the base page of a wesbsite.

Example 3-1. Google resource

<script
      async
      type="text/javascript"
      src="https://www.googletagservices.com/tag/js/gpt.js">
</script>

Not only does the browser load the initial resource, but the browser continues to load subsequent embedded third party resources in Figure 3-1, which can lead us to the mentioned vulnerabilities.

Figure 3-1. Third party waterfall

At any point, these additional resources ...