0

I have an issue on a Wordpress website in which the Google Maps doesn't load on Firefox and Safari specifically. The map shows blank and a message Loading map...that never ends on those 2 browsers.

This curious message in yellow is displayed on the browser on Google Chrome:

jquery.min.js?ver=1.11.1:4 Cross-Origin Read Blocking (CORB) blocked cross-origin response https://github.com/googlemaps/js-map-label/blob/gh-pages/src/maplabel.js?_=XXXXXXXXXX with MIME type text/html. See https://www.chromestatus.com/feature/5629709824032768 for more details.

and in Firefox it displays the following message also as a yellow alert:

Loading failed for the <script> with source “https://github.com/googlemaps/js-map-label/blob/gh-pages/src/maplabel.js?_=XXXXXXXXX”.

Any clue on what it only works in Chrome and not in Firefox and Safari? Any clue how to solve it?

Thank you

Luiz Wynne
  • 460
  • 3
  • 10
  • 28

1 Answers1

2

As from the error, your CSP (Content Security Policy) does not allow you to load scripts from github.com domain.

You can :

  • Edit your content-security-policy headers to allow https://github.com loading. You can do it from your Apache/Nginx settings, or from PHP (if you use it) but I prefer handling those headers from web-server config.
    • CSP can also be managed using header meta tag
    • As you're directly serving from Github, you may need to change the default-src as content-type is text/html. I don't know if the script-src will handle it.
  • Download and upload the script to your server. Like this, it'll be loaded from the same domain, and should not throw CSP error.

Also:

  • Using files directly from GitHub is not the best idea. As you can see here and from your console error with MIME type text/html, Github serve your JS file as text/html instead of application/javascript.
  • It would be better to use a proper CDN (if a CDN serving your file exist), or store the file on your server.
Mtxz
  • 3,749
  • 15
  • 29
  • Can i add that individualy to this website though the .htaccess? If so, how does that script would look like? – Luiz Wynne Oct 10 '18 at 10:28
  • Actually it only works for Chrome and not for other browsers – Luiz Wynne Oct 10 '18 at 10:29
  • You could try ` Header set Content-Security-Policy "default-src 'self' https://github.com" `. Use `script-src` if you have the correct content type. – Mtxz Oct 10 '18 at 12:30