Dear stackoverflow experts,
I've been reading in stackoverflow forum about the issue but didn't find a solution
I'm experiencing a problem with my website https://baliradar.com
since I installed SSL. I changed all the http links by https.
However I cannot resolve the problem of insecure font though, here's the console log error message:
Mixed Content: The page at 'https://baliradar.com/' was loaded over HTTPS, but requested an insecure font 'http://fonts.gstatic.com/s/lato/v11/nj47mAZe0mYUIySgfn0wpQ.ttf'. This request has been blocked; the content must be served over HTTPS.
I have been searching for hours with FileZilla in the files of my theme "winning agent pro" and in other directories of my website but I never found the html code for the font. I tried to search for specific keywords ("fonts", "gstatic") in my File Manager from my CPanel but there's no records found.
I also tried to use the "Developer Tool" of Chrome to find the source of the font without success.
I'm clueless here and was wondering if someone has an idea or a solution?
Thank you for your time.
Xavier
There are several http:// links in your CSS code, which is linked in your header as <link
rel="stylesheet" type="text/css" href="https://baliradar.com/wp-content/cache/minify/000000/e4a39/default.include.08bf2a.css" media="all" />:
.mCSB_buttonRight{background-position:-80px -56px}#font-face{font-family:'Lato';font-style:normal;font-weight:300;src:local('Lato Light'), local('Lato-Light'), url(http://fonts.gstatic.com/s/lato/v11/nj47mAZe0mYUIySgfn0wpQ.ttf) format('truetype')}#font-face{font-family:'Lato';font-style:normal;font-weight:400;src:local('Lato Regular'), local('Lato-Regular'), url(http://fonts.gstatic.com/s/lato/v11/v0SdcGFAl2aezM9Vq_aFTQ.ttf) format('truetype')}#font-face{font-family:'Lato';font-style:normal;font-weight:700;src:local('Lato Bold'), local('Lato-Bold'), url(http://fonts.gstatic.com/s/lato/v11/DvlFBScY1r-FMtZSYIYoYw.ttf) format('truetype')}#font-face{font-family:'Lato';font-style:normal;font-weight:900;src:local('Lato Black'), local('Lato-Black'), url(http://fonts.gstatic.com/s/lato/v11/4cKlrioa77J2iqTqBgkRWg.ttf) format('truetype')}.currencyr{position:fixed;z-index:2147483647}.currencyr .currencyr-container,
As it seems that this is a minified version of your css, search in your current theme's css-files for the http phrase. You can do so using grep for example:
grep 'http://fonts' * -R
In my case, this issue was caused by my caching plugin (W3 Total Cache). Disabling it solved the issue but you may want to keep the plugin and change the font URLs in the CSS file from HTTP to HTTPS.
I came across this issue when the Social Pug plugin stopped showing
icons on the social media buttons. The root cause was the caching
enabled by W3 Total Cache plugin. If you are in a similar situation,
there are three ways to fix the issue:
Disable W3 Total Cache (not recommended because your website’s performance may decrease)
Change the font URLs of Social Pug plugin to HTTPS
In some cases, URL Rewrite rules may cause this issue. Check your .htaccess file
Mixed Content: The page was loaded over HTTPS, but requested an insecure font
Related
When I check my website URL on Google URL inspection tool it shows that page resources could not be loaded i.e image, stylesheet and script files. However, my website is working perfectly on a live server and the website is not rendered properly by Googlebot smartphone. I have tried everything to remove these errors but nothing helped. I have also checked that these resources are not blocked in robots.txt file.
Screenshot of page resources error
I've been struggling with this for a couple of days now, and finally reached the only solution that has worked for me. In my case, it wasn't a robots.txt problem, as I believe that you've already checked before posting this.
The problem has to do with the number of resources Googlebot is willing to fetch before giving up. If your CSS and JS files are too many, or too big, Googlebot gives up before fetching all of the resources needed to render the page properly.
You can solve it by minifying your files via a server mod, or via plugins like WP Rocket or Autoptimize. If you have too many CSS and JS files and the problem persists after minifying, try combining these files as well by using the same plugins.
I'm using phantomjs version 1.9.7 which I believe is supposed to support web fonts. I have inserted the font with google web fonts however it is just displaying my fallback font when I automate a screengrab. The webfont is displaying fine in all my browsers. Are there any workarounds for this?
I have struggled with this issue for several hours. Well, there is a simple reason for this controversy: user-agent!
Some services such as Google Fonts are returning different CSS content based on user-agent. When you call a webpage which includes Google Fonts with default PhantomJs user-agent, Google would return TTF version which is supported in PhantomJs.
However, if you set a custom user agent (Chrome, FF, etc.), Google Fonts would return .woff2 version. .woff2 is not supported in PhantomJs 2.x. Obviously, fonts are not going to be loaded.
So, for users who are testing PhantomJs without setting a generic user-agent, Google Fonts is working. If they set for example Google Chrome user-agent, it does not work.
So, you have two options:
Avoid setting a custom user-agent if it is possible.
Avoid using dumb-smart font providers like Google Fonts which does not outputting all font versions in CSS and let the browser decide what it needs.
I believe your belief is wrong :-)
The 1.9.x series of Phantom is still based on the old WebKit code, which people have been reporting web font problems with all along.
The good news is that a technical preview of Phantom 2.0 is apparently about to be released; https://github.com/ariya/phantomjs/wiki/PhantomJS-2 is intended to be the best place to follow status. And, from memory, someone reported success with web fonts using it (but I may be wrong on that as a quick search of the mailing list archives didn't turn up a definitive message saying web fonts work... but they definitely should).
BTW, SlimerJS is an almost drop-in replacement, based on Firefox's Gecko engine, and does support web fonts (though some problems in corner cases, IIRC).
I just had the same issue with PhantomJS 2.1.1.
In my case I was working under a proxy that was blocking PhantomJS from loading the font from Google. After connecting to an open network it rendered correctly.
I tried all fixes listed here to no avail, but here is a work around. Either option resolved this for me.
First Option:
Install the missing web fonts on the local computer that is running PhantomJS. Most web font providers including Google allow you to easily download the fonts for local install. No change needed at the target URL.
Second:
I sites I have control over, I was able to resolve by splitting up the link tags.
Change This from:
<link href='//fonts.googleapis.com/css?family=Roboto:400,500,700|Open+Sans:400italic,700italic,400,700' rel='stylesheet' type='text/css'>
To:
<link href='//fonts.googleapis.com/css?family=Roboto:400,500,700' rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700' rel='stylesheet' type='text/css'>
I know this is not an ideal solution but either one works, It depends on if you can modify the target URL.
I installed an SSL Certificate which required me to switch all HTTP Links over to HTTPs links. I did this by downloading all site files (including the database) and did a find/replace, thus replacing all http:// with https:// then I uploaded the new site files (and .sql file) to the server. And everything appeared to be working. Except that .png images wont load in any browser.
I can't even pull up the image by typing in the direct link in the address bar (with or without the https). Previously the images worked fine, they now just show the red X.
Any ideas on what's going on and how can I fix it?
The site is built with Joomla 2.5. You can see it here: https://www.detourjournal.com/ (Note the two .png images in the footer that are not loading)
It's not your Joomla! setup, for starters it doesn't appear to be Joomla! redirecting calls to SSL in normal pages and it doesn't affect direct file URL for images this way.
You appear to have configured your server to force https (possibly via .htaccess).
It's also not specific to PNG files as your logo, /images/stories/logo2.png is being served without a problem. The same goes for the PNG's in VirtueMart e.g. the close label.
Looking at the header for those images the sizes don't match what is being returned... so it's most likely corrupt images cause Apache to bork.
I'm wokring on a small website that I wouldlike to use Less CSS with, but I am having trouble getting the .less file to become available. If I go to the path on the server that the .less file is at through ftp, the file is there in the browser and I can read it. However, tag in the html is bringing me to a 404 page. If I manually type in the location through http it does not work. Why might this be happening?
Requests for static files return 404 error (IIS 6.0)
Im not sure if i understood you correct, but: LESS is not a replacement for CSS. You must generate a CSS-file from your LESS-file to be able to serve it to the browser.
The reason why you cant view it in your browser is because the web server har no MIME-type for LESS-files, and it shouldnt have.
You can however view it through FTP cause its a "normal" text document.
Edit: You can also process the .less-file with javascript, but thats not recommended for production use...
I have an ASP.NET site which should transport completely over HTTPS. However, in Google Chrome I get a warning that the page includes resources which are not secure. How can I find out which those resources are and why they wouldn't be going over HTTPS?
I've just had this problem in Chrome also. I checked in the Network tab but all resources were loaded over https.
Solution: close Chrome and re-open.
Chrome must cache its secure-content detection so that even when you fix the problems the insecure content message won't disappear.
Usually this occurs because you are loading Images, javascript include files or external CSS files without using https. You can use a program such as FireBug: http://getfirebug.com/
FireBug will tell you how your elements are loading and which aren't going through the ssl layer. If you don't have firefox, then I am pretty sure Chrome also has something similar to FireBug built in.
Here's how to use firebug:
Open firebug
Click on the Console Tab
Reload the page
Any https errors will show in the console and tell you which resource is not working.
Hope this helps
I have nothing to do with the people providing this online script, but it's easy and can be bookmarked in any browser.. works well and quickly to solve the problem.. http://www.whynopadlock.com
In Google Chrome: You can view the offending resource in the Console tab of the Inspect Element window.
It will be listed as:
The page at https://example.com/page displayed insecure content from http://example.com/resource
Of course you might have to reload the page with the Inspect Element window already open.
One of the easiest ways to do it is to right-click the page in Firefox and select View Page Info. Then go to the Media tab and find anything that is loading from http instead of https.
We've scratched our own itch and wrote a tool that crawls your web-site and tells you what pages have non-SSL resources on them. You just need to enter the root URL of your web site – no need to check every page manually.
http://www.jitbit.com/sslcheck/
I noticed that when I had this problem that a toolbar(uTorrent) was causing the error. I removed the toolbar and the error went away. Not sure why a toolbar would cause an error on my site, but no more problems here with the SSL certificate.
To add to this I right-clicked on the column headings in the Network tab view and selected Protocol.
If you then click on the Protocol heading, the contents of the report will be grouped by HTTPS, etc
In Chrome, you can find out which resources were loaded via http versus https by doing the following:
1) In Wrench menu, choose Tools > Developer tools
2) Click on "Resources" toolbar icon
3) Expand the Frames folder to see the different pages. Expand the page whose resources you want to see. The individual Resources for the page are then listed, broken down by Images, Scripts, and Stylesheets
4) To see the URL that was used to load that resource, just hover the mouse over the resource name and the URL will appear, either with http or https. You can also click on an image name to see the image on the right side, along with its URL
Chrome has their own developer tool.
you can right click a page, inspect it.. and then click the "network" tab and reload the page. you'll see the workflow.
I dont know if any one will be checking this answer
Or you might have found the solution already, but anyway, my answer might help other people suffering from similar issue
http://www.whynopadlock.com/
This is the link that I used to check the insecure content /file which was being loaded to my page.
Hope it helps. :)
I just discovered same behaviour in chrome (firefox showed a green lock), even though all resources were loaded via https.
The reason in my case was that the server supported broken (google poodle) SSLv3.
Setting ssl_protocols to exclude SSLv2 in nginx.conf like so
ssl_protocols TLSv1 TLSv1.1 TLSv1.2; # Dropping SSLv3, ref: POODLE
fixed the problem for me.
I consider it unfortunate that chrome doesn't make this reason more transparent. "this page loads some resources insecurely" is very misleading if not wrong.
If you want to crawl your own site from your own desktop for a list of all reasources loaded (not loaded by javascript though, which is worth bearing in mind), if using windows you can use Xenu's link sleuth. Export the TSV file and then right click and open with excel, then sort by URL, you can then find those pesky http resources for all pages on the site!