How to identify insecure content in Chrome DevTools or Firefox? - google-chrome

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.
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.

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

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

I just spent an hour with a similar problem, I got the green ssl lock in Chrome and IE but not in Firefox (only after page reload).
First of all: To debug SSL issues, the httpfox plugin seems to be better than firebug's network tab. Firebug showed all sources as https, but looking at httpfox, I quickly found the culprit: Google Analytics was loading the ___utm.gif tracking pixel via http. This tracking pixel came from the previous page, where I was tracking a Google Analytics event which was attached to a button click.
This seems to be a bug in Firefox: When tracking a GA event from a http page to a https page (e.g. Proceed button click), FF will load the tracking pixel via http on the https page, causing the error.
I removed the event from the button and FF stopped complaining about the partially encrypted connection.

It sounds most likely that an AJAX resource was used with an http:// URL... you would most likely need the network panel or console to check that.
Firefox's built-in developer tools have them.

A quick solution is to add target="_blank" in each <a> element. It will open the link in new window. Working on all browsers.

Related

`speculationrules` markup not working for prerendering pages in Chrome

Following the instructions in the Chrome blog Prerender pages in Chrome for instant page navigations, I am trying to enable pre-rendering on a website. I have added this snippet just before </body>.
<script type="speculationrules">
{
"prerender": [
{
"source": "list",
"urls": ["/Test/1","/Test/2","/Test/3"]
}
]
}
</script>
However, on the latest version of Chrome 108, none of these valid URLs are prefetched or prerendered when opening the page. I can confirm this in the Network tab of Dev Tools, and by following links to the pages which take the usual load time.
In the console, HTMLScriptElement.supports('speculationrules') returns true.
Am I missing something?
I can confirm this in the Network tab of Dev Tools
As the new prerender happens in a separate process (effectively like a background tab) any network calls are not shown in the current page’s DevTools. The Chrome team are working on adding DevTools support.
So here’s a few things to check:
Chrome doesn’t prerender when it’s already using a lot of memory. Try restarting Chrome with just that tab to rule this out.
Make sure you have “Preload pages” ticked in Settings->Privacy & Security->Cookies and other site data
Chrome Canary has a handy experimental setting which shows the reason pre-renders fail worth checking that out. Hopefully that will make it to stable soon.
It’s worth confirming if this is a specific issue to your site, or a general prerendering issue. Checkout the demo linked from that article and let us know if that works
Switching tabs currently cancels any prerenders. So make sure you launch straight from your page.
URL param differences can prevent prerendering being activated as it’s effectively not the same page.
There have been a few bug fixes since 108, so it maybe you’re hitting one of those? Check Dev, Beta, or Canary versions.
There is a “holdback” group of people we randomly select to disable this feature so we can continue to monitor it as it is rolled out, and compare to those not using it. It could be you’re in this group. Unfortunately there’s no easy way to tell this (the Chrome team is working on adding this). Try guest mode to see if that works which is usually the best sign you’re in this group.
Might be able to advise more after you try above steps and let me know.

view-source in href shows error in console

Click Me
This used to work as a valid href attribute but it seems in the past few months it now shows an error in the console (I'm using Chrome):
Not allowed to load local resource: view-source: http://stackoverflow.com
I found some links from 2013 where this was once a bug in Chrome but said it was fixed.
Could someone point me to an authoritative source that can explain why this no longer works? I assume that this is security by the browser and not an angular issue (since view-source is whitelisted and used to work)
Looks like Chrome and Firefox (at least) disabled this within the past year or so
I found this thread, and these release notes explaining why and provides a timeline as to when the change took place.
Related StackOverflow question: File URL "Not allowed to load local resource" in the Internet Browser
Chrome responds with the "Not allowed to load local resource:" as a security protocol. I'm not sure why this used to work, but not now, though there is no real way around this unless web-security is disabled. There may be a different outcome on other browsers, but ultimately you are correct in thinking that it's Chrome's security.
The reason is that Chrome tries to preload URLs in background, to speed up your browsing experience.
If you open the DevTools after loading the page, the content of the items listed on the Resources tab may not be populated. This is also true of network requests on the Network tab. To see the fully populated resources on the Resources tab, first open the DevTools, then refresh the page, or navigate to the desired page with the DevTools open. Now select the html resource and it should be populated.

<LINK rel=SUBRESOURCE href="file"> doesn't cache, despite having correct cache headers. Appears to download twice with a 200OK response

I use Glyphicons on my website, they are served as a part of Bootstrap 3. In viewing the Network tab of the dev console I realized they were loading late (when the browser's parser got to it), and there was room to improve performance by bringing that element to the browser sooner.
In Chrome it is possible to do this via:
<link rel="subresource" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/fonts/glyphicons-halflings-regular.woff">
In the <HEAD> of the document.
I am seeing the DOMContentLoaded time increase in a way which suggests this file is loading twice (first on line 5 in the screenshot, and again on the 2nd to last line). My suspicion is further confirmed that it is loading twice by the HTTP Response Code (200) which tells me it came from the remote server both times, and was not fetched from Cache.
You can see what the dev console looks like here:
http://oi60.tinypic.com/2t9n7.jpg
(In case tinypic goes down, here it is in my dropbox: https://www.dropbox.com/s/vlwgywatg9rsg8v/subresourcenotcached.png)
The Cache Headers on the HTTP version of that asset are, but it's worth noting the network tab output on the dev console looks the same for both HTTP and HTTPS.
HTTP/1.1·200·OK(CR)(LF)
Server:·cloudflare-nginx(CR)(LF)
Date:·Mon,·02·Jun·2014·17:49:06·GMT(CR)(LF)
Content-Type:·application/octet-stream(CR)(LF)
Content-Length:·23320(CR)(LF)
Connection:·close(CR)(LF)
Last-Modified:·Thu,·13·Feb·2014·22:45:07·GMT(CR)(LF)
Expires:·Sat,·23·May·2015·17:49:06·GMT(CR)(LF)
Cache-Control:·public,·max-age=30672000(CR)(LF)
Access-Control-Allow-Origin:·*(CR)(LF)
CF-Cache-Status:·HIT(CR)(LF)
Accept-Ranges:·bytes(CR)(LF)
CF-RAY:·13457c53f04d0378-LAX(CR)(LF)
(CR)(LF)
Does anybody have insight into how I can get this .woff file to cache, and properly utilize the LINK SUBRESOURCE capability in Chrome?
It's a bug in the current Chrome. Have a look at https://code.google.com/p/chromium/issues/detail?id=312327

Google Chrome intermittent load issue: possible to Programatically disable "Predict network actions..."?

I'm having a very strange problem with a site in Google Chrome:
When I click on a link (from a list view to a detail page), the page hangs and I Chrome throws up a dialogue asking me to kill the page. The page is never displayed.
But if I navigate directly to the page, it loads in Chrome without any problems. Both actions (clicking on a link or navigating to the page) work fine in Safari and Firefox.
Disabling "Predict network actions to improve page load performance" in Chrome's settings seems to fix the problem, but this is not a viable solution as I don't have any control of my user's browser settings.
Some more detail about the situation:
The link is just a regular <href>. I'm not doing any javascript
click() handling or anything else. I'm not using any 'prefetch' or 'prerender' <link> elements.
The pages all validate using the W3
html5 validator.
The page I'm navigating to loads a lot of JS, uses Knockout.js for rendering and loads a video file over HTTP.
On the occasions that the page does load (after a very long wait),
Chrome appears to have rendered the entire page in the background and
loaded all external resources. If I navigate directly to the page it
doesn't preload anything though (I'm using knockout to show a 'please
wait' message while the external resources load).
When I log the network requests using Charles, it appears that
Chrome loads the HTML for the page instantly, but the requests for
the external resources seem to take forever.
If I look at the CPU usage in Activity Monitor, 'Google Chrome Renderer' uses 100% CPU when loading from the href, but only 30% when loading directly from the page.
I'm using the latest version of Chrome (22.0.1229.94)
So - my question
Is there a way to programatically disable "Predict network actions to improve page load performance"?
Or is there some other solution to this problem?
Just going through high voted unanswered questions I came across this one, and I once got into a similar situation for entirely different reasons (chrome was preloading a huge file I couldn't afford to load for every user). The fairly simple solution I applied back then was to open the link through Javascript rather than a simple href which worked wonders. Either way, your problem might already be solved, but seeing the number of views I thought I could at least share this small insight.

How can you tell exactly what insecure items are causing a browser to warn about mixed secure and insecure items?

In Firefox, I view my site and get no warnings about insecure mixed content.
Using FireBug, I can see that every request is https.
In Chrome, I get the https crossed out in the address bar.
I viewed source in Chrome and then ran this regex /http(?!s)/ but the only things it found were the href attributes for some external links and the doc type and http-equiv meta tags.
Using Chrome's Resource Tracking revealed all requests were https too.
This includes Google Analytics, jQuery from Google's CDN and Facebook like scripts.
Is there any specific tool I can use to show non https requests, or anything further I can try?
I found that I get the "mixed content"-warning in Chrome even when there is no mixed content, if sometime during the session mixed content was already encountered on the domain.
(Also mentioned here: Why is Chrome reporting a secure / non secure warning when no other browsers aren't?)
In Chrome's Developer Tools, the Console tab shows the resources that it won't load because they unsecure.
You can add the "scheme" column to the Chrome developer tools network tab to show which requests were sent over http or https:
Press F12 to show the developer tools
Switch to the Network tab
Right click in the column headers and select "Scheme"
Reload the page to show which elements are loaded over http or https
In situations like this where it's helpful to see exactly which protocol is being used to load resources, I would recommend Fiddler2 as a browser-agnostic solution that can show you exactly what traffic is occurring on each request.
From the site:
Fiddler is a Web Debugging Proxy which logs all HTTP(S) traffic between your computer and the Internet. Fiddler allows you to inspect all HTTP(S) traffic, set breakpoints, and "fiddle" with incoming or outgoing data. Fiddler includes a powerful event-based scripting subsystem, and can be extended using any .NET language.
Edit: In-browser debugging tools are becoming really good so this third-party tool may not be as useful as it was when this answer was first written.
Open up the Web Inspector and find the yellow triangle (warning) in the top right. Click on it and it will display all security issues.
In 48-th version of chrome they added a security panel. Using it you can quickly identify the mixed content resources:
Do you have the HttpFox plugin for FireFox? That'd work, I think.
Among other things, it reports on the URL, Method, Result Code, and bytes of all the assets that a web page requests. It's what I've used to trap the occasional non-HTTPS graphic, etc. I'm sure the other suggested tools would do the same...
You can use SslCheck
It's a free online tool that crawls a website recursively (following all internal links) and scans for nonsecure includes - images, scripts and CSS.
(disclaimer: I'm one of the developers)
I know this post is old, but I ran across it and had the same issue. I clicked on the Chrome menu (top right corner), scrolled down to Tools> and selected Developer Tools. Clicked on the Console tab and it told me exactly what the problem was... the favicon was served over http, not https, but of course it was not in the page source code. Corrected the problem in my CMS, which loads the favicon without code in the page... and no more error!
Note that 'mixed content' and 'mixed scripting' are detected seperatly. Check this site for the meaning of the icons in Chrome: https://support.google.com/chromebook/answer/95617?p=ui_security_indicator&rd=1 (click 'see details' link).
Grey icon = mixed content, red icon = mixed scripting.