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

"Improper CSS Load" vulnerabilities occur when CSS is loaded in ways that violate Salesforce's security policies, creating potential security risks. **What Causes These Vulnerabilities:** 1. **External CSS Loading**: Loading CSS from third-party sources instead of being included in static resources 2. **Using `<link>` Tags**: Directly referencing external CSS files using `<link>` tags 3. **Dynamic CSS Loading**: Loading CSS dynamically from external sources without proper security measures 4. **Style Tag Issues**: Using dynamic styling values in `<style>` tags 5. **Namespace Isolation Breaches**: CSS that can interfere with other components or break style isolation **Why These Are Flagged:** - Violates security policies and introduces risks from external dependencies - Can lead to namespace isolation breaches where one component may interfere with another - Exposure to potential security risks from untrusted sources - Can compromise the security and integrity of the application **How to Fix These Vulnerabilities:** **Primary Resolution Steps:** 1. **Use Static Resources**: Save all third-party CSS files in static resources. Avoid directly linking to external CSS files using the `<link>` tag. 2. **Reference CSS Securely**: Use the `<ltng:require>` tag in your Lightning component markup to securely reference CSS files from static resources. 3. **Adhere to Style Isolation**: Ensure your CSS does not use directives that conflict with style isolation, such as absolute positioning, to maintain secure and isolated namespaces. **Specific Implementation:** - Save CSS files in the static resources folder of your package - Reference them securely in your components - For Lightning components, use the `<ltng:require>` tag to include the CSS from static resources - Avoid using the `<link>` tag to load external CSS resources - Ensure CSS adheres to style isolation principles to prevent namespace breaches or interference between components - Use relative positioning in your CSS instead of absolute positioning to maintain compatibility with style isolation **Best Practices:** - Include all CSS in your solution package for proper version control - Avoid dynamic loading of CSS from external sources - Ensure compliance with security policies and prevent vulnerabilities in your Lightning components - Test thoroughly to confirm all vulnerabilities are resolved By implementing these practices, you can address vulnerabilities and comply with Salesforce's security policies.