Amazon connect instance refused to connect | 'X-Frame-Options' to 'sameorigin'

Question

When I'm calling the Amazon connect instance from my local machine I'm facing this error - Amazon connect instance refused to connect And in console it showing this issue:ancestor violates. In '< URL >' It is:
```
https://< Amazon connect Instance name >.my.connect.aws/.
```
When I'm running this on cloud environment it is showing enter image description here

This is the Code I'm running in index.html:

<!DOCTYPE html>
        <html>
    
        <head>
          <meta charset="UTF-8">
           <script type="text/javascript" src="connect-streams-min.js"></script>
        </head>
        <!-- Add the call to init() as an onload so it will only run once the page is loaded -->
    
        <body onload="init()">
          <div id="container-div" style="width: 400px; height: 800px;"></div>
          <script type="text/javascript">
            var containerDiv = document.getElementById("container-div");
            var instanceURL = "https://<Amazon connect instance>.my.connect.aws/ccp-v2/";
            // initialize the streams api
            function init() {
              // initialize the ccp
              connect.core.initCCP(containerDiv, {
                ccpUrl: instanceURL,
                loginPopup: true, // optional, defaults to `true`
                loginPopupAutoClose: true, // optional, defaults to `false`
                loginOptions: { // optional, if provided opens login in new window
                  autoClose: true, // optional, defaults to `false`
                  height: 600, // optional, defaults to 578
                  width: 400, // optional, defaults to 433
                  top: 0, // optional, defaults to 0
                  left: 0 // optional, defaults to 0
                },
                loginUrl: "https://<Amazon connect instance>.my.connect.aws/ccp-v2/",
                region: "us-east-1", // REQUIRED for `CHAT`, optional otherwise
                softphone: { // optional, defaults below apply if not provided
                  allowFramedSoftphone: true, // optional, defaults to false
                  disableRingtone: false, // optional, defaults to false
                  ringtoneUrl: "./ringtone.mp3" // optional, defaults to CCP’s default ringtone if a falsy value is set
                },
                pageOptions: { //optional
                  enableAudioDeviceSettings: false, //optional, defaults to 'false'
                  enablePhoneTypeSettings: true //optional, defaults to 'true' 
                },
                shouldAddNamespaceToLogs: false, //optional, defaults to 'false'
                ccpAckTimeout: 5000, //optional, defaults to 3000 (ms)
                ccpSynTimeout: 3000, //optional, defaults to 1000 (ms)
                ccpLoadTimeout: 10000 //optional, defaults to 5000 (ms)
              });
            }
          </script>
          <button onclick="location.href='https://<Amazon connect instance>.my.connect.aws/ccp-v2/'">agent login</button>
        </body>
    
        </html>

  [1]: https://i.stack.imgur.com/ZWjzX.png
  [2]: https://i.stack.imgur.com/b4IPw.png`
  [3]: https://i.stack.imgur.com/4V8uw.png

I have the same issue. It's driving me crazy. Seems to be the new auth URL not allowing iframes not from the SAMEORIGIN. But I have no clue as to how to enable it. — square_eyes, Apr 05 '23 at 05:11

score 1 · Answer 1 · answered Oct 06 '22 at 22:41

1

Have you added the domain that this is running on to the Allowed Origins in your Connect instance on AWS? You need to do that.

answered Oct 06 '22 at 22:41

ledge

359
1
6

yes its added in the instance approved origins – jaideep singh Oct 17 '22 at 07:18
Same. I have this issue and have added allowed origin. I think AWS changed the auth flow which introduces a separate redirect to a universal apps auth page which itself doesn't allow embedding. – square_eyes Apr 05 '23 at 21:09

score 0 · Answer 2 · answered Oct 03 '22 at 07:31

The site you're trying to frame, or even a page framed by a page you're framing, sets response headers restricting framing to sites on the same origin. "X-Frame-Options: sameorigin" and "Content-Security-Policy: frame-ancestors 'self'" are pretty much the same thing, and modern browsers will disregard X-Frame-Options when Content-Security-Policy frame-ancestors is present.

This site doesn't allow any other site to frame it. If you control it you can change the frame settings on that page. Otherwise you'll have to do things in a different way as browsers simply won't let you frame it.

Seems Amazon's own tutorials have gone out of date. There is a new 302 redirect on the auth callback. XXXX..awsapps.com/auth/?client_id=XXXX — square_eyes, Apr 05 '23 at 05:13

Amazon connect instance refused to connect | 'X-Frame-Options' to 'sameorigin'

2 Answers2