All 5 Third-Party Script Optimization questions
More in Third-Party Script Optimization
What is the next/script component, and why should you use it instead of a plain HTML script tag? What do the different loading strategies like beforeInteractive, afterInteractive, and lazyOnload actually control? How do you run code after a third party script has finished loading? How would you measure and reduce the performance impact of multiple third party scripts on a page, such as analytics, ads, and chat widgets?
Advertisement
Back to results for “Security”
Next.js › Third-Party Script Optimization

What security considerations should you keep in mind when loading third party scripts on your Next.js website?

Advanced

Answer

Only load scripts from sources you trust, since a compromised third party script can inject malicious code directly into your page, consider using the integrity attribute to verify the script has not been tampered with, and keep track of exactly which third party scripts are loaded across your site to avoid unnecessary exposure.
<Script
  src="https://trusted-cdn.example.com/library.js"
  integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC"
  crossOrigin="anonymous"
/>
Real-world example A company adds subresource integrity checks to a third party script they load, ensuring the browser refuses to run it if the file has been unexpectedly modified or compromised somewhere along the delivery chain.

Common follow-ups: What is subresource integrity and how does it protect against compromised scripts?;How do you audit which third party scripts are currently loaded on your site?

Security Best Practices in Next.js;Third-Party Script Optimization
All 5 Third-Party Script Optimization questions