Do you want to know reasons for mixed content the page and to avoid Mixed Content Warning in HTTPS Domain.
Many webmasters are trying to get rid of the mixed content the page at was loaded over https but requested an insecure resource error in Chrome and other browsers. Me too. Let me break to you in parts so that you will know that it is not possible.
1. Tech Gurus are Hiding Something : What Is Mixed Content
I have spent more than 2 hours trying various Javascripts shared by Tech Gurus or tech bloggers to change the http to https. I read every article in Stack overflow as well as other niche tech bloggers. They are all hiding something. What are they hiding?
The Truth.
It is not possible to avoid mixed warning error fully in Google Chrome or any other browsers.
Here are some answers that I tried and failed miserably.
1.1 Mixed content the page at was loaded over https but requested an insecure resource: Force HTTPS over HTTP
They will give you some random javascript and tells you to add after head tag in blogspot. One example of such script is this; Force SSL. This will not work. I know. I tried it too.
1.2 HTTP-HTTPS “mixed content” warning: Replace HTTP to HTTPS
They will tell you to go to template and remove all the http links to https. This will work partially only. Because most of the blogger codes are conditional tags and xml tags and not http links.
- data:blog.url
- data:post.url
- data:blog.homepageUrl
- data:blog.postImageUrl
- data:blog.postImageThumbnailUrl
- data:blog.postThumbnailUrl
- data:post.sharePostUrl
These tags fetch data from the server as per browser request and show as http links. These tags are dynamic in nature means it can fetch multiple links from server using the same function.
Eg: If I publish a post with a link “https://www.shipmethis.com/2017/09/high-paying-google-adsense-keywords.html” and later another post with link “https://www.shipmethis.com/2017/09/sudden-drop-in-organic-traffic.html”, the “data:post.url” show both of it depending on the request from user.
You cannot replace them with any other tags unless the link is static and need not be changed.
The only tag you can replace is the “data:blog.homepageUrl” to your website URL with https. Still you need to have expertise to identify the proper place to replace them. Otherwise your blog won’t load.
1.3 Replace all HTTP links to HTTPS for External websites and images
Many websites have not been converted from http to https and still serve under http request. If you replace every website, image, post link without checking the source page, users may get 404 error or not loading “This site can’t be reached” error page.
Eg: Check http://scratch99.com/web-development/javascript/how-to-get-the-domain-from-a-url/
And try to load it with https://scratch99.com/web-development/javascript/how-to-get-the-domain-from-a-url/
2. Why You Can’t Fix SSL Mixed Content HTTPS Error on Blogspot Blog
It is only because you do not have access to server side of blogpsot. Blogspot is a free hosting service for custom domains with its own limitations. The major limitation is that users like me or you do not have access to servers so you cannot change http to https for custom domains and remove mixed warnings.
Only Google engineers can access the server and change it. I heard that are working on providing solutions for custom domains but still not announced anything. No need to waste your time reading all those junk posts.
3. What You Can Do To Avoid Mixed Content Warning in Blogger Error HTTPS Custom Domain
3.1. You can try to reduce the number of http links by checking the source. If the source website is loading over https, then change it to https. This generally fixed SSL Mixed Content HTTPS Error on Blogspot Blog on many users.
3.2. If you want to embed some YouTube video or HTML widget or iframe codes, replace “http://: to “//:”, this way the browser will choose to load over secure content over http, if source is secure. If source website is not served under https://, then browser will load the link under http.
Eg: You can change this script;
<iframe allowfullscreen=”” class=”YOUTUBE-iframe-video” data-thumbnail-src=”http://i.ytimg.com/vi/U3HTYsq40f8/0.jpg” frameborder=”0″ height=”266″ src=”http://www.youtube.com/embed/U3HTYsq40f8″ width=”80%”></iframe>
To,
<iframe allowfullscreen=”” class=”YOUTUBE-iframe-video” data-thumbnail-src=”//i.ytimg.com/vi/U3HTYsq40f8/0.jpg” frameborder=”0″ height=”266″ src=”//www.youtube.com/embed/U3HTYsq40f8″ width=”80%”></iframe>
3.3. Replace link tags with https
You can replace all link tags such as RSS, Feed, Meta Tags in Blogspot.
For that go to Blogspot, select Theme, edit HTML, press CTRL+F and search for “name=’all-head-content'” without quotes.
You will get a code like this: <b:include data=’blog’ name=’all-head-content’/>.
Remove it.
Add the following codes in the place of it. Replace shipmethis.com with your website.
<meta charset=’utf-8′ content=’text/html’/>
<meta content=’width=device-width, initial-scale=1′ name=’viewport’/>
<meta content=’blogger’ name=’generator’/>
<b:if cond=’data:blog.url == data:blog.homepageUrl’>
<link href=’https://www.shipmethis.com/’ rel=’canonical’/></b:if>
<link expr:href=’data:blog.homepageUrl + "feeds/posts/default"’ expr:title=’data:blog.title + " – Atom"’ rel=’alternate’ type=’application/atom+xml’/>
<link expr:href=’data:blog.homepageUrl + "feeds/posts/default?alt=rss"’ expr:title=’data:blog.title + " – RSS"’ rel=’alternate’ type=’application/rss+xml’/>
<link expr:href=’"https://www.blogger.com/feeds/" + data:blog.blogId + "/posts/default"’ expr:title=’data:blog.title + " – Atom"’ rel=’alternate’ type=’application/atom+xml’/>
<b:if cond=’data:blog.pageType == "item"’>
<b:if cond=’data:blog.postImageThumbnailUrl’>
<link expr:href=’data:blog.postImageThumbnailUrl’ rel=’image_src’/>
</b:if></b:if>
3.4. Automatic HTTPS Rewrite: On
If you are using Cloud Fare, then switch on the automatic rewrite. This will enable 301 redirects from http:// to htts://. This fix SSL Mixed Content HTTPS Error on Blogspot Blog.
If you want to use CloudFare, read about that here.
If you are experiencing sudden drop in traffic after migrating to https://, read my post on fixing low traffic.
If this helped you to fix some of those http links, share it for fellow bloggers. There are many who wants to solve this Chrome Disable Mixed Content Issue on HTTPS Websites.
