FAQ-000283 - CSS and UI Security / Dynamic CSS Styling Security

To handle dynamic styling in Lightning components without using `platformResourceLoader` or inline styles, follow these secure approaches: **Primary Method - Static Resources with ltng:require:** 1. Save your CSS files as **static resources** 2. Reference them securely within your component using the `<ltng:require>` tag For example: ```html <aura:component> <ltng:require styles="{{!$Resource.YourCSSResource + '/path/to/stylesheet.css'}}" /> </aura:component> ``` **Alternative Method - CSS Custom Properties:** 1. **Use CSS custom properties** (variables) in your component's stylesheet 2. **Dynamically update the values** of these CSS variables through JavaScript This approach ensures that styling is encapsulated and adheres to security best practices. For more details, refer to the Lightning Web Components documentation on using CSS custom properties. **Security Considerations:** - This approach ensures compliance with security policies - Avoids loading external CSS directly - Maintains proper version control - Prevents improper CSS load vulnerabilities - Ensures styling is securely managed within the Salesforce environment **Best Practices:** - Always use static resources for external CSS - Avoid direct manipulation of styles through JavaScript when possible - Use CSS custom properties for dynamic styling needs - Follow Salesforce's secure coding guidelines for CSS usage - Category: CSS and UI Security - Subcategory: Dynamic CSS Styling Security

The FAQ content is accurate and well-structured, addressing secure approaches for dynamic styling in Lightning components. I made minimal improvements to enhance clarity and flow while preserving all existing information and structure. Changes made: - Removed redundant "the required" before "CSS files" in step 1 for better readability - Changed "Reference them securely" to "Reference them securely" (no change needed) - Maintained all technical content, security considerations, and best practices exactly as provided - Preserved the category and subcategory information For LoadCSSLinkHref rule: This rule is directly relevant because the FAQ discusses loading CSS through `<ltng:require>` with static resources, which is the secure alternative to loading CSS via link href attributes that this rule flags as potentially problematic. For LoadCSSApexStylesheet rule: This rule applies because the FAQ addresses CSS loading in Lightning/Aura components and provides guidance on secure CSS loading practices using static resources and ltng:require, which aligns with avoiding the insecure CSS loading patterns that this rule detects.