You're viewing docs for v5.15.4, an older version of Font Awesome.

Web

Security

Browser-based technologies can be tricky from a security stand point. We take security seriously and encourage our users to communicate with us about issues they find.

Advertisement

Found an issue with Font Awesome or one of our services?

Talk to Us First! Publicly announcing a security issue could have some pretty damaging effects so please consider sharing it with us in private first. We'd rather get something fixed before it caused wide-spread damage.

Found a Security Issue?

Send us an email directly so we can take a look and address things.

Content Security Policy

Content Security Policy (opens new window) (CSP) is used to attempt to prevent a certain class of attacks including cross-site scripting and data injections. It functions by adding a Content-Security-Policy header to the HTTP response or by adding <meta> tags to the page. Since, by default, the SVG with JavaScript library attempts to add CSS to the <head> of the DOM it will violate a strict CSP. Follow the steps below to workaround this:

  1. Disable automatic CSS insertion.
  2. Reference the external CSS file explicitly.
  3. Remember to extract CSS from the bundle (if you've installed Font Awesome via package manager).

Example: When Hosting Font Awesome Yourself

  <html>
    <head>
      <script src="https://use.fontawesome.com/releases/vVERSION/js/all.js" data-auto-add-css="false"></script>
      <link href="https://use.fontawesome.com/releases/vVERSION/css/svg-with-js.css" rel="stylesheet">
    </head>

    ...

  </html>

Example: When Using npm Packages fontawesome-free or fontawesome-pro

  require('@fortawesome/fontawesome-free');

FontAwesome.config.autoAddCss = false

Example: When Using npm Packages fontawesome-svg-core

  import { config } from '@fortawesome/fontawesome-svg-core';

  // Make sure this is before any other `fontawesome` API calls
  config.autoAddCss = false

The stylesheet is included as an external file located in the @fortawesome/fontawesome-svg-core package. Find it at node_modules/@fortawesome/fontawesome-svg-core/styles.css.

Using Web Fonts with CSS?

You don't need to worry about CSP issues. These workarounds aren't needed. Party on, Wayne.