https mixed content warning only on page reload in chrome - google-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://

Related

Chrome '`SameSite=None` warning in the console

I am not developing any website or anything. I just go to console from google chrome's default search page and this annoying warning pops up several times-
A cookie associated with a resource at http://google.com/ was set with
`SameSite=None` but without `Secure`. A future release of Chrome will only
deliver cookies marked `SameSite=None` if they are also marked `Secure`. You
can review cookies in developer tools under Application>Storage>Cookies and
see more details at https://www.chromestatus.com/feature/5633521622188032.
I am on a blank page only to write static js code and this pops up on each reload which is very annoying. How can I disable this warning so that it doesn't show up at all on the console. It very annoying to keep removing with clear console button.
Note: I would like to avoid installing CORS plugins. I just want to block or stop this annoying warning from console when I go to local pages.
In this instance you are not on a fully blank page, but the Google start page. As a result, these warnings are coming from the various resources loaded by the page. You can see the domains are generally gstatic.com, google.com, and so on. It's Google's responsibility to fix these warnings.
If you are on stable Chrome, then these warnings are purely informational and not affecting behaviour.
You can find more information on these particular changes at:
https://web.dev/samesite-cookies-explained
https://www.chromium.org/updates/same-site
To access a genuinely blank page, try popping about:blank into the address bar.

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.

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.

Analyze page to see which resource is not transfered in https

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.

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.