Analyze page to see which resource is not transfered in https - html

I'm trying to use SSL for all the traffic of my website: https://alireza-noori.com. After a lot of struggle I managed to install certificate and make the HTTPS work. However, whenever I visit my homepage, the browser tells me that there are some insecure resources in the page. But it doesn't tell me which ones. I double-checked the source code and didn't find any HTTP link. I've even added some code to .htaccess file to force all connections in HTTPS.
How can I know which resource is causing the problem?

Developer tools (Web Inspector) in Chrome will show you in the console which files failed to load. A similar result can be achieved with the developer tools in any of the major browsers.
Here's more info on Chrome Developer Tools:
https://developers.google.com/chrome-developer-tools/
Here's what I'm getting from the console when visiting your website:
The page at https://alireza-noori.com/ displayed insecure content
from
http://themes.googleusercontent.com/static/fonts/ptserifcaption/v4/7xkFOeTxxO1GMC1suOUYWWhBabBbEjGd1iRmpyoZukE.woff.
The page at https://alireza-noori.com/ displayed insecure content from
http://themes.googleusercontent.com/static/fonts/opensans/v6/k3k702ZOKiLJc3WVjuplzJ1r3JsPcQLi8jytr04NNhU.woff.
The page at https://alireza-noori.com/ displayed insecure content from
http://themes.googleusercontent.com/static/fonts/opensans/v6/DXI1ORHCpsQm3Vp6mXoaTZ1r3JsPcQLi8jytr04NNhU.woff.
The page at https://alireza-noori.com/ displayed insecure content from
http://themes.googleusercontent.com/static/fonts/opensans/v6/EInbV5DfGHOiMmvb1Xr-hp1r3JsPcQLi8jytr04NNhU.woff.
The page at https://alireza-noori.com/ displayed insecure content from
http://themes.googleusercontent.com/static/fonts/opensans/v6/K88pR3goAWT7BTt32Z01mz8E0i7KZn-EPnyo3HZu7kw.woff.
Looks like wherever the fonts are coming from is accessed without
https.

Related

upgrade-insecure-requests directive works but a warning is displayed anyway

I'm loading external content on my web site and I have no control on this content.
My web site is served over HTTPS but some of the external URLs use HTTP.
So I added the upgrade-insecure-requests policy.
This works and I can see in the Chrome DevTools that all external resources are served over HTTPS.
But recently I started getting this warning:
Also, when such content is loaded, the little padlock on the left of the address bar is removed.
Is this warning only there to tell me "hey, I did my job but you should do something about those insecure URLs" or is there something else I'm missing?
NOTE: It works as expected with Firefox: HTTP becomes HTTPS, no warning and the padlock remains.
I seems that it was a false alarm from Chrome since this warning has disappeared.

https mixed content warning only on page reload in chrome

I'm working on a test site (not publicly accessible).
It has a valid certificate and when I visit a certain page it shows as secure in chrome...
When I refresh the same page, it shows the security info i icon.
On the security tab in dev tools it says there's mixed content (no other issues)
When I reload the page with the security tab enabled there are no mixed content issues.
The page always shows secure in Firefox.
Does anyone know what causes chrome to show the security info icon, only on reload, and not when the dev tools are open?
I've found a page on another website where this is happening...
https://www.volkswagen.co.uk/financeCalculator/generateDefaultCalculation?modelId=1997
If you go to that link ^^^
It shows secure
Hit refresh
It shows insecure
Open dev tools security tab
It says it's got mixed content
Refresh to get details of mixed content
Page shows as secure.
The VW page you linked to does serve its favicon over http which is the reason for Chrome showing the security info icon.
You may have a plugin/extension on Chrome that injects http links and messes with the overall result regarding mixed content.
To check this you can go to the network tab in developer tools and search links that start with http://

Remove mixed content warnings for development in chrome

I am developing a chrome extension which loads a url in an iFrame. The actual url is hosted using https, however I want to debug it on localhost, thus wanted to allow mixed content. I can do that by allowing unsafe scripts by clicking the shield icon present in the address bar. The problem is it still generates a lot of warnings in the developer console which spams the console and doesn't let me see the actual debug messages.
Is there a way to remove the Mixed Content Warnings from the console, just for the development purpose?
The warning text example is as follows -
Mixed Content: The page at 'https://www.example.com/' was loaded over
HTTPS, but requested an insecure stylesheet
'http://localhost:8080/test.css'. This content should also be served
over HTTPS.
I just needed to use Filters to select the Logs and Errors and deselect everything else. The Filter option is available in the console view toolbar.

My GitHub page (css, js, style) doesn't work correctly

I'm entirely new to GitHub and I am facing some problems while trying to create my first project.
I am using GitHub (username.github.io) to preview (live). But locally my work is well but not in Github pages.
In Github pages, it doesn't work any CSS, js, or my style. All of my CSS, js, and style all in the index.html page. If I go to page source it shows all code but not work!
What I do for showing actual(like as localhost)?
The link is given below. Please see and tell me what I do?
https://mostafizur67.github.io
The browser console shows that your external resources are blocked:
(index):8 Mixed Content: The page at 'https://mostafizur67.github.io/' was loaded over HTTPS, but requested an insecure stylesheet 'http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'. This request has been blocked; the content must be served over HTTPS.
(index):1 Mixed Content: The page at 'https://mostafizur67.github.io/' was loaded over HTTPS, but requested an insecure script 'http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'. This request has been blocked; the content must be served over HTTPS.
(index):13 Mixed Content: The page at 'https://mostafizur67.github.io/' was loaded over HTTPS, but requested an insecure stylesheet 'http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css'. This request has been blocked; the content must be served over HTTPS.
Try loading the external resources using https instead of http.
Actually not a Git question, it's really an HTML/CSS one.
You have links to http resources in an https page, and browsers do not like this. Prefer links like //example.com/path/to/file to http://example.com/path/to/file to let your browser pick the right protocol.
To debug this kind of issues, use the webmaster tools provided with your browser. For example, with Firefox, Right-click anywhere on page -> Inspect element. The console shows the errors.

Mixed content in Chrome and IE

In my HTTPS enabled site I have added an iframe that should show content from my other site, but it is not working under https.
<iframe src="//myothersite.com"></iframe>
In Firefox latest version everything works good.
In Chrome, the iframe isn't loaded and in the console I see these two errors
Mixed Content: The page at 'https://mysite' was loaded over HTTPS, but requested an insecure resource 'http://myothersite.com'.
This request has been blocked; the content must be served over HTTPS.
Failed to load resource: net::ERR_CACHE_MISS
In IE content load incorrectly and I see an alert message; if I click Allow Insecure Content, it loads correctly.
The question is: how I can do that IE and Chrome as in Firefox (load mixed content without any alerts)?
Note: I haven't changed any browser settings.
Actually Firefox has started to do the same: How to fix a website with blocked mixed content
It makes sense. If the user access a site using HTTPS is expecting to have a secured experience, and he may not be aware of parts of the application loading under not secure connections. That is the reason why the browser blocks such inconsistency.
You will need to provide HTTPS on myothersite.com.
Obviously it's best not to have mixed content to prevent MITM attacks but for those who can't control the url this should do the trick:
Change the src="http://linkToUrl.com" to
src="//linkToUrl.com/script.js"
enter image description here
when i set the url :
from a https request, it report error :
Mixed Content: The page at 'https://127.0.0.1/index.html' was loaded over HTTPS, but requested an insecure resource 'http://127.0.0.1:8080/download/1.txt'.
This request has been blocked; the content must be served over HTTPS.
Failed to load resource: net::ERR_CACHE_MISS
when i added the target="_blank" to the url: <a target="_blank" href="http://127.0.0.1:8080/download/1.txt">, it works! , it works!
it's well known that target="_blank" means opening the linked document in a new window or tab or a new request!
I'm sorry this isn't as technical as the other answers, but I had the same problem linking jsquery like this, and for me it fixed just by changing http:// to https://. It may not work, but it worked for me and it might work for you.
Problem is mixed content, the browser won't allow us to just do that.
You need change url from:
http://example.com
to
//example.com
I'm having other complication with CloudFlare, it doesn't load as the file has been cached as http. Just go to CloudFlare and "Purge Everything" in cache tab, or else turn on "Development Mode".