Encountering a "403 Forbidden" error while attempting to integrate a dashboard into Moodle application.

[charliezhang-canglory]

I'm attempting to integrate a Superset dashboard into my moodle website. Unfortunately, when embedding the dashboard, it consistently returns a "403: Forbidden" error, even when using an admin account.

{"errors": [{"message": "403 Forbidden: You don't have the permission to access the requested resource. It is either read-protected or not readable by the server.", "error_type": "GENERIC_BACKEND_ERROR", "level": "error", "extra": {"issue_codes": [{"code": 1011, "message": "Issue 1011 - Superset encountered an unexpected error."}]}}]}

Superset Application Config

SQLALCHEMY_DATABASE_URI = 'mysql://superset:RbuGWGseQAcc1232ews@localhost:3306/superset'

# Flask-WTF flag for CSRF
WTF_CSRF_ENABLED = False
# Add endpoints that need to be exempt from CSRF protection
WTF_CSRF_EXEMPT_LIST = []
# A CSRF token that expires in 1 year
WTF_CSRF_TIME_LIMIT = 60 * 60 * 24 * 365

# Set this API key to enable Mapbox visualizations
MAPBOX_API_KEY = ''
ENABLE_DASHBOARD_EMBED = True
ENABLE_CORS = True
FEATURE_FLAGS = {"DASHBOARD_CROSS_FILTERS": True, "ENABLE_TEMPLATE_PROCESSING": True, "DASHBOARD_NATIVE_FILTERS": True, "ENABLE_PUBLIC_DASHBOARDS": True, 'EMBEDDED_SUPERSET': True, 'ROW_LEVEL_SECURITY': False, 'DASHBOARD_RBAC': True}
PUBLIC_ROLE_LIKE = 'Gamma'
AUTH_ROLE_PUBLIC = 'Guest'

# Talisman Config
ALLOW_ORIGINS = ['https://mymoodle.com']
TALISMAN_ENABLED = True
TALISMAN_CONFIG = {
    "content_security_policy": {
        "frame-ancestors": ALLOW_ORIGINS
    },
    "force_https": False,
    "force_https_permanent": False,
    "frame_options": "ALLOWFROM",
    "frame_options_allow_from": "*"
}

# Dashboard embedding
GUEST_ROLE_NAME = "Gamma"
GUEST_TOKEN_JWT_SECRET = "zbrzkspQ5UgEsmGKQ5m3BZyFZdTBDdBfScUQHz63ico"
GUEST_TOKEN_JWT_ALGO = "HS256"
GUEST_TOKEN_HEADER_NAME = "X-GuestToken"
GUEST_TOKEN_JWT_EXP_SECONDS = 300  # 5 minutes


from redis import Redis
from flask_limiter import Limiter
from flask_limiter.util import get_remote_address
from superset.app import create_app

# Configure Redis
redis = Redis(host='localhost', port=6379)

# Set up Flask-Limiter with Redis
limiter = Limiter(
    key_func=get_remote_address,
    storage_uri="redis://localhost:6379"
)

Frontend Application

require_once($CFG->dirroot . '/local/embedmanager/classes/SupersetAPI.php');

$apiUrl = 'https://mysuperset.com';
$username = 'admin';
$password = '*******';
$dashboardId = '41e7112c-88d1-43de-88f8-d9624a3c14a7';
try {
    $supersetApi = new \local_embedmanager\SupersetAPI($apiUrl, $username, $password);
    $guestToken = $supersetApi->getGuestToken($dashboardId);
} catch (Exception $e) {
    echo "Error: " . $e->getMessage();
    exit;
}

$PAGE->requires->js(new moodle_url('/local/embedmanager/js/superset-embed.bundle.js'));
 echo '<div id="my-superset-container"></div>';

$PAGE->requires->js_init_code("
     document.addEventListener('DOMContentLoaded', function() {
       embedDashboard({
            id: ".$dashboardId.",
            supersetDomain: ".$apiUrl.",
            mountPoint: document.getElementById('my-superset-container'),
            fetchGuestToken:".$guestToken.",
            dashboardUiConfig: {
                hideTitle: true,
                filters: {
                    expanded: true,
                    visible: true
                }
            },
            iframeSandboxExtras: ['allow-top-navigation', 'allow-popups-to-escape-sandbox']
        });
    });
 ");

Backend Application

namespace local_embedmanager;

class SupersetAPI {
    private $apiUrl;
    private $username;
    private $password;
    private $accessToken;
    private $refreshToken;
    private $csrfToken;

    public function __construct($apiUrl, $username, $password) {
        $this->apiUrl = $apiUrl;
        $this->username = $username;
        $this->password = $password;
        $this->authenticate();
    }

    // 1. get and save access_token and refresh_token
    private function authenticate() {
        $url = $this->apiUrl . '/api/v1/security/login';
        $data = [
            "username" => $this->username,
            "password" => $this->password,
            "provider" => "db",
            "refresh" => true
        ];

        $response = $this->makeRequest($url, 'POST', $data);

        if (isset($response['access_token']) && isset($response['refresh_token'])) {
            $this->accessToken = $response['access_token'];
            $this->refreshToken = $response['refresh_token'];
        } else {
            throw new \Exception("Authentication failed: " . json_encode($response));
        }
    }

    // 2. refresh access_token
    private function refreshAccessToken() {
        $url = $this->apiUrl . '/api/v1/security/refresh';
        $data = ["refresh_token" => $this->refreshToken];

        $response = $this->makeRequest($url, 'POST', $data);

        if (isset($response['access_token'])) {
            $this->accessToken = $response['access_token'];
        } else {
            throw new \Exception("Token refresh failed: " . json_encode($response));
        }
    }

    // 3. get CSRF Token
    private function fetchCSRFToken() {
        $url = $this->apiUrl . '/api/v1/security/csrf_token/';
        $data = ["credentials" => "include"];
        $response = $this->makeRequest($url, 'GET',$data);

        if (isset($response['result'])) {
            $this->csrfToken = $response['result'];
        } else {
            throw new \Exception("Failed to fetch CSRF token: " . json_encode($response));
        }
    }
// 4. get guest_token
    public function getGuestToken($dashboardId) {
        if (!$this->csrfToken) {
            $this->fetchCSRFToken();
        }
        $url = $this->apiUrl . '/api/v1/security/guest_token/';
        $data = [
            "user" => [
                "username" => "admin",
                "first_name" => "Green",
                "last_name" => "Li"
            ],
            "resources" => [
                [
                    "type" => "dashboard",
                    "id" => $dashboardId
                ]
            ],
            "rls" =>[]
        ];

        $response = $this->makeRequest($url, 'POST', $data, [
            'X-CSRFToken' => $this->csrfToken
        ]);

        if (isset($response['token'])) {
            return $response['token'];
        } else {
            throw new \Exception("Failed to get guest token: " . json_encode($response));
        }
    }

    // 5. common request function
    private function makeRequest($url, $method, $data = null, $additionalHeaders = []) {
        $ch = curl_init($url);
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
        curl_setopt($ch, CURLOPT_CUSTOMREQUEST, $method);
        curl_setopt($ch, CURLOPT_HTTPHEADER, array_merge([
            'Content-Type: application/json',
            'Authorization: Bearer ' . $this->accessToken
        ], $additionalHeaders));

        if ($data) {
            curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($data));
        }

        curl_setopt($ch, CURLOPT_COOKIEJAR, '/tmp/cookies.txt');
        curl_setopt($ch, CURLOPT_COOKIEFILE, '/tmp/cookies.txt');

        $response = curl_exec($ch);
        return json_decode($response, true);

Welcome to submit comments, thank you so much.

[dosubot[bot]]

Hey @charliezhang-canglory! 👋 I'm here to help you out with any bugs, questions, or contributions you have. If you need any assistance, feel free to ask!

To resolve the "403 Forbidden" error when embedding a Superset dashboard into a Moodle application, ensure the following configurations are correctly set:

1. Content Security Policy (CSP): Make sure the frame-ancestors directive in the TALISMAN_CONFIG section of your superset_config.py file includes the Moodle domain. This allows the Moodle domain to display Superset content.

   TALISMAN_CONFIG = {
       "content_security_policy": {
           "frame-ancestors": ["https://mymoodle.com"],
       },
       ...
   }

2. CORS Configuration: Ensure CORS is enabled by setting ENABLE_CORS = True in your superset_config.py file. You may also need to configure any necessary CORS options in CORS_OPTIONS.

3. Allowed Domains: Verify that the referrer domain (Moodle) is included in the allowed_domains for the embedded dashboard. If the referrer is not in the allowed domains, the request will be aborted with a 403 error.

4. Guest Token Configuration: Ensure that the GUEST_TOKEN_JWT_SECRET and related configurations are correctly set. This secret is used for encoding and decoding JWT for guest access tokens, which is crucial for security.

5. Restart Superset: After making these changes, restart Superset for the configuration changes to take effect.

These steps should help resolve the 403 error when embedding the dashboard into your Moodle application ^[1][2].

To continue talking to Dosu, mention @dosu.

[charliezhang-canglory]

I had try ,but not work for me.

ALLOW_ORIGINS = ['https://mymoodle.com']

ENABLE_DASHBOARD_EMBED = True
ENABLE_CORS = True
CORS_OPTIONS = {
    'supports_credentials': True,
    'allow_headers': ['*'],
    'resources':['*'],
    'origins': ALLOW_ORIGINS
}

FEATURE_FLAGS = {"DASHBOARD_CROSS_FILTERS": True, "ENABLE_TEMPLATE_PROCESSING": True, "DASHBOARD_NATIVE_FILTERS": True, "ENABLE_PUBLIC_DASHBOARDS": True, 'EMBEDDED_SUPERSET': True, 'ROW_LEVEL_SECURITY': False, 'DASHBOARD_RBAC': True}
PUBLIC_ROLE_LIKE = 'Gamma'
AUTH_ROLE_PUBLIC = 'Guest'

# Talisman Config
TALISMAN_ENABLED = True
TALISMAN_CONFIG = {
    "content_security_policy": {
        "frame-ancestors": ALLOW_ORIGINS
    },
    "force_https": False,
    "force_https_permanent": False,
    "frame_options": "ALLOWFROM",
    "frame_options_allow_from": "*"
}

# Dashboard embedding
GUEST_ROLE_NAME = "Public"
GUEST_TOKEN_JWT_SECRET = "test-guest-secret-change-me"
GUEST_TOKEN_JWT_ALGO = "HS256"
GUEST_TOKEN_HEADER_NAME = "X-GuestToken"
GUEST_TOKEN_JWT_EXP_SECONDS = 300  # 5 minutes

and my superset's version is 4.0.2

[charliezhang-canglory]

I found that after parsing the guest_token, the 'aud':“ http://0.0.0.0:8080/ ",

{
  "user": {
    "username": "cisb",
    "first_name": "CISB",
    "last_name": "Admin"
  },
  "resources": [
    {
      "type": "dashboard",
      "id": "41e7112c-88d1-43de-88f8-d9624a3c14a7"
    }
  ],
  "rls_rules": [],
  "iat": 1730945818.223444,
  "exp": 1730946118.223444,
  "aud": "http://0.0.0.0:8080/",
  "type": "guest"
}

And display Dashboard Id None in the action log of the superset backend