Embedding and preview errors

Get Help
1

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

image
image866×614 10.2 KB

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.'

image
image1108×744 26.6 KB

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.

2

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
3

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";

4

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.

5

your problems are 2:

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