Superset-UI：嵌入仪表盘获取Guest Token遇CSRF Token缺失问题

核心问题分析 #

你遇到的两个问题根源：

1. CSRF接口路径错误：旧版Superset的CSRF接口是/superset/csrf_token/，但v2+版本已改为/api/v1/security/csrf_token/，导致请求返回404。
2. Guest Token请求缺少CSRF头：Superset的POST接口（包括Guest Token生成接口）需要携带CSRF token，且请求流程需按规范执行。

分步解决方案 #

1. 配置Superset基础参数 #

首先确保Superset开启必要功能并配置跨域：
在superset_config.py中添加或修改以下配置：

# 启用Guest Token功能
ENABLE_GUEST_TOKEN = True

# 配置CORS，允许React应用跨域请求
ENABLE_CORS = True
CORS_OPTIONS = {
    "origins": ["http://localhost:3000"],  # 替换为你的React应用域名
    "supports_credentials": True,  # 允许携带认证信息/cookie
    "allow_headers": ["Content-Type", "Authorization", "X-CSRFToken"],
}

修改后重启Superset服务，同时需在Superset后台给登录用户的角色添加can_grant_guest_token权限。

2. 修正前端请求流程 #

完整的Guest Token获取需三步：登录获取access token → 获取CSRF token → 请求Guest Token，以下是修正后的React组件代码：

// SupersetDashboard.js
import React, { useState, useEffect } from 'react';
import { embedDashboard } from '@superset-ui/embedded-sdk';

const SupersetDashboard = () => {
  const [guestToken, setGuestToken] = useState('');
  const [embedUrl, setEmbedUrl] = useState('');
  const dashboardId = '06e1a493-5c79-46f5-add3-9b7c980bf5b4';
  const supersetHost = 'http://localhost:8099';

  useEffect(() => {
    const fetchGuestToken = async () => {
      try {
        // 步骤1：登录获取access token
        const loginResp = await fetch(`${supersetHost}/api/v1/security/login`, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            username: 'admin', // 替换为你的Superset用户名
            password: 'admin', // 替换为你的Superset密码
            provider: 'db',
          }),
          credentials: 'include', // 携带cookie，需CORS配置支持
        });
        const loginData = await loginResp.json();
        const accessToken = loginData.access_token;

        // 步骤2：获取CSRF token（v2+版本正确接口）
        const csrfResp = await fetch(`${supersetHost}/api/v1/security/csrf_token/`, {
          method: 'GET',
          headers: { Authorization: `Bearer ${accessToken}` },
          credentials: 'include',
        });
        const csrfData = await csrfResp.json();
        const csrfToken = csrfData.result;

        // 步骤3：请求生成Guest Token
        const guestTokenResp = await fetch(`${supersetHost}/api/v1/security/guest_token/`, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
            Authorization: `Bearer ${accessToken}`,
            'X-CSRFToken': csrfToken,
          },
          body: JSON.stringify({
            user: {
              username: 'embedded_guest',
              first_name: 'Embedded',
              last_name: 'Guest',
            },
            resources: [{ type: 'dashboard', id: dashboardId }],
            rls: [], // 可选：添加行级数据过滤规则
          }),
          credentials: 'include',
        });
        const guestTokenData = await guestTokenResp.json();
        setGuestToken(guestTokenData.token);
      } catch (err) {
        console.error('Guest Token获取失败:', err);
      }
    };

    fetchGuestToken();
  }, []);

  useEffect(() => {
    if (guestToken) {
      const url = embedDashboard({
        host: supersetHost,
        id: dashboardId,
        token: guestToken,
      });
      setEmbedUrl(url);
    }
  }, [guestToken]);

  return (
    <div>
      {embedUrl && <iframe src={embedUrl} width="100%" height="600" frameBorder="0" />}
    </div>
  );
};

export default SupersetDashboard;

3. 生产环境注意事项 #

• 禁止前端暴露敏感信息：生产环境需将Guest Token的生成逻辑移至你的后端服务，前端调用自有后端接口获取Token，避免Superset账号密码泄露。
• 权限最小化：生成Guest Token的Superset用户仅需分配必要权限，降低安全风险。

内容的提问来源于stack exchange，提问作者devwolf010