Embedding and preview errors

My embedded dashboard shows the message 'Message seems corrupt or manipulated'

Also, when i try to preview the dashboard in the embedding menu i get 'This content is blocked. Contact the site owner to fix the issue.'

This is my diagnosis info:

{
  "browser-info": {
    "language": "en-US",
    "platform": "Win32",
    "userAgent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/125.0.0.0 Safari/537.36",
    "vendor": "Google Inc."
  },
  "system-info": {
    "file.encoding": "Cp1252",
    "java.runtime.name": "Java(TM) SE Runtime Environment",
    "java.runtime.version": "11.0.22+9-LTS-219",
    "java.vendor": "Oracle Corporation",
    "java.vendor.url": "https://openjdk.java.net/",
    "java.version": "11.0.22",
    "java.vm.name": "Java HotSpot(TM) 64-Bit Server VM",
    "java.vm.version": "11.0.22+9-LTS-219",
    "os.name": "Windows 11",
    "os.version": "10.0",
    "user.language": "es",
    "user.timezone": "America/Buenos_Aires"
  },
  "metabase-info": {
    "databases": [
      "h2",
      "sqlserver"
    ],
    "hosting-env": "unknown",
    "application-database": "h2",
    "application-database-details": {
      "database": {
        "name": "H2",
        "version": "2.1.214 (2022-06-13)"
      },
      "jdbc-driver": {
        "name": "H2 JDBC Driver",
        "version": "2.1.214 (2022-06-13)"
      }
    },
    "run-mode": "prod",
    "version": {
      "date": "2024-05-16",
      "tag": "v0.49.11",
      "hash": "b894f2d"
    },
    "settings": {
      "report-timezone": null
    }
  }
}

I generate my token in a .NET service, for testing purposes, i copy that token and use it in my angular app to send the token in the URL request.
This is my token generation script:


     var data = Convert.FromBase64String(_configuration.GetSection("SecretKey").Value); 
     var securityKey = new SymmetricSecurityKey(data);

     var quest = new Dictionary<string, Int16>();
     quest.Add("dashboard", 1);

     //Empty dictionary for the params. Anything else gives odd results
     var pars = new Dictionary<string, string>();

     JwtPayload payload = new JwtPayload
     {
         {"resource",quest } ,
         {"params" ,pars},
         { "exp", DateTime.Now.AddMinutes(120) }
     };

     var tokenAttributes = new SecurityTokenDescriptor
     {
         Claims = payload,
         Expires = DateTime.Now.AddMinutes(120),
         SigningCredentials = new SigningCredentials(securityKey, SecurityAlgorithms.HmacSha256)
     };

     var handler = new Microsoft.IdentityModel.JsonWebTokens.JsonWebTokenHandler();
     handler.SetDefaultTimesOnTokenCreation = false;
     var tokenString = handler.CreateToken(tokenAttributes);
     return tokenString;
 }

The generated token payload looks correct when i verify it in jwt.io

{
  "resource": {
    "dashboard": 1
  },
  "params": {},
  "exp": 1716991881
}

Then i grab the token and use it in my angular app:

   let token = <token generated in my .NET service using metabase's signing key>
   var METABASE_SITE_URL = "http://localhost:3000";
   
   this.iframeUrl = this.sanitizer.bypassSecurityTrustResourceUrl( METABASE_SITE_URL + "/embed/dashboard/" + token + "#bordered=true&titled=true");

When i try to access the preview, the console shows the following errors:
GET http://localhost:3000/app/dist/theme-metabase.js net::ERR_ABORTED 404 (Not Found)

Refused to frame 'http://127.0.0.1:3000/' because it violates the following Content Security Policy directive: "child-src 'self' https://accounts.google.com". Note that 'frame-src' was not explicitly set, so 'child-src' is used as a fallback.

The 'Content is blocked' is correct as you're not using https. Happens in all my dev environments, works fine once published properly to a live site.

Other error, not sure. Have you set all the filters correctly?

1 Like

Ok that makes sense for the 'Content is blocked' error.

My dashboard doesn't have filters, also i'm using an URL as shown in the example provided by metabase for the dashboard_ var iframeUrl = METABASE_SITE_URL + "/embed/dashboard/" + token + "#bordered=true&titled=true";

Found the error. Since I was testing different ways to create the token, I overlooked a little mistake in the token creation in my .NET service:

     JwtPayload payload = new JwtPayload
     {
         {"resource",quest } ,
         {"params" ,pars},
         { "exp", DateTime.Now.AddMinutes(120) }
     };

     var tokenAttributes = new SecurityTokenDescriptor
     {
         Claims = payload,
         Expires = DateTime.Now.AddMinutes(120),
         SigningCredentials = new SigningCredentials(securityKey, SecurityAlgorithms.HmacSha256)
     };

I was setting the expiration date both in the payload and in the token attributes.

Also, I needed to change the way I obtain the SecretKey from my appsettings in the .NET service.
It went from this:
var data = Convert.FromBase64String(_configuration.GetSection("SecretKey").Value);
to this:
var data = Encoding.UTF8.GetBytes(_configuration.GetSection("SecretKey").Value);

After this, Metabase was able to properly decode the token.

your problems are 2:

  1. you have a different site url to the one you're using
  2. your signing key is wrong