FAQ-000296 - CSS and UI Security / General CSS Security Best Practices

To implement CSS properly and avoid security review failures, follow these comprehensive guidelines: **Primary Implementation Requirements:** 1. **Avoid External CSS Loading**: Do not use the `<link>` tag to load external CSS resources. Instead, save third-party CSS files in static resources and reference them using the `<ltng:require>` tag in your Lightning components. 2. **Style Isolation Compatibility**: Avoid CSS directives like `position: absolute` that conflict with style isolation. Use `position: relative` to ensure compatibility with Salesforce's namespace isolation. 3. **Static Resources**: Include all CSS and other resources in static resources rather than dynamically loading them from third-party endpoints. 4. **Secure Coding Practices**: Avoid inline styles that could introduce vulnerabilities, such as `style="position: fixed"`, unless explicitly approved for specific use cases. **Secure Loading Methods:** **For Lightning Components:** - Use the `<ltng:require>` tag to reference CSS from static resources - Avoid dynamic loading of CSS from external sources - Ensure all CSS is properly packaged within your solution **For Visualforce Pages:** - Save CSS files in static resources - Reference using `$Resource` URLs - Avoid direct external links **Security Standards Compliance:** 1. **Namespace Isolation**: Ensure CSS doesn't breach namespace boundaries or interfere with other components 2. **Version Control**: Maintain proper version control of all CSS resources within the package 3. **Resource Management**: Include all third-party CSS in your package rather than loading externally 4. **Style Encapsulation**: Ensure styling is contained within components and doesn't affect other parts of the application **Best Practices:** 1. **Follow Salesforce Guidelines**: Refer to Salesforce's secure coding guidelines and packaging guide for detailed instructions on secure CSS usage and best practices. 2. **Proper Documentation**: Document any necessary exceptions with clear business justification 3. **Testing**: Thoroughly test CSS implementations to ensure they don't introduce security vulnerabilities 4. **Review Process**: Review all CSS implementations before submission to ensure compliance **Common Violations to Avoid:** - Loading CSS from third-party sources - Using incompatible CSS directives that breach style isolation - Dynamic CSS loading without proper security measures - Inline CSS that poses security risks - External resource dependencies that aren't properly managed These steps will help ensure your CSS implementation meets Salesforce's security standards and passes the security review process.