WxCC Desktop iFrame JS Copy to Clipboard Failing

[Faisal Zaidi]

We have a web application which contains a button to invoke a JavaScript function which copies text from a textbox to the users clipboard. This functions works perfectly when the application is browsed directly.

However, when we embed the application as an iFrame in the WxCC Agent Desktop, the copy to clipboard doesnt work and we get the following error in the browser console logs for Chrome and Edge (Firefox still works fine):

"Uncaught (in promise) DOMException: The Clipboard API has been blocked because of a permissions policy applied to the current document."

We have tried to set both of these custom header values in our iFrame application as well as directly in IIS on the hosting WebServer but neither has worked:

<add name="Content-Security-Policy" value="frame-ancestors 'self' https://*.cisco.com;" />
<add name="Permissions-Policy" value="geolocation=(self 'https://desktop.wxcc-eu1.cisco.com')" />

Any ideas please?

[Santosh Patil · Accepted solution]

Hi Faisal, Could you please raise this query as a ZENDESK ticket as that will be our new process to handle the Wxcc API request queries?
You could write a mail to this wxccdevsupport@webex.com and it will create a ticket on us. Thank you.

[Faisal Zaidi]

Thanks Santosh - doing that now..

[sanjeevwagh1]

Is this resolved? Can someone brief on the solution?

[Sham N Satyaprasad]

Hi @sanjeevwagh1, 

To resolve the issue we have provided example code snippets for both same-origin and cross-origin scenarios, demonstrating the usage of the "allowedParams" attribute.

For same-origin scenarios:

{
  "comp1": {
    "comp": "agentx-wc-iframe",
    "attributes": {
      "src": "https://widget-kad.s3.amazonaws.com/Trading.htm",
      "allowedParams": "clipboard-read; clipboard-write"
    },
    "wrapper": {
      "title": "Return drop off locations",
      "maximizeAreaName": "app-maximize-area"
    }
  }
}

For cross-origin scenarios: ${URL} URL for the site that you are copying from

{
  "comp1": {
    "comp": "agentx-wc-iframe",
    "attributes": {
      "src": "https://widget-kad.s3.amazonaws.com/Trading.htm",
      "allowedParams": "clipboard-read; clipboard-write self ${URL}"
    },
    "wrapper": {
      "title": "Return drop off locations",
      "maximizeAreaName": "app-maximize-area"
    }
  }
}

Adding the `allowedParams` attribute as either "clipboard-read; clipboard-write" or "clipboard-read; clipboard-write self ${URL}" enables clipboard read and write operations within the iframe.

We've also added an example to our GitHub repository, which you can find here - https://github.com/CiscoDevNet/webex-contact-center-widget-starter/blob/master/Iframe_Widget_Allowedparams.json

Please try these and let us know the outcome. If the issue still persists, I suggest creating a ticket here for further assistance - https://developer.webex-cx.com/support/.