Skip to content
Font Awesome Docs

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.

Report an Issue

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.

Content Security Policy

Content Security Policy (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://example.com/fontawesome/v6.6.0/js/all.js" data-auto-add-css="false"></script>
    <link href="https://example.com/fontawesome/v6.6.0/css/svg-with-js.css" rel="stylesheet" />
  </head>
  ...
</html>

Example: 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.