Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to identify insecure content in Chrome DevTools or Firefox?

My web page sometimes (rarely) shows "there are some insecure resources" warning icon (yellow lock) like in the screenshot below. However that occurs rarely and now I caught another one I don't want to miss it again so I can't risk losing the page.

Insecure content warning

The page is at the URL: https://eksisozluk.com/sedat-kapanoglu-ve-40-kisiye-hapis-talep-edilmesi--3960310 . You will probably not see the warning (unless it's Firefox) because I didn't in my consecutive tries on Chrome and I was logged in when I got the error. So let's assume you and I will never see that warning icon on Chrome again.

Devtools was not open when I was using the site, so "Network" tab is empty. That part won't work.

"Resources" shows all JS and CSS entries as https there is no single resource from http there.

The page has jQuery loaded so I tried queries $('*[href^="http:"]') and $('*[src^="http:"]') to no avail. The page contains some external http links (not resources, plain a href's) but that wouldn't trigger the alarm.

I'm using Kaspersky Anti-Virus and it uses a proxy to scan incoming/outgoing traffic. That could be causing some trouble although I haven't had any issues so far with other web sites.

I tried "view page source" and searching it for http resources but only tag with http resource link was:

<meta name="twitter:image" content="http://eksisozluk.com/content/img/ilogo120.png" />

which actually exists in the page when the icon is green too. So that cannot be the reason.

Isn't there a way to directly view the "insecure content" whatever that is in Chrome?

When I view the page in Firefox it says "partially encrypted" but it doesn't show what's not encrypted either. All the items in "Media" tab start with "https://".

Actually now I'm able to reproduce the issue continuously on Firefox. I looked at the network tab and "nothing" shows as http:// yet Firefox tells me "partially encrypted". I'm not sure if Firefox is saying that for the same reason Google does (because Firefox is consistent and insistent about it), but I'm providing both scenarios in case they belong to the same root cause.

I finally wrote this code in Chrome console to find the culprit:

$("*").each(function (index, elem) {
  var attrs = elem.attributes;
  for(var n = 0; n < attrs.length; n++) {    
    var attr = attrs[n];
    if(attr.nodeValue.indexOf("http://") >= 0) {
      console.log("FOUND: <" + elem.nodeName + " " + attr.nodeName + "='" + attr.nodeValue + "'>");
      console.log($(elem));
    }
  }
});

The output shows no interesting stuff. Only <META content> for twitter reference, <A href>s and two <TD title="http://...">s that Mvc-Mini-Profiler inserted. None of them justify the warning of course. Here is the full output: http://pastebin.com/kgV8XHgN

So this looks really interesting. There is NOT a single element in DOM that contains an "HTTP" link yet Chrome warns about "insecure" content. I'm very troubled by it.

There are NO iframes on the page. ($("iframe") returns [])

EDIT: DAMN I lost the page :( (navigated to a link and back button turned to SSL icon to green). I knew it wouldn't last long. But I still appreciate any help since it wasn't the first time I saw that issue.

like image 508
Sedat Kapanoglu Avatar asked Aug 07 '13 17:08

Sedat Kapanoglu


People also ask

What is Chrome insecure content?

What is Insecure Content in Google Chrome. A web page contains several CSS and JavaScript files and these may be getting served from different locations. If the page is served over https but the associated files are served from a non-secure http website, the browser will throw the “insecure content” warning.

How to inspect the security of a page in DevTools?

The Security panel is the main place in DevTools for inspecting the security of a page. Open DevTools. Click the Security tab to open the Security panel. Figure 1. The Security panel

How do I unblock insecure elements in my website?

Unblocking insecure elements is not recommended but can be done, if necessary: Click the padlock icon in the address bar. Click Disable protection for now . To enable protection, follow the preceding steps and click Enable protection . Warning: Unblocking mixed content can leave you vulnerable to attacks.

Does your website have insecure content?

Even if users can access your site, if your site depends on many unsecured resources, it may be left virtually unusable. If you discover that your website has insecure content and you have no idea where to start with finding it and fixing it, don’t despair.

How do I know which trackers have been blocked in Firefox?

Note: The shield icon in the address bar tells you which trackers have been blocked on a website. See Enhanced Tracking Protection in Firefox for desktop for more information. : You’ll see a padlock when you are on a fully secure (HTTPS) page. To see if Firefox has blocked parts of the page that are not secure, click the padlock.


2 Answers

Just had this problem – if you check the Javascript Console in Chrome it will now tell you where the problem lies.

like image 146
Erebus Avatar answered Sep 20 '22 23:09

Erebus


I had the same issue yesterday, and found http://www.whynopadlock.com/

It shows which elements are not secure, and it also verifies certificate chains.

Btw, if your site can be loaded both http and https, then omit http: from external urls.

Not:

src="http://external.dom/external.js" or "https://external.dom/external.js"

Just:

src="//external.dom/external.js"

Then the browser will use http or https depending on what the page is loaded as

like image 21
Leif Neland Avatar answered Sep 19 '22 23:09

Leif Neland