dosubot[bot] commented on issue #30381: URL: https://github.com/apache/superset/issues/30381#issuecomment-2372427320
<!-- Answer --> I found a similar unsolved discussion that might be relevant to your issue: [Use HANDLEBARS Superset Chart](https://github.com/apache/superset/discussions/29919), which was last updated on 2024-08-12 <sup>[[1]](https://github.com/apache/superset/discussions/29919)</sup>. The CSS code defined in the "CSS styles" section of Handlebars chart settings is not being applied to the HTML template and is instead shown as plain text on the chart because HTML sanitization needs to be configured to use CSS. This is indicated by the tooltip message in the `StyleControl` component: ```tsx <InfoTooltipWithTrigger iconsStyle={{ marginLeft: theme.gridUnit }} tooltip={t('You need to configure HTML sanitization to use CSS')} /> ``` This suggests that without proper HTML sanitization configuration, the CSS will not be applied and will be rendered as plain text <sup>[[2]](https://github.com/apache/superset/blob/master/superset-frontend/plugins/plugin-chart-handlebars/src/plugin/controls/style.tsx)</sup>. To ensure CSS is applied correctly, you may need to adjust the `HTML_SANITIZATION_SCHEMA_EXTENSIONS` configuration. For example, to allow the `style` attribute for `div` elements, you can configure it as follows: ```python HTML_SANITIZATION_SCHEMA_EXTENSIONS = { "attributes": { "div": ["style"], }, } ``` Additionally, the `superset-frontend` package uses the `xss` library to handle HTML sanitization. The default whitelist in the `xss` filter includes attributes like `style`, `class`, and `title` for elements such as `span`, `div`, `a`, and `img`. However, CSS is disabled by default in the `xss` filter configuration: ```tsx const xssFilter = new FilterXSS({ whiteList: { ...getDefaultWhiteList(), span: ['style', 'class', 'title'], div: ['style', 'class'], a: ['style', 'class', 'href', 'title', 'target'], img: ['style', 'class', 'src', 'alt', 'title', 'width', 'height'], video: [ 'autoplay', 'controls', 'loop', 'preload', 'src', 'height', 'width', 'muted', ], }, stripIgnoreTag: true, css: false, }); ``` To ensure CSS is applied correctly, you may need to adjust the `css` property in the `xss` filter configuration or extend the sanitization schema as mentioned above <sup>[[3]](https://github.com/apache/superset/blob/master/superset/config.py)</sup><sup>[[4]](https://github.com/apache/superset/blob/master/superset-frontend/packages/superset-ui-core/src/utils/html.tsx)</sup>. <!-- Dosu Comment Footer --> *To continue talking to [Dosu](https://dosu.dev), mention @dosu.* -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: [email protected] For queries about this service, please contact Infrastructure at: [email protected] --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
