# Security

Security considerations and best practices when using Font Awesome.

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

<a href="mailto:hello@fontawesome.com?subject=Security Issue">Send us an email directly</a> so we can take a look and address things.

---

## Content Security Policy

[Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) (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.
1. Reference the external CSS file explicitly.
1. Remember to extract CSS from the bundle (if you've installed Font Awesome via package manager).

#### Example: When Hosting Font Awesome Yourself

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

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

```javascript
require('@fortawesome/fontawesome-free')
FontAwesome.config.autoAddCss = false
```

#### Example: When Using npm Packages fontawesome-svg-core

```javascript
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`.

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