Google Maps Being Blocked on Custom Error Pages

What is the name of the domain?

na

What is the error number?

403

What is the error message?

Blocked Page An error occurred during a connection to www.google.com.

What is the issue you’re encountering

Google maps being blocked on custom error pages even if custom pages is not active on CF

What steps have you taken to resolve the issue?

I have turned off the orange cloud on my custom error pages.

What are the steps to reproduce the issue?

Attempting to access websites on from international IPs.

That is not a cloudflare error page, you may want to scan your machine for malware.

It is a custom error page that I created. I have been using the same error pages for years. The blacked out area is where Google maps were once there.

When I load it on Chrome, the response is “Google has refused to connect.”

May I ask if you’re using an iFrame code to show Google Maps on your Website in that box? :thinking: Might be missing some attributes due to the crossorigin.

Furthermore, are you using Content-Security-Policy Header as well?

If it’s a Custom Error Page for Cloudflare, I might be afraid you cannot modify HTTP headers nor CSP if that’s the case, and Custom Error Pages might be restricted from implementing some things, therefrom embeding iFrame is getting blocked.

Otherwise, I am not sure for further troubleshooting.

I’d suggest you to double-check the Developer Tools (F12) → Network and Console tab, once this error occurs to track down what requests are getting blocked.

EDIT: I’ve tested few moments ago and iFrames do work, no CSP policy and you can have the Maps on Custom Error Page:

Where are you hosting them? GitHub or self-hosted somewhere? They might be blocking it then.

Thanks @Fritex, the error is related to not using an API key. When I showed only this iframe, the response was “The Google Maps Embed API must be used in an iframe.” :pensive:

You can use iFrame without Embeded API and put inside div tags to get it responsive, if that’s the case?

Use one of the online generators here:

https://www.maps.ie/create-google-map/

No need for API key, my best guess, except you’re showing some custom icons and more styling? :thinking:

Generate one at Google Cloud Platform if needed and not already, then use but restrict to your domain and Cloudflare only (not sure if this is billable by Google or free one):

How to embed the Map:

I am afraid this is not an Cloudflare issue at all.

Still getting "www.google.com refused to connect.’ It has something to do with - htaccess Access-Control-Allow-Origin (I think). I tried with the website you shared Fritex to embed code and reentering the map code straight from Google as well. It show up if I access the webpage directly and if I preview it on Cloudflare, but just not when I try it live.

So, to sum it up, the map works if I directly access it, it works if I preview it in Cloudflare, but if I
change my IP to a so it produces a country challenge (as I have it set up for), the map refuses to connect to Google, so yes, it’s a CF issue.

Could you please share a real URL example so we could troubleshoot, I am afraid it’s going nowhere from here.

Google, neither any of their services uses Cloudflare. How can Cloudflare block something from Google then, embedded through your domain? :thinking:

If you go to [URL] and use a VPN for Ireland, you can see the issue. Chome displays “Google refused to connect.” and with Firefox, it’s just a blank space below " We provide low-cost and high-quality web design services. We are certainly sorry for the issue and hope that you will reach out and contact us if there is a problem.
Also, feel free to message us on Google here."

Seems like either Google’s or …

Where to below HTTP headers come from? :thinking:

cross-origin-embedder-policy: require-corp
cross-origin-opener-policy: same-origin
cross-origin-resource-policy: same-origin
referrer-policy: same-origin
x-frame-options: SAMEORIGIN

The google.com has:

x-frame-options: SAMEORIGIN
scaffolding on HTTPServer2

Can you temporarly remove x-frame-options: SAMEORIGIN by using Transform Rules → Modify Respone HTTP header? :thinking:

Done. Removed from CF error pages header.

It seems the issue is it being served on 3 domains. The user domain, Google, and CF.

I have removed the x-frame through CF and the server, but when I check the headers, x-frame is still there. Is there another way I can clear the cache with custom error pages?