How to Solve Mixed Content Blocking on Your Browser

Hi campers

I have searched the interwebs for a way to get around the Mixed Content Blocking (i.e. serving a HTTPS site and requesting HTTP content).

The only option I have seen (also recommended by Google) is to find a resource / API that serves HTTPS content instead of HTTP.

Check out my local weather app

Due to Mixed Content Blocking, you’ll need to allow your browser to load scripts.

I’d appreciate your feedback

Best,

Richard

UPDATE (10 September '16):

I re-wrote my local weather app using Yahoo Weather API (it supports HTTPS) therefore no more issues with Mixed Content Blocking.

config.js is missing, and I don’t think its good idea to ask users to allow to load external scripts (and I’m not sure that moving the API key to an external js file is a good protection).

Btw, you know that everyone can see your file history in GitHub, right?

Thanks for the prompt response @jenovs

My local weather app is hosted on my ‘gh-pages’ branch, not ‘master’ as your screenshot suggests.
After spending over a day looking for a way to open source my app and still conceal the API key, I finally decided to leave it as is (i.e. not use config.js)

Wrt requesting users to allow scripts on the browser - I might re-write the app using a resource that supports HTTPS in future (as per Google recommendation).

What would you recommend for protecting API Keys on a version control system like Github?

I don’t think you can protect API keys without back-end (I did a little googling when I was working on my weather app; but maybe I’m wrong).

Finally I went with Weather Underground, they have an e-mail notification if your free limit gets abused (happened once - probably someone was reusing my key, so I just generated new API key, and pushed new version to GitHub).

Don’t worry about your API keys for now - they are free anyway. Just hard code them in your code.

1 Like

Thanks @jenovs

I saw the Weather Underground API documentation it states:

  1. API requests are made over HTTP. Data features return JSON or XML. WunderMap layer features return image files.

This defeats the purpose of my goal… however, I signed up and tested it, it does return the object even if you change HTTP to HTTPS - perhaps the docs are outdated.

Thanks again for these insights…

I am currently struggling with the same issue regarding the Mixed Content Blocking, one guy helped on the freecodecamp chat with a link to https://crossorigin.me which made it possible for me to show the values but the incorrect ones as it probably retrieved the coordinates from the server where it is run from.

This is the same problem that I am trying to get around. I had my weather app working on Codepen and HTTP (using ipinfo.io to get location data since geolocation does nothing under HTTP and asks me to share my location under HTTPS, but does not actually return anything on a desktop that has no GPS).

Now, I am trying to move all of my projects to Github since some things just work better there than on Codepen (and I can have all of my resources and complete code with the app and not have to get my images from elsewhere).

The weather app is one project that is giving me more trouble on porting to Github and HTTPS. Using crossorigin.me works with openweathermap just fine, but causes ipinfo.io the think that everyone lives in New York. Is there any free way (ipinfo.io allows HTTPS if you pay them monthly) around this?