I'm using the firebase/analytics
module (firebase 7.1.0
) inside a react app using firebase hosting and I was getting an error trying to load the googletagmanager (which I am NOT doing explicitly, it is coming from the module).
Mixed Content: The page at 'https://example.com/' was loaded over HTTPS, but requested an insecure script 'http://www.googletagmanager.com/gtag/js?id=someGTM-id'. This request has been blocked; the content must be served over HTTPS.
I am not importing google analytics from inside the index.html file, rather I am loading firebase/analytics from a javascript file with basically:
import firebase from 'firebase/app';
import 'firebase/analytics';
const firebaseConfig = {
apiKey: "api-key",
authDomain: "project-id.firebaseapp.com",
databaseUrl: "https://project-id.firebaseio.com",
projectId: "project-id",
storageBucket: "project-id.appspot.com",
messagingSenderId: "sender-id",
appId: "app-id",
measurementId: "G-measurement-id",
};
firebase.initializeApp(firebaseConfig);
firebase.analytics();
I found: https://developers.google.com/web/fundamentals/security/prevent-mixed-content/fixing-mixed-content
and https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/upgrade-insecure-requests
And fixed it by placing the following line inside my index.html
file:
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">