AWS QuickSight Embedding Dashboard Throws Errors/Warnings in Chrome and Firefox

Question

I have successfully generated a QuickSight Dashboard url but when I try to use quicksight-embedding-sdk to embed my dashboard in my Amplify app the div containing the embedded dashboard will not display the dashboard but instead an error.

In Chrome it is: "us-east-1.quicksight.aws.amazon.com refused to connect."

With these "Issues":

 "Indicate whether to send a cookie in a cross-site request by specifying its SameSite attribute"

 "Indicate whether a cookie is intended to be set in cross-site context by specifying its SameSite 
 attribute"

In Firefox it is:

    "Firefox Can’t Open This Page
     To protect your security, us-east-1.quicksight.aws.amazon.com will not allow Firefox 
     to display the page if another site has embedded it. To see this page, 
     you need to open it in a new window."

With these warnings:

Content Security Policy: Couldn’t process unknown directive ‘report-to’
Cookie “qs_lang” will be soon rejected because it has the “sameSite” attribute set to “none” or an invalid value, without the “secure” attribute. To know more about the “sameSite“ attribute, read https://developer.mozilla.org/docs/Web/HTTP/Headers/Set-Cookie/SameSite
This error page has no error code in its security info

My current workflow is: A user in my Amplify app logs in, those Cognito credentials are used to call an api that triggers a lambda function, the function registers a user and then generates an embed url, which is then returned successfully.

I have already shared the dashboard to the user that was registered via my app and whitelisted my amplify app's domain.

I'm not sure if it matters but my cognito and dashboard are in 'us-east-2' but I had to use 'us-east-1' to register my user (otherwise I would get an error asking me to use 'us-east-1').

Relevant code snippets:

HTML:

<div id="embeddingContainer"></div>

JS:

embedDashboard(embedUrl) {
    //embedUrl is being returned as expected
    const options = {
        url: embedUrl,
        container: document.getElementById("embeddingContainer"),
        scrolling: "no",
        height: "700px",
        width: "1000px",
        locale: "en-US",
        footerPaddingEnabled: true,
    };
    let dashboard = embedDashboard(options);
    dashboard.on("error", this.onError);
    dashboard.on("load", this.onDashboardLoad);
},
//Neither onDashboardLoad nor onError are being called
onDashboardLoad(payload) {
    console.log("Do something when the dashboard is fully loaded.", payload);
},
onError(payload) {
    console.log("Do something when the dashboard fails loading", payload);
},

I'm not sure if I have just broken something or if this library is no longer supported by Chrome/Firefox. I saw that there was an issue with browser support earlier https://answers.quicksight.aws.amazon.com/sn/questions/4701/quicksight-embedding-no-longer-works-in-new-chrome.html? but from the responses I had thought that had been handled.

Thanks for any and all help and insights!

Answer 1

I tried

AWS.config.update({
    "region": "us-east-2"
});

var quicksight = new AWS.QuickSight();

after registering a user (by users and data is in us-east-2) but before creating a embed url on a whim and my dashboard is now showing.