Superset中自定义CSS引入Google Fonts的解决方案

Apache Superset作为一款开源的数据可视化工具，允许用户通过"Edit CSS Live"功能自定义仪表盘样式。但在实际使用中，用户可能会遇到无法通过@import引入Google Fonts字体的问题。本文将深入分析这一现象的技术原因，并提供完整的解决方案。

问题本质分析

当用户在Superset的"Edit CSS Live"部分尝试使用以下代码引入Google Fonts时：

@import url('https://fonts.googleapis.com/css2?family=Prompt&display=swap');
body{
  font-family:'Prompt';
}

会发现字体并未生效。这并非Superset的bug，而是系统安全机制的正常表现。

根本原因

Superset内置了严格的内容安全策略(CSP)，这是现代Web应用常见的安全防护措施。CSP通过限制外部资源加载来防止XSS等攻击。具体到字体加载，Superset默认配置只允许加载同源('self')的字体资源，因此会拦截来自fonts.googleapis.com的外部字体请求。

解决方案

要解决此问题，需要修改Superset的安全配置，主要有两种方法：

方法一：修改TALISMAN_CONFIG

1. 定位到Superset的配置文件config.py
2. 找到或添加TALISMAN_CONFIG配置项
3. 在content_security_policy中添加字体域白名单：

TALISMAN_CONFIG = {
    'content_security_policy': {
        'font-src': "'self' https://fonts.googleapis.com https://fonts.gstatic.com",
        # 保留其他现有策略...
    }
}

方法二：调整.htaccess配置

对于使用Apache部署的Superset实例，可以修改.htaccess文件中的CSP头：

Header set Content-Security-Policy "font-src 'self' https://fonts.googleapis.com https://fonts.gstatic.com; ..."

注意事项

1. 修改配置后需要重启Superset服务使变更生效
2. 添加外部域会略微降低安全性，应确保只添加可信的域名
3. 在生产环境中，建议考虑将字体文件下载到本地使用，避免依赖外部资源
4. 如果使用Docker部署，需要确保配置修改能持久化到容器中

替代方案

如果不想修改安全策略，也可以考虑：

1. 使用系统内置字体替代
2. 将字体文件下载后放入Superset静态资源目录
3. 使用Base64编码将字体直接嵌入CSS中

通过以上方法，用户可以在保持系统安全性的同时，灵活地使用各种Google Fonts来美化Superset仪表盘。