Search code examples
javascriptangulartypescriptfirebasemixed-content

Errors only when hosting app but not in my local host

I have been working in AngularJS 2 and when hosting in local server I have no errors and everything is okey.But when hosting it to a firebase server some errors appeard in console. Here is the link...:

https://test-calculadora.firebaseapp.com

ERRORS

This Mixed content error appears in Google Chrome and Firefox

Mixed Content: The page at 'https://test-calculadora.firebaseapp.com/' was loaded over HTTPS, but requested an insecure stylesheet 'http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,400,300,600'. This request has been blocked; the content must be served over HTTPS.

This error only appears in Google Chrome

ERROR TypeError: Cannot read property '0' of null
at Object.updateDirectives (3.ad64bef68a696aaec9de.chunk.js:1)
at Object.updateDirectives (vendor.be20388edeb374983d23.bundle.js:127)
at or (vendor.be20388edeb374983d23.bundle.js:127)
at mr (vendor.be20388edeb374983d23.bundle.js:127)
at gr (vendor.be20388edeb374983d23.bundle.js:127)
at or (vendor.be20388edeb374983d23.bundle.js:127)
at mr (vendor.be20388edeb374983d23.bundle.js:127)
at gr (vendor.be20388edeb374983d23.bundle.js:127)
at or (vendor.be20388edeb374983d23.bundle.js:127)
at mr (vendor.be20388edeb374983d23.bundle.js:127)
Solution

  • notice how the link that is erroring begins with 'http' not 'https'. http is inherently 'insecure'.

    'http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,400,300,600'

    you should be able to add an 's' to http and that should fix things.

    what google has to say:

    Always use https:// URLs when loading resources on your page. Use the Content-Security-Policy-Report-Only header to monitor mixed content errors on your site. Use the upgrade-insecure-requests CSP directive to protect your visitors from insecure content.

    learn more here