Hi all,
I am trying to embed the Quicksight console experience into my webpage and for this, I used the GenerateEmbedUrlForRegisteredUser API operation. I was successfully able to generate the embed url using AWS CLI commands. But, when I tried to use this embed url into my html code, the embedding did not work. The url generated by the CLI command works if I paste it in the browser and I am able to see the Quicksight console but when I load the webpage, I get this error ‘us-east-1.quicksight.aws.amazon.com refused to connect’ .
In the Developer Tools’ Console, I see this error:-
Refused to frame ‘https://us-east-1.quicksight.aws.amazon.com/’ because an ancestor violates the following Content Security Policy directive: "frame-ancestors <my_website_link>
I know that the url can be only used once and has an expiration time of 5 mins. I haven’t used the url anywhere else before using it in my html code and used it within the time limit. Still, it doesn’t work.
This is the CLI command that I used to generate the embed url:-
aws quicksight generate-embed-url-for-registered-user --aws-account-id 01 --session-lifetime-in-minutes 60 --user-arn "arn:aws:quicksight:us-east-1:01:user/default/k***" --experience-configuration ‘{"QuickSightConsole": {"InitialPath": "/start","FeatureConfigurations":{ "StatePersistence": {"Enabled": true }}}}’ --allowed-domains “my_website_link” --region us-east-1
Below is the html code that I used which I found in the AWS documentation:-
<head>
<title>Console Embedding Example</title>
<script src="https://unpkg.com/amazon-quicksight-embedding-sdk@2.0.0/dist/quicksight-embedding-js-sdk.min.js"></script>
<script type="text/javascript">
const embedSession = async() => {
const {
createEmbeddingContext,
} = QuickSightEmbedding;
const embeddingContext = await createEmbeddingContext({
onChange: (changeEvent, metadata) => {
console.log('Context received a change', changeEvent, metadata);
},
});
const frameOptions = {
url: "<my_embed_url>", // replace this value with the url generated via embedding API
container: '#experience-container',
height: "700px",
width: "1000px",
onChange: (changeEvent, metadata) => {
switch (changeEvent.eventName) {
case 'FRAME_MOUNTED': {
console.log("Do something when the experience frame is mounted.");
break;
}
case 'FRAME_LOADED': {
console.log("Do something when the experience frame is loaded.");
break;
}
}
},
};
const contentOptions = {
onMessage: async (messageEvent, experienceMetadata) => {
switch (messageEvent.eventName) {
case 'ERROR_OCCURRED': {
console.log("Do something when the embedded experience fails loading.");
break;
}
}
}
};
const embeddedConsoleExperience = await embeddingContext.embedConsole(frameOptions, contentOptions);
};
</script>
</head>
<body onload="embedSession()">
<div id="experience-container"></div>
</body>
I don’t know what I’m doing wrong and cannot figure out the issue. Could someone please suggest what should be done for this?
