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

Current Status:VALID_RESPONSEErrorUnable to AnswerSuggests Case

Current FAQ

Question
How should CSS files be properly loaded in Lightning applications to pass security review?
Answer
To properly load CSS files in Lightning applications and pass the security review, follow these comprehensive requirements: **Primary Loading Method:** 1. Save third-party CSS files in **static resources** 2. Add these static resources to your solution package 3. Reference the CSS using the `<ltng:require>` tag in the component's markup **Requirements for Loading JavaScript and CSS from Static Resources:** 1. **Save Files in Static Resources**: JavaScript and CSS files must be stored in the Static Resources folder of your package. 2. **Use Secure References**: Reference these resources using secure methods like `$Resource` URLs in Visualforce, Aura, or Lightning Web Components. 3. **Avoid Third-Party Endpoints**: Dynamically loading JavaScript or CSS from third-party sources is not allowed, except for specific approved libraries like Google Maps and Stripe. 4. **Use `<ltng:require>` for CSS**: In Lightning components, use the `<ltng:require>` tag to securely reference CSS from static resources. 5. **Version Control**: Ensure all resources are version-controlled within the package for traceability and compliance with security reviews. **Security Compliance:** This method ensures compliance with security review requirements by: - Avoiding the use of external links to load CSS - Maintaining proper version control - Ensuring all resources are reviewable within the package - Preventing vulnerabilities from external dependencies - Meeting Salesforce's security standards for resource loading
Enhancing FAQ...

Enhancing FAQ with AI recommendations...

AI Recommended Enhancement

Related Security Rules (click to view)
LoadCSSLinkHref
Question
How should CSS files be properly loaded in Lightning applications to pass security review?
Recommended Answer Update
To properly load CSS files in Lightning applications and pass the security review, follow these comprehensive requirements: **Primary Loading Method:** 1. Save third-party CSS files in **static resources** 2. Add these static resources to your solution package 3. Reference the CSS using the `<ltng:require>` tag in the component's markup **Requirements for Loading JavaScript and CSS from Static Resources:** 1. **Save Files in Static Resources**: JavaScript and CSS files must be stored in the Static Resources folder of your package. 2. **Use Secure References**: Reference these resources using secure methods like `$Resource` URLs in Visualforce, Aura, or Lightning Web Components. 3. **Avoid Third-Party Endpoints**: Dynamically loading JavaScript or CSS from third-party sources isn't allowed, except for specific approved libraries like Google Maps and Stripe. 4. **Use `<ltng:require>` for CSS**: In Lightning components, use the `<ltng:require>` tag to securely reference CSS from static resources. 5. **Version Control**: Ensure all resources are version-controlled within the package for traceability and compliance with security reviews. **Security Compliance:** This method ensures compliance with security review requirements by: - Avoiding the use of external links to load CSS - Maintaining proper version control - Ensuring all resources are reviewable within the package - Preventing vulnerabilities from external dependencies - Meeting Salesforce's security standards for resource loading - Category: CSS and UI Security - Subcategory: Improper CSS Loading Vulnerabilities
Reasoning
I made one minor improvement to enhance the conversational tone per the brand guidelines. I changed 'is not allowed' to 'isn't allowed' to make the language more conversational while maintaining the same meaning and technical accuracy. All technical content remains intact and accurate. For related security rules, I selected LoadCSSLinkHref because it directly relates to the core topic of this FAQ - proper CSS loading in Lightning applications. The FAQ specifically teaches developers how to load CSS files securely using static resources and the `<ltng:require>` tag, which is exactly what the LoadCSSLinkHref rule is designed to enforce. The rule detects improper CSS loading via external links, and this FAQ provides the correct alternative approach that would help developers avoid violating this rule.
Reasoning References