Load Third-Party CSS in Lightning Components

Include cascading style sheets (CSS) and other resources in static resources rather than loading from a third party.

This requirement is enforced for the same reasons outlined in Loading JavaScript Files from Third-Party Endpoints. The entire solution must be under version control, and the org administrator and Salesforce security review team must be aware of the change.

Using the <link> tag to load an external CSS resource violates this security policy.

At a high level, the solution is:

Save third-party CSS files in static resources.
Add the resources to your solution package.
Reference the CSS using a <ltng:require> tag in your .cmp or .app markup.

For more information, see Using External CSS in the Lightning Aura Components Developer Guide.

Aura Example

These code snippets depict the security violation and how to fix it in a Lightning component in Aura. This Aura component code isn’t secure because it uses the <link> tag to load an external CSS resource.

1<aura:component>
2     <link rel="stylesheet" href="https://example.com/styles.css" type="text/css">
3<aura:component>

This Aura component code uses <ltng:require>, which is a more secure way to reference an external CSS resource that you uploaded as a static resource.

1<aura:component>
2    <ltng:require styles="{!$Resource.SLDSv1 + '/assets/styles/lightning-design-system-ltng.css'}" />
3</aura:component>

ISVforce Guide

Load Third-Party CSS in Lightning Components

Aura Example