AWS QuickSight 嵌入控制面板在 Chrome 和 Firefox 中抛出 Errors/Warnings

Question

我已成功生成 QuickSight 仪表板 url，但是当我尝试使用 quicksight-embedding-sdk 将我的仪表板嵌入我的 Amplify 应用程序时，包含嵌入式仪表板的 div 将不会显示仪表板，而是一个错误。

在Chrome中是： “us-east-1.quicksight.aws.amazon.com 拒绝连接。”

有了这些“问题”：

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

在 Firefox 中是：

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

有这些警告：

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

我目前的工作流程是：我的 Amplify 应用程序中的用户登录，这些 Cognito 凭据用于调用触发 lambda 函数的 api，该函数注册用户然后生成嵌入 url，然后成功返回。

我已经将仪表板共享给通过我的应用程序注册并将我的放大应用程序域列入白名单的用户。

我不确定这是否重要，但我的 Cognito 和仪表板在 'us-east-2' 中，但我必须使用 'us-east-1' 来注册我的用户（否则我会收到错误消息，要求我使用'us-east-1').

相关代码片段：

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);
},

我不确定我是否刚刚破坏了某些东西，或者 Chrome/Firefox 是否不再支持此库。我之前看到浏览器支持有问题 https://answers.quicksight.aws.amazon.com/sn/questions/4701/quicksight-embedding-no-longer-works-in-new-chrome.html？但从我认为已经处理的回复来看。

感谢您提供的所有帮助和见解！

Answer 1

我试过了

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

var quicksight = new AWS.QuickSight();

在注册用户之后（按用户分类，数据在 us-east-2 中）但在创建嵌入之前 url 一时兴起，我的仪表板现在正在显示。

AWS QuickSight 嵌入控制面板在 Chrome 和 Firefox 中抛出 Errors/Warnings

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

javascript

amazon-web-services

aws-lambda

aws-amplify

amazon-quicksight