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.
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 (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:
- Disable automatic CSS insertion.
- Reference the external CSS file explicitly.
- 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.