Dev tools not showing insecure content loaded in via javascript - ssl

I work with a lot of SSL/https pages that must be 100% secure so the lock is green and not yellow.
It's easy to pinpoint any 'dom level' scripts or images, because console puts out the error 'this page is loading insecure content from __'
The problem is when a secure https script loads NON-https image/script... it doesnt seem to be logged in chrome dev tools console as an error for loading insecure content. The only way to see it is if i manually move the mouse over like 80 different asset links, tracking pixels, etc and making sure it starts with https
Does anyone know a better way of handling this? Thanks!

In Firebug you can enable the display of a Protocol column. To do so you have to right-click onto the column headers inside the Net panel and click on Protocol. Then you can sort by that column by clicking on it's column header.
Doing so it should be pretty easy to spot the insecure request.
Sebastian

Related

MS Edge: Opening the developer tools panel causes all http requests to occur twice

Using MS Edge and apache w/ php, I just discovered via access.log that when I have the JavaScript debug panel (i.e. developer panel) open, it is making every http call twice. When I closed this panel, it has fixed the issue of all insert statements getting called twice.
Question: Does this doubling of http calls happen on every / most browsers that I need to look out for, or is this something special/unique with MS Edge?
I can't speak for all browsers and all developer tools. But, for IE and Edge the first time you open the tools and then open a JS file in the sources view it will try to request the file again. That request will be served from the local browser cache, sometimes not, depending on the cache settings for the file being requested.
The reason browser tools need to make this request is that browsers will often throw out the original source file as it doesn't need it to execute the page, as the source has been parsed it into something else that it can work with.
However, after you've opened the developer tools the browser will keep around sources in future navigations, either in the tools front end or elsewhere. Not keeping sources is an optimization for the first time use case, to save browsers keeping around source on the very low odds of the tool being used on any given navigation.
Of course some files are never cached by the browser and will need to be downloaded when requested by the tools, for example sourcemapped files.
In general any resources on your site that can be accessed by HTTP GET should be idempotent. That is, a GET shouldn't change the resource being requested (or generall the state of your site), so hopefully making additional requests shouldn't be an issue.

Tools for finding Non SSL resources in web page (firebug like tool)

I'm trying to find a non-SSL resource that is being loaded on my site.
This happens occasional where one of us forgets to use the https version of a resource (like some js in a CDN).
My question is there any firebug-like tools to find these "Turds in the punch bowl"? I want my green padlock back :)
Besides Firebug, which you've mentioned, you can use the developer tools in Chrome:
Tools menu -> Developer Tools
Go through the list of loaded resources in the Network tab
Alternatively, the HttpFox extension for Firefox can also be useful. It will keep logging the traffic even when you change pages, which may be useful in some cases.
(This is very similar to Firebug.)
mitm-proxy is great for stuff like this - http://crypto.stanford.edu/ssl-mitm/
You run it on your local machine in a console window, set your browser to use it as a proxy, and you can watch /log everything that your browser requests. It's a little noisy since it shows SSL hand-shaking and file contents, but you can filter that down. When you need to debug SSL communications it's invaluable to see those details though..
mitm-proxy is based on http://grinder.sourceforge.net/g3/tcpproxy.html which has more in the way of scripting capabilities.

web site connection slow

I have apache web server and I have a django site on it.
The site use a lot of images (~50) png file.
When I refresh the page it is very slow until it come back again.
I tried to check with google developer tools network view and saw that my site have connection latency when I requesting the images..
I attached the screenshot - it is the top of the list and go on until the end..
Do you have any idea to reduce the delay?
http://2seat.co.il/static/timeline.png
If your images dont change often try using cache control headers so that your browser doesnt get the images from server every time you reload a page

Connection partially Encrypted - Part not transmitted over SSL

I'm wondering how I can find out where the culprit is, as to what is NOT being transmitted over SSL on my website. It's blowing my mind, because I use relative URLs or explicitly choose HTTPS:// for all links, images, etc...
Any ideas/tools to find out what the issue is?
Thanks.
If you mean that some resources are transferred over HTTP without encryption, you can check for this in Chrome's Developer tools in the tab Resources - that should tell you which parts come from where - look for those with address starting with http:// .
Alternately, use Fiddler: by default, it won't decrypt HTTPS connections, so you'll be seeing CONNECT requests for HTTPS, and GET/POST for HTTP - those are your culprits.
For those, like myself, who run into this issue i suggest a few tips while designing your website.
Always use relative paths when ever possible "images/someimage.png" instead of using domain paths like http://someDomainName/images/someimage.png so on. Any one of these and it will cause the browser to throw that warning at you.
When linking to external content, Google/other Ads, javascript sources(such as jquery, so on), or any other media... make sure you use a https:// link if they have one available. Myself, i had one tiny image for a link to an external site but they did not offer a https link to the image, so i simply downloaded it and put it in my images folder. Problem solved.
The Chrome resources list is a very helpful tool, not sure if Firefox has something similar in its tool box. Another method, if you have shell/command line access, is to use grep to search the files for "http:". This, most often, will show anything that is linking to non secure content.

Find out what resources are not going over HTTPS

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!