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

Acceptable inline CSS usage in managed packages involves adhering to secure coding practices and avoiding vulnerabilities, while problematic usage can introduce security risks: **Acceptable Inline CSS Usage:** 1. **Secure Coding Compliance**: Inline CSS that adheres to secure coding practices and doesn't violate style isolation or security guidelines 2. **Safe Hardcoded Values**: Using styles like "overflow: hidden" that don't conflict with style isolation or create security risks 3. **Controlled Environment**: When the component is used in a controlled environment and isn't exposed globally 4. **Proper Justification**: When inline CSS is essential for specific business features and doesn't pose security risks, with proper documentation 5. **Self-Contained Components**: In self-contained application components where the CSS doesn't interfere with other components **Problematic Inline CSS Usage:** 1. **Absolute or Fixed Positioning**: These can lead to clickjacking issues, especially if the component is exposed outside the namespace 2. **Unsafe Patterns**: Inline CSS that manipulates the DOM or uses insecure methods 3. **Style Isolation Breaches**: CSS that compromises the isolated sandbox environment of the Salesforce Platform 4. **Namespace Violations**: Inline CSS that causes breaches in namespace isolation 5. **Security Vulnerabilities**: CSS that can lead to vulnerabilities like clickjacking and cross-site scripting (XSS) 6. **UI Manipulation Risks**: Styles that can allow malicious actors to manipulate the user interface or compromise application security **Risk Mitigation Guidelines:** 1. **Prioritize Relative Positioning**: Use relative positioning instead of absolute or fixed positioning 2. **Ensure Compliance**: Follow style isolation guidelines and security requirements 3. **Proper Documentation**: Document any necessary inline CSS usage with clear business justification 4. **Security Testing**: Test thoroughly to ensure no vulnerabilities are introduced 5. **Alternative Methods**: Consider using static resources or CSS custom properties when possible **When Inline CSS Became a Concern:** Inline CSS became a security concern in managed packages because it's incompatible with style isolation and can introduce vulnerabilities like clickjacking. To address this, you're required to use static resources for CSS, ensuring secure and isolated styling within the Salesforce framework. **Best Practices:** - Use inline CSS sparingly and only when necessary - Ensure any inline CSS doesn't compromise security or style isolation - Document exceptions with proper justification - Follow Salesforce's security guidelines for CSS usage - Consider alternatives like static resources when possible - Category: CSS and UI Security - Subcategory: Inline CSS Security Issues

The content was refined for better clarity and tone without removing any existing points. Minor improvements included: changing 'is not exposed globally' to 'isn't exposed globally' (using contractions as per tone guidelines), changing 'developers are required' to 'you're required' (more conversational and direct), and removing 'is discouraged' (redundant since it's already in the problematic section). These changes make the FAQ more conversational while maintaining all technical accuracy and completeness. The LoadCSSApexStylesheet rule was selected because it directly relates to the FAQ's discussion of using static resources for CSS instead of inline styles - the rule specifically detects loading CSS through Apex.stylesheet which conflicts with the FAQ's recommendation to use static resources. The LoadCSSLinkHref rule was selected because it relates to CSS loading practices discussed in the FAQ's recommendations about using static resources and proper CSS handling methods.