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

### Proper CSS Usage in Security Reviews: - **Relative Positioning**: Use relative positioning instead of absolute or fixed positioning to maintain compatibility with style isolation. - **Static Resources**: Save external CSS resources in static resources and reference them securely using tags like `<ltng:require>` in Lightning components. - **Avoid Inline CSS**: Avoid inline CSS with hardcoded values unless justified and documented as a false positive. - **Secure Resource Loading**: Include CSS files in static resources and reference them using appropriate secure methods. - **Style Isolation Compliance**: Ensure CSS directives are compatible with style isolation to prevent namespace isolation breaches. - **Version Control**: Ensure all CSS resources are properly version-controlled within the package. ### Problematic CSS Usage in Security Reviews: - **Absolute or Fixed Positioning**: Using these for exposed components can lead to security risks and clickjacking vulnerabilities. - **Dynamic CSS Loading**: Dynamically loading CSS from third-party sources or using the `<link>` tag to load external CSS violates security policies. - **Non-Adherence to Secure Practices**: Practices that create vulnerabilities, such as clickjacking or style isolation breaches, are flagged. - **External Resource Loading**: Loading CSS directly from third-party endpoints without proper security measures. - **Incompatible CSS Directives**: Using directives that breach style isolation, potentially allowing one component to interfere with another. - **Unsafe Attributes or Directives**: Avoid using attributes that could compromise component security. - **Inline CSS Violations**: Using inline CSS that poses security risks or violates style isolation. **Security Review Criteria:** 1. **CSS Properties Flagged**: Specific CSS properties like `position: absolute` or `position: fixed` are automatically flagged during the AppExchange Security Review if they are used in Lightning Web Components (LWC) or Aura components. 2. **Exception Conditions**: These properties may be allowed if the component is not exposed outside its namespace or is limited to specific pages owned by the namespace. 3. **Documentation Requirements**: Following secure coding practices and documenting exceptions with proper justification is key to passing security reviews. **Best Practices for Approval:** - Use secure methods for CSS loading and management - Maintain proper namespace isolation - Document any necessary exceptions with clear business justification - Follow Salesforce's secure coding guidelines - Ensure all CSS practices align with security standards By following these guidelines, you can ensure your CSS implementation meets security review requirements and avoids common pitfalls that lead to review failures.