FAQ-000302 - CSS and UI Security / Improper CSS Loading Vulnerabilities

To load CSS securely in Aura and Lightning Web Components (LWC), follow these guidelines: ### Aura Components Use the `<ltng:require>` tag to include CSS from static resources. Example: ```html <aura:component> <ltng:require styles="{{!$Resource.CSSResourceName + '/path/to/stylesheet.css'}}" /> </aura:component> ``` ### Lightning Web Components Import the CSS file from static resources and apply it within the component. Example: ```javascript import { LightningElement } from 'lwc'; import myStyles from '@salesforce/resourceUrl/CSSResourceName'; import { loadStyle } from 'lightning/platformResourceLoader'; export default class MyComponent extends LightningElement { connectedCallback() { loadStyle(this, myStyles); } } ``` ### Important Security Notes 1. **Avoid `<link>` Tags**: Do not use the `<link>` tag to load external CSS directly, as it violates security policies. 2. **Style Isolation Compatibility**: Always ensure that the CSS is compatible with style isolation to prevent namespace breaches. 3. **Static Resources Only**: All CSS must be saved in static resources and referenced securely. 4. **No External Loading**: Avoid loading CSS from third-party sources directly. ### Additional Guidelines - Ensure all CSS files are properly version-controlled within your package - Maintain proper namespace isolation - Follow Salesforce's security standards for resource loading - Test thoroughly to ensure compliance with security requirements This approach ensures secure CSS loading while maintaining compliance with Salesforce's security policies.