Screenshot

(screenshots are from a 5.0.0 production build)

Screenshot of the problem: CSS Class is blank for ul and li elements: Image

Screenshot of CSS Class being applied for div and span elements: Image

Description

When building a handlebar chart, the default content is an un ordered list with list items styled with a CSS class. For some reason, the classes are not applied only to list items, whereas they are working with other HTML elements.

snapshot of relevant superset config settings pasted here:

HTML_SANITIZATION = True
HTML_SANITIZATION_SCHEMA_EXTENSIONS = {
    "attributes": {
        "*": ["style", "className", "class"],
    },
    "tagNames": ["style", "ul", "ol", "li"],
}
TALISMAN_ENABLED = False
TALISMAN_CONFIG = {
    "content_security_policy": {
        "default-src": ["'self'", "'unsafe-inline'", "'unsafe-eval'"]
    }
}
FEATURE_FLAGS = {
    "EMBEDDED_SUPERSET": True,
    "DRILL_TO_DETAIL": True,
    "ALLOW_ADHOC_SUBQUERY": True,
    "DASHBOARD_VIRTUALIZATION": False,
    "GLOBAL_ASYNC_QUERIES": True,
    "DASHBOARD_RBAC": True,
    "GUEST_TOKEN": True,
    "THUMBNAILS": True,
    "PLAYWRIGHT_REPORTS_AND_THUMBNAILS": True,
    "THUMBNAILS_SQLA_LISTENERS": True,
    "ENABLE_DASHBOARD_SCREENSHOT_ENDPOINTS": True,
    "ENABLE_DASHBOARD_DOWNLOAD_WEBDRIVER_SCREENSHOT": True,
    "LISTVIEWS_DEFAULT_CARD_VIEW": True,
}

I have tried making several adjustments to these config settings locally with no effect. Im concerned there may be something that changed with a dependency or recent update to superset since 4.0.2 that may be the cause, since we are on 5.0.0.

There is a related issue where this seems to be unresolved and the author seemed to rely on 4.0.2 instead of master,

Comment From: dosubot[bot]

Hi @tdclemens! I'm Dosu and I’m helping the superset team.

This issue is caused by the frontend HTML sanitizer in Superset 5.0.0, which does not whitelist the class or style attributes for ul, ol, or li elements. As a result, CSS classes and styles are stripped from these elements, even though your backend config allows them. This is a change introduced with the new XSS filter logic in recent versions.

To fix this, you need to update the whitelist in superset-frontend/packages/superset-ui-core/src/utils/html.tsx to explicitly allow 'class' and 'style' attributes for ul, ol, and li. For example, add:

ul: ['class', 'style'],
ol: ['class', 'style'],
li: ['class', 'style'],

to the whiteList object alongside the existing entries for div, span, etc. This will allow your CSS classes and styles to be preserved for lists in Handlebar charts. Backend config changes alone are not sufficient because the frontend sanitizer independently strips these attributes unless whitelisted here. After making this change, rebuild the frontend and reload your charts to verify the fix.

For more details, see the relevant code and discussion here and here.

To reply, just mention @dosu.

How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other  Join Discord Share on X

Comment From: tdclemens

@dosubot i added those entries to the whitelist and attempted to rebuild with:

 docker-compose up -d --build

and also

npm run build-dev

The issue still persists. Are you sure that superset-ui-core is being used properly with my local development setup?

Comment From: dosubot[bot]

Your changes to superset-ui-core may not be picked up if you only run npm run build-dev or docker-compose up --build. For changes in packages like superset-ui-core, you need to run npm run plugins:build in the superset-frontend root before building the frontend. This step transpiles the package source to lib/esm, which the main app bundle uses. After that, run npm run build-dev or npm run dev-server, then access Superset at http://localhost:9000 (not 8088) to see your changes reflected. If changes still don't show up, try npm run prune to clean node_modules and build artifacts, then repeat the build steps. Also, clear your browser cache and do a hard refresh. If you're using Docker Compose for dev, make sure your local superset-frontend directory is mounted and the webpack dev server is running in the container—edits to src/ should show up live in the browser without a manual build if everything is set up right.
Reference

To reply, just mention @dosu.

How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other  Join Discord Share on X

Comment From: tdclemens

for anyone else looking at this, even after making those changes I was not able to fix the problem in a production build.