FAQ-000316 - CSS and UI Security / Inline CSS Security Issues

When inline CSS is necessary for functionality in AppExchange components, you can use several alternatives that maintain security compliance: **Primary Alternatives:** 1. **Static Resources**: Store CSS in static resources and reference it securely within the component. For example, in Lightning Aura components, you can use the `<ltng:require>` tag to include CSS from static resources. 2. **CSS Custom Properties**: Use CSS custom properties for dynamic styling in Lightning Web Components. These allow you to define and apply styles dynamically based on conditions or inputs. 3. **Secure Reference Methods**: Reference CSS files securely using appropriate tags like `<ltng:require>` in Aura components or by importing them in LWC. **Implementation Guidelines:** 1. **Avoid Incompatible Directives**: Refrain from using CSS directives that are incompatible with style isolation, such as `position: absolute` or `position: fixed`, unless the component is not exposed outside the namespace or is limited to specific pages. 2. **Maintain Namespace Isolation**: Ensure that CSS alternatives don't breach namespace boundaries or interfere with other components. 3. **Version Control**: Ensure proper version control of all CSS resources within your package. **Security Considerations:** - This approach ensures compliance with security policies - Allows for proper version control of styling resources - Maintains style isolation and namespace boundaries - Prevents security vulnerabilities associated with inline CSS **Best Practices:** - Use static resources for external or reusable CSS - Implement CSS custom properties for dynamic styling needs - Follow secure coding practices for any styling requirements - Document any necessary exceptions with proper justification - Test thoroughly to ensure compliance with security requirements These alternatives provide the functionality you need while maintaining compliance with Salesforce's security standards.