O'Reilly logo

Security and Frontend Performance by Sabrina Burney, Sonia Burney

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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.

WPT screenshot
Figure 3-1. Third party waterfall

At any point, these additional resources ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required