Use HANDLEBARS Superset Chart

[marianysilva]

OBJECTIVE: Use HANDLEBARS Superset Chart

Docker image FROM apache/superset:4.0.2-py310

PROBLEM: When I update the chart, my HTML and CSS are rendered plain text, not styled elements.

I set Content Security Policy (CSP) envs:

TALISMAN_DEV_CONFIG (superset_config.py)

...
        'img-src': [
            "'self'",
            'blob:',
            'data:',
            'https://apachesuperset.gateway.scarf.sh',
            'https://static.scarf.sh/',
        ],
        'style-src': ["'self'", "'unsafe-inline'"],
        'script-src': ["'self'", "'strict-dynamic'", "'unsafe-eval'"],
...

I added HTML Sanitization envs (superset_config.py):

HTML_SANITIZATION = True
HTML_SANITIZATION_SCHEMA_EXTENSIONS = {
  "attributes": {
    "*": ["className"],
  },
  "tagNames": ["style"],
}

I create a new chart using Handlebars chart

I added this HTML:

<div class="hb-big-text-content">
  <span class="hb-big-text-result">
    {{#each data}}
      {{ ratio }}
    {{/each}}
  </span>
  <span class="hb-big-text-label">
    Ratio
  </span>
</div>

I added this CSS:

.hb-big-text-content {
    font-size: 40px;
    color: black;
}
.hb-big-text-result {
    font-weight: bold;
}
.hb-big-text-label {
    font-style: italic;
}

[marianysilva]

Make sure ESCAPE_MARKDOWN_HTML FEATURE_FLAGS is False.

[dosubot[bot]]

Hello, @marianysilva! I'm here to help you with any bugs, questions, or contributions you have. If you need assistance, feel free to ask.

To ensure that your HTML and CSS are rendered correctly in an Apache Superset Handlebars chart, follow these steps:

1. Enable Template Processing: Ensure that the ENABLE_TEMPLATE_PROCESSING feature flag is enabled in your superset_config.py file:

   FEATURE_FLAGS = {
       "ENABLE_TEMPLATE_PROCESSING": True,
   }

2. Disable HTML Escaping: Make sure the ESCAPE_MARKDOWN_HTML feature flag is set to False:

   FEATURE_FLAGS = {
       "ESCAPE_MARKDOWN_HTML": False,
   }

3. HTML and CSS in Handlebars Template: Ensure your CSS is included within a <style> tag and your HTML is correctly placed within the Handlebars template. Here is an example of how to structure your template:

   <style>
   .hb-big-text-content {
       font-size: 40px;
       color: black;
   }
   .hb-big-text-result {
       font-weight: bold;
   }
   .hb-big-text-label {
       font-style: italic;
   }
   </style>
   
   <div class="hb-big-text-content">
     <span class="hb-big-text-result">
       {{#each data}}
         {{ ratio }}
       {{/each}}
     </span>
     <span class="hb-big-text-label">
       Ratio
     </span>
   </div>

4. Sanitization Settings: Ensure your HTML sanitization settings are correctly configured. Since you have already set HTML_SANITIZATION to False, this should allow your HTML and CSS to render without being stripped out.

By following these steps, your HTML and CSS should render correctly in the Handlebars chart in Apache Superset ^[1][2].

To continue talking to Dosu, mention @dosu.

[praveer38]

@dosu Is it necessary for me to set Content Security Policy to achieve this?