Unable to use Quicksight dashboard as embeded url on S3/cloudfront whitelisted domain

Question

I was trying to view Quicksight dashboard as embedded url from our domain which was whitelisted in AWS Quicksight account. Our website is hosted on S3 bucket as a static website. Below sample, a javascript function is given on an AWS Blog.

Below is the sample javascript function.

function embedDashboard() {
                var containerDiv = document.getElementById("dashboardContainer");
                var options = {
                    url: "<signed URL from Step 3>",
                    container: containerDiv,
                    parameters: {
                        country: 'United States'
                    },
                    scrolling: "no",
                    height: "700px",
                    width: "1000px"
                };
                dashboard = QuickSightEmbedding.embedDashboard(options);
                dashboard.on('error', onError);
                dashboard.on('load', onDashboardLoad);
            }

Full example is given on another link of the same blog Amazon QuickSight JavaScript SDK

Unfortunately, the sample is not working.

I Bajwa PHD · Accepted Answer · 2019-02-14T04:20:20.917

Below is a complete html sample page (dashboard.html), including the javascript function.

<!DOCTYPE html>
    <html>
    <head>
        <title>My Dashboard</title>
        <script type="text/javascript" src="quicksight-embedding-js-sdk.min.js"></script>
        <script type="text/javascript">
            function embedDashboard() {
                var containerDiv = document.getElementById("dashboardContainer");
                var params = {
                    url: "<signed URL>",
                    container: containerDiv,
                    parameters: {
                    },
                    height: "700px",
                    width: "1000px"
                };
                var dashboard = QuickSightEmbedding.embedDashboard(params);
                dashboard.on('error', function(err) {console.log('dashboard error:', err)});
                dashboard.on('load', function() {});
            }
        </script>
    </head>
    <body onload="embedDashboard()">
        <div id="dashboardContainer"></div>
    </body>
    </html>

Sample is taken from same AWS blog and made some changes.

Overall steps are summarized below.

Below line was changed. Above line was changed with below line. Downloaded .js and lib files

Some .js and lib files were also downloaded from below address and uploaded on the website with the dashboard.html page.

https://unpkg.com/amazon-quicksight-embedding-sdk@1.0.2/dist/ S3/Cloudfront configuration

Since whitelisted domain on quicksight setting is an https url, so had to configure s3 static website with Cloudfront.

--created s3 bucket with dashboard.mydomain.com.au

--created Cloudfront web distribution including SSL from ACM.

--created A Record / Alias in Route53 with Cloudfront dns entry.

Generated dashboard-embed-url

AWS CLI command

aws quicksight get-dashboard-embed-url --aws-account-id 00000000000 --dashboard-id "xxxxxxx-xxxxxxx-xxxxxxx-xxxxxxx-xxxxxxx" --identity-type "IAM"

Used this Embedded / signed Url in dashboard.html in "signed URL"

Upload dashboard.html on s3 bucket.

Webpage is ready

Now webpage is available with quicksight dashboard from whitelisted domain.

https://dashboard.mydomain.com.au/dashboard.html

Unable to use Quicksight dashboard as embeded url on S3/cloudfront whitelisted domain

1 Answers1