embedcontent-security-policyamazon-quicksight

Quicksight, CSP & embed URL

I created a dashboard using Quicksight service. I embed the url using generateEmbedUrlForRegisteredUser

On the frontend(React app), I use amazon-quicksight-embedding-sdk package to embed the url.

If I click the url,it opens my dashboard but on my application i have this error

Refused to frame 'https://{myzone}.quicksight.aws.amazon.com/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self'".

My helmet rules are:

const hemetRules= {
 crossOriginEmbedderPolicy: false,
  crossOriginResourcePolicy: false,
  crossOriginOpenerPolicy: false,
  xFrameOptions: false,
 contentSecurityPolicy: {
    directives: {
      defaultSrc: [self],
      connectSrc: [
  frameAncestors: [ 'self']
.......more
}
}

Do you have any idea about what is happening here? I'm blocked.

Thanks in advance

I tried to update the frameAncestor with:

frameAncestors: [ self, 'http://localhost:3000', 'https://eu-west-2.quicksight.aws.amazon.com/', ],

This is wrong

Solution

  • I had the same error. I fixed it by adding the domain where the react app was being hosted in the Domains and Embedding link the AWS Quicksight.

    You also need to make sure the region of the dashboard is the same as the Quicksight console you are accessing.

    I made a mistake adding a domain in us-east-1 not knowing that the dashboard was created on ap-southeast-2. Hope this helps!