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

Current Status:VALID_RESPONSEErrorUnable to AnswerSuggests Case

Current FAQ

Question
What are the specific CSS-related security requirements and restrictions for managed packages?
Answer
### CSS-Related Security Requirements for Managed Packages: **Primary Requirements:** 1. **Avoid Dynamically Loading Third-Party CSS**: Include all CSS and resources in the static resources folder of your package instead of loading them from external sources. 2. **Ensure Compatibility with Style Isolation**: Avoid using CSS directives that could breach namespace isolation, as this may lead to unintended interference between components. **Specific Restrictions:** 1. **`position: absolute` or `position: fixed`**: These are not allowed in Lightning Web Components (LWC) and Aura components' CSS because they can interfere with other components or make a page unusable. Exceptions apply if the component is not exposed outside its namespace or is limited to pages owned by the namespace. 2. **Incompatible CSS Directives**: Avoid directives that breach style isolation, as they can lead to namespace isolation issues and unintended interference between components. 3. **External CSS Loading**: Using the `<link>` tag to load external CSS resources is prohibited. Instead, include CSS files in static resources and reference them securely. **Security Practices Considered Violations:** 1. **Incompatible CSS Directives**: Using directives like absolute positioning can breach style isolation and namespace boundaries. Use relative positioning to maintain compatibility. 2. **Directly Loading Third-Party CSS**: Avoid using the `<link>` tag to load third-party CSS files. Instead, save CSS files in static resources and reference them securely using the `<ltng:require>` tag in Lightning components. 3. **Inline CSS with Hardcoded Values**: Avoid using inline CSS with hardcoded values, as it can pose security risks. Follow secure development practices instead. **Component Exposure Considerations:** - For components with `isExposed` set to `true`, use relative positioning to reduce security risks - Absolute or fixed positioning is acceptable only if the component is not globally exposed (`isExposed` is set to `false`) - Ensure that CSS does not manipulate the DOM in ways that could compromise security **Best Practices:** - Include custom CSS in static resources instead of loading it from third-party sources - Refrain from using CSS directives that conflict with style isolation - Ensure any dynamically loaded CSS includes an integrity check to verify its authenticity - Follow secure coding standards to minimize potential vulnerabilities - Maintain the security and integrity of your managed package through proper CSS management These restrictions help maintain secure and consistent behavior across Salesforce components and prevent vulnerabilities like clickjacking and style isolation breaches.
Enhancing FAQ...

Enhancing FAQ with AI recommendations...

⚠️ Enhancement Error

Error Message
HerokuApiError: Heroku API request failed with status 403: Forbidden at ChatHeroku.postWithRetries (/Users/vivek.soni/work/faqtools/bin/faqenhance/node_modules/heroku-langchain/dist/cjs/model.js:85:27) at process.processTicksAndRejections (node:internal/process/task_queues:104:5) at async ChatHeroku._stream (/Users/vivek.soni/work/faqtools/bin/faqenhance/node_modules/heroku-langchain/dist/cjs/chat.js:648:26) at async ChatHeroku._streamResponseChunks (/Users/vivek.soni/work/faqtools/bin/faqenhance/node_modules/heroku-langchain/dist/cjs/chat.js:717:26) at async ChatHeroku._streamIterator (/Users/vivek.soni/work/faqtools/bin/faqenhance/node_modules/@langchain/core/dist/language_models/chat_models.cjs:111:22)