Using Google maps in Agent script

Hi,

I'm trying to use the Web page within the Agent Script that uses Google maps. The Web page uses the API key to access the /maps and API key is not restricted either on the Application nor on API level to any of the domains.

However, when I'm trying to use this page in Agent Script I'm getting the error:

/scripter/?locale=en-US#scriptId=ead7843b-82b2-4901-9beb-0bff1169b572:1 Refused to display 'https://MY_PAGE' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

Please note, for the security reasons I replaced the full URL with MY_PAGE. Based on the explanations about the settings for this header at https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options there are 2 possible options DENY or SAMEORIGIN.

The Web page we're trying to access is hosted outside of *.mypurecloud.com. Can you please recommend/help how to resolve this problem?

Thanks,
Tatjana

Hello,

The Web Server which is managing your Web Page (https://MY_PAGE) is the one preventing the page from being embedded in the Genesys Desktop (as an iframe, inside a Script).
The "Web Page" component, that you can define in a Genesys Cloud Script, is "translated" into an iframe HTML element.

Based on the error "Refused to display 'https://MY_PAGE' in a frame because it set 'X-Frame-Options' to 'sameorigin'.", it means that the Web Server, which is hosting/managing/rendering your web page, refuses that this page is embedded in an external site in an iframe.
I mean that the Web Server is configured to add this X-Frame-Options header in its responses - so that an external site cannot add the page in an iframe on its own site/domain.

I don't understand if the Web Server is managed by you?
Or if you WebPage is a Google Maps page (https://www.google.com/maps/embed?...)?

If the Web Server is managed by you.
You could either disable X-Frame-Options header in your server. But you would allow your page to be embedded in iframe of any external site.
Or you could use the Content-Security-Policy header to control this. I must say I don't have much knowledge on Content-Security-Policy.
See: https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP and https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy

If it is a Google Maps page, your MY_PAGE should be something starting with www.google.com/maps/embed
See here: https://developers.google.com/maps/documentation/embed/get-started

Regards,

@Jerome.Saint-Marc

Thank you for your response. Yes, the Web Server (IIS), and therefore the page I referred to as "https://MY_PAGE" is managed by us (Star Telecom).
On the page itself, there is a link to https://maps.googleapis.com/maps/api/js? ...preventing it from displaying on the agent screen (see the part of the screenshot):

Thank you for your recommendation. We'll see what can be done with the either disabling one or enabling the other.

Thanks again,
Tatjana

Hello,

I think the link to https://maps.googleapis.com/maps/api/js should not be a problem.

I don't have experience with Google Maps Javascript API but I have tried to create a basic project.
I have defined an API key for Google Maps Javascript API (no Application restrictions - but HTTP Referrers would probably work), and an html page (hosted by a local nodejs webserver) containing a script element pointing to https://maps.googleapis.com/maps/api/js.
From my Genesys Cloud script and the Web Page component, the page and map were properly and successfully displayed.

So the part causing the issue is likely what the Web Server sends back in your case (X-Frame-Options on the GET to https://MY_PAGE).

Regards,

This topic was automatically closed 31 days after the last reply. New replies are no longer allowed.