2

Setup:

I have generated a shareable link to a CloudWatch dashboard by following all of the steps on https://docs.aws.amazon.com/AmazonCloudWatch/latest/monitoring/cloudwatch-dashboard-sharing.html. I can paste the sharable link in my browser in order to view the dashboard, as expected.

Problem:

I cannot embed this dashboard in a third party website, although this functionality is explicitly supported by AWS.

What I have Tried:

I have tried embedding (which is supported according to documentation) this in my own website via iframe, in a similar manner to embedding a Splunk Embedded Report:

    <iframe src="https://cloudwatch.amazonaws.com/dashboard.html?dashboard=<REDACTED>"
            width="480" height="636"></iframe>

This fails with a message "Could not download CloudWatch Dashboards. Try refreshing the page" where the dashboard should display, and going to the "Network" tab in Chrome, I can see there was a CORS Error in response to a request initiated by CloudWatchDashboardsJS.min.js:300 . Hovering over the error has the slightly more descriptive message "Cross-Origin Resource Sharing error: MissingAllowOriginHeader".

Network Tab

I'm not super familiar with Cross-Origin-Request-Sharing, but shouldn't the browser be adding an Origin header to the request automatically? I have tried searching for "Add Origin Header to iframe request", but I'm confused by the results.

AWS Documentation doesn't actually say how to embed using the sharable link, so maybe I'm going off course by using an iframe in the first place?

I'm pretty lost at this point, and don't fully understand the next steps I'd need to take (especially compared to Splunk Embedded Reports which "just worked").

stevenjackson121
  • 510
  • 4
  • 16
  • Check this github repo out. https://github.com/aws-samples/aws-cloudwatch-building-dashboard-outside-aws-console – jellycsc Jul 20 '21 at 15:08
  • @jellycsc Thanks. I am aware of that repo and have successfully followed the steps in the readme in order to embed images of widgets in another place, but it has several limitations compared to directly embedding the entire dashboard. I'd like to embed the entire interactive dashboard, rather than infrequently updated images of certain widgets. – stevenjackson121 Jul 20 '21 at 19:34

1 Answers1

0

You can't do that via iframe, not at least from aws domain, but there is a repository to run in your server

https://github.com/aws-samples/aws-cloudwatch-building-dashboard-outside-aws-console

Here is a documentation how to do it. After you run to localhost (or your domain) then you can embed via iframe since it's samedomain.

enter image description here

flakerimi
  • 2,580
  • 3
  • 29
  • 49
  • 1
    Thanks. I am aware of that repo and have successfully followed the steps in the readme in order to embed images of widgets in another place, but it has several limitations compared to directly embedding the entire dashboard. I'd like to embed the entire interactive dashboard, rather than infrequently updated images of certain widgets. – stevenjackson121 Jul 26 '21 at 00:38
  • This is closest to your request. Just embedding is not possible due to CORS restrictions by AWS. This is best answer you could get. You are asking for impossible. – flakerimi Jul 26 '21 at 21:46
  • So the AWS documentation from my first link which states "Follow the steps in this section to share a dashboard publicly. This can be useful to display the dashboard on a big screen in a team room, or embed it in a Wiki page." is simply wrong? I admit that's certainly possible, but its a big leap given the typical quality of their documentation, and I dont want to mislead anyone else attempting this by accepting an answer I'm not sure is correct. Do you have a bug report link, official statement, or other authoritative reference for that claim? – stevenjackson121 Jul 26 '21 at 22:36
  • I didn't ask you to fix their documentation or their bugs. I only asked for a reference for a claim I find hard to believe without a reference. I appreciate you looking st my question and taking the time to answer, so I was trying to communicate what was stopping me from accepting the answer and awarding you the bounty. I will accept the answer if you're able to back up your claim with a reference. Alternatively, if your answer is based on personal experience with these two methods, or other expertise you have, I'd also accept the answer if you elaborated on those. – stevenjackson121 Jul 28 '21 at 17:12
  • And I am trying to help you. Like I said, there is no way to do it how your are approaching. Only way is how I explained, then instead of 'infrequently updated images of certain widgets' you create how often to update them. Real question is how badly do you need it. Because it will take some efforts to recreate everything because cors wont let you that, check this: https://stackoverflow.com/a/40866290/477902, As for my experience, I don't have creating cloudwatch dashboards, but I can assure you that I found hard way that you can't embed if they don't let you do it. – flakerimi Jul 29 '21 at 22:58