"Insecure Favicon" is causing mixed content on secure pages

Hi all, I just did an upgrade to v154 along with a new template, so my files are all new, though I used a copy of my database from my previous version of my store. I also have moved to new hosting company with a new SSL certificate. Anyway, the little yellow triangle is coming up on my secure pages instead of the green lock (on Chrome), and at first I thought it was because I had added some hard coded http:// links, which I changed to relative links, but after I took care of them all nothing had changed.

In Chrome when I look at the Javascript Console when on a secure page, I get this warning: Mixed Content: The page at 'https://www.blackorchidcouture.com/store/whichever_page' was loaded over HTTPS, but requested an insecure favicon 'http://www.blackorchidcouture.com/store/'. This content should also be served over HTTPS.

I don't know how to even begin to fix this, and have googled it and not found an answer. Any ideas? I'd really like to get my green lock back! Thanks!

BlackOrchidCouture:

Hi all, I just did an upgrade to v154 along with a new template, so my files are all new, though I used a copy of my database from my previous version of my store. I also have moved to new hosting company with a new SSL certificate. Anyway, the little yellow triangle is coming up on my secure pages instead of the green lock (on Chrome), and at first I thought it was because I had added some hard coded http:// links, which I changed to relative links, but after I took care of them all nothing had changed.

In Chrome when I look at the Javascript Console when on a secure page, I get this warning: Mixed Content: The page at 'https://www.blackorchidcouture.com/store/whichever_page' was loaded over HTTPS, but requested an insecure favicon 'http://www.blackorchidcouture.com/store/'. This content should also be served over HTTPS.

I don't know how to even begin to fix this, and have googled it and not found an answer. Any ideas? I'd really like to get my green lock back! Thanks!

The easiest way to get help to fix this is to provide a copy of the template file that is presenting the "insecure" image by placing it between code tags generated by pressing the # symbol in the toolbar above the reply entry screen.

The goal... effectively to either on the fly identify if the page is currently being served as https and then present the path to the applicable image(s) in the same manner, or to have the

src='//www (dot) blackorchidcouture (dot) com/store'

If not mistaken the file in question is: includes/templates/YOUR_TEMPLATE/common/tpl_header.php

mc12345678:

... If not mistaken the file in question is: includes/templates/YOUR_TEMPLATE/common/tpl_header.php
Actually, that processing is in /includes/templates/YOUR_TEMPLATE/common/html_header.php.

Look for the section (in the default v1.5.4 version) that looks similar to:

<?php if (defined('FAVICON')) { ?>
<link rel="icon" href="<?php echo FAVICON; ?>" type="image/x-icon" />
<link rel="shortcut icon" href="<?php echo FAVICON; ?>" type="image/x-icon" />
<?php } //endif FAVICON ?>

If the code looks like that, use your admin's Tools->Developers Tool Kit to search for favicon; if found, make sure that it's just the filename, not prefixed with http://

Hi, thanks for the replies! I searched favicon in Developers Toolkit, and there are no instances of http:// associated with it. Also, the file html_header.php just has the default favicon code as you posted.

I believe I've found all of the http:// instances that I had hardcoded and turned them into relative links. Do links to outside pages have anything to do with creating mixed content on secure pages? I'm assuming not.

At this point I'm wondering if it's my SSL certificate. I talked to my hosting company yesterday and they showed me that everything is working as it should, but I also noticed that the certificate is for both blackorchidcouture.com and https://www.blackorchidcouture.com. Shouldn't it just be for the one I use?

Thanks!

BlackOrchidCouture:

Hi, thanks for the replies! I searched favicon in Developers Toolkit, and there are no instances of http:// associated with it. Also, the file html_header.php just has the default favicon code as you posted.

I believe I've found all of the http:// instances that I had hardcoded and turned them into relative links. Do links to outside pages have anything to do with creating mixed content on secure pages? I'm assuming not.

At this point I'm wondering if it's my SSL certificate. I talked to my hosting company yesterday and they showed me that everything is working as it should, but I also noticed that the certificate is for both blackorchidcouture.com and https://www.blackorchidcouture.com. Shouldn't it just be for the one I use?

Thanks!

Said what FAVICON does not contain, but what is the content of the define for FAVICON? There may be more than one instance of it, post all. Include the path of each as well as identify your current template.

Ok, these are the only instances where favicon shows up, and the files they are in:

includes/languages/english/winchester_black/meta_tags.php (this is the template I'm using)

Line #64 : // favicon setting 

Line #66 : // define('FAVICON',''); 

includes/templates/template_default/common/html_header.php

Line #34 : <?php if (defined('FAVICON')) { ?> 

Line #35 : <link rel="icon" href="<?php echo FAVICON; ?>" type="image/x-icon" /> 

Line #36 : <link rel="shortcut icon" href="<?php echo FAVICON; ?>" type="image/x-icon" /> 

Line #37 : <?php } //endif FAVICON ?> 

includes/templates/winchester_black/common/html_header.php (this is the template I'm using)

Line #56 : <?php if (defined('FAVICON')) { ?> 

Line #57 : <link rel="icon" href="<?php echo FAVICON; ?>" type="image/x-icon" /> 

Line #58 : <link rel="shortcut icon" href="<?php echo FAVICON; ?>" type="image/x-icon" /> 

Line #59 : <?php } //endif FAVICON ?> 

BlackOrchidCouture:

Ok, these are the only instances where favicon shows up, and the files they are in:

includes/languages/english/winchester_black/meta_tags.php (this is the template I'm using)

Line #64 : // favicon setting

Line #66 : // define('FAVICON','');

> 
> includes/templates/template_default/common/html_header.php
> ```
Line #34 : <?php if (defined('FAVICON')) { ?> 

Line #35 : <link rel="icon" href="<?php echo FAVICON; ?>" type="image/x-icon" /> 

Line #36 : <link rel="shortcut icon" href="<?php echo FAVICON; ?>" type="image/x-icon" /> 

Line #37 : <?php } //endif FAVICON ?> 

includes/templates/winchester_black/common/html_header.php (this is the template I'm using)

Line #56 : <?php if (defined('FAVICON')) { ?>

Line #57 : <link rel="icon" href="<?php echo FAVICON; ?>" type="image/x-icon" />

Line #58 : <link rel="shortcut icon" href="<?php echo FAVICON; ?>" type="image/x-icon" />

Line #59 : <?php } //endif FAVICON ?>

If that's the case then either FAVICON is defined in the database or it's not FAVICON that is being displayed. Based on the above code, FAVICON is never defined and therefore the sub-code in the if statement is never run if all has been provided.

Hi, yes, that is all that comes up in Developers Toolkit.

So, I had an idea, I copied my favicon into the base of my store, and to the meta_tags.php English defines file I'm trying to figure out the correct syntax to define the favicon to reflect the new path, but I'll use the full https:// url. Here is what I tried, though I'm still seeing the yellow triangle so it doesn't seem to have worked. Do I need to wrap something around the link?

// favicon setting
// There is usually NO need to enable this unless you need to specify a path and/or a different filename
//  define('FAVICON','https://www.blackorchidcouture.com/store/favicon.ico');

The FAVICON, if set, gets its value from a PHP define statement; it's not stored in the database.

If your favicon is named favicon.ico, simply place it into the root of your Zen Cart (the folder/directory where the file ipn_main_handler.php is located) and browsers will "find" it by default.

Hi, yes, I have moved my favicon to the root of my store, but it hasn't fixed the mixed content SSL issue which still says the favicon needs to be delivered over https://, that's why I was thinking if I indicated the direct URL to my favicon and included https://, it might work. I'm just not sure of the syntax of adding a URL to a language defines file...

BlackOrchidCouture:

Hi, yes, I have moved my favicon to the root of my store, but it hasn't fixed the mixed content SSL issue which still says the favicon needs to be delivered over https://, that's why I was thinking if I indicated the direct URL to my favicon and included https://, it might work. I'm just not sure of the syntax of adding a URL to a language defines file...
It's almost looking like a bug in Chrome; there's no place in your generated HTML (press Ctrl+U to view) where you're calling out the favicon. To work around the issue, you could edit the file /includes/modules/YOUR_TEMPLATE/meta_tags.php and add:

define ('FAVICON', HTTPS_SERVER . DIR_WS_HTTPS_CATALOG . 'favicon.ico');

I'm seeing the following in the developer console (latest version of Chrome):

1. GET ```
   https://www.blackorchidcouture.com/favicon.ico

2. ... requested an insecure script ```
'http://www.blackorchidcouture.com/store/includes/winchester_black/jscript/jquery.carouFredSel-6.0.2.js'.
``` This request has been blocked; ...

The first item indicates their is no favorite icon "favicon.ico" on your website. Did you place this file in the correct location ("/favicon.ico")? Or did you place it somewhere else (such as "/store/favicon.ico"; would require doing something similiar to what lat9 suggested)?

The second item is probably the actual cause of the insecure / mixed content warning. A similiar warning is shown by Firefox and Internet Explorer.

Hi, thanks, yes I originally had my favicon.ico in my public folder, but moved it to my store folder in trying to fix this SSL issue. My favicon was still showing up, but it didn't fix the SSL issue. I added the define favicon code that lat9 suggested, but it didn't remove the yellow triangle (and yes, I too noticed that this SSL issue is just showing up in Chrome, Firefox isn't showing any warnings).

I just found a fix to the js carousel showing an error here: http://www.zen-cart.com/showthread.php?216242-Winchester-Black-Responsive-Template/page6

So now the warning is gone for that, and ironically the warning about the favicon is gone too! But, still a yellow triangle, and this is the last thing showing up in the Javascript Console for Chrome:

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check http://xhr.spec.whatwg.org/.
chrome-extension://flliilndjeohchalpbbcdekjklbdgfkk/js/bunches/content.js:7 Iframe attached successfully

Any ideas on how to fix that? Thanks for helping me with this guys!

lhungil:

I'm seeing the following in the developer console (latest version of Chrome):

2. GET ```
   https://www.blackorchidcouture.com/favicon.ico

>
3. ... requested an insecure script ```
'http://www.blackorchidcouture.com/store/includes/winchester_black/jscript/jquery.carouFredSel-6.0.2.js'.
``` This request has been blocked; ...
>
> 
> The first item indicates their is no favorite icon "favicon.ico" on your website. Did you place this file in the correct location ("/favicon.ico")? Or did you place it somewhere else (such as "/store/favicon.ico"; would require doing something similiar to what lat9 suggested)?
> 
> The second item is probably the actual cause of the insecure / mixed content warning. A similiar warning is shown by Firefox and Internet Explorer.
FWIW, I found the favicon at ```
https://www.blackorchidcouture.com/store/favicon.ico

I just discovered that favicon code you gave me to make it serve over https:// IS why the favicon errors disappeared! I removed it because I wasn't sure I was needing it, and they all came back, put it back on and they are gone! So the last issue that is causing the yellow triangle is the Synchronous XMLHttpRequest.

Getting rid of the warnings one by one, thanks for the code for the favicon!

Hi - I have the same problem, getting a yellow triangle in Chrome, referring to the insecure request to favicon on this page.
https://secure.firstediting.com/pricequote1_check.php?a=

(" The page at 'https://secure.firstediting.com/pricequote1_check.php?a=' was loaded over HTTPS, but requested an insecure favicon 'http://www.firstediting.com/'.") I created a completely empty file to try to identify the problem with the following coding below.

However I stil see the yellow warning triangle. Does it show up for you as well? As I am not an expert coder, I wonder if I have to create the image file favicon.ico and place it in some certain folder in order to have the code below refer to it. Would highly appreciate som insights here..... / jolzzon

<?php

define ('FAVICON', HTTPS_SERVER . DIR_WS_HTTPS_CATALOG . 'favicon.ico');

?>

<head>
	<Title>test</title>
</head>
<body>
	<table>
		<tr><td>test</td></tr>
	</table>
</body>  

OK, uploaded the favicon.ico to the secure folder AND yellow triangle is gone! Thanks smart people out there for a problem that not even my server support team could solve.... Now I can enjoy my weekend, this has been drivning me crazy for a week...

I apologize in advance if I am hijacking this thread, but to me this is related.......

Anyway, I have my favicon working using the solution recommended by lat9 in #11 above. When I click on a secure page, the little padlock blinks on and then goes away. Is this the way it's supposed to work, or is there something else I need to do?

You can watch it happen at https://www.heirloomstocherish.com. I am on ZC v1.5.4.

Thanks in advance (and I will accept appropriate chastisement if I indeed hijacked the thread)

Thanks,
Phil

The credit cards are being called incorrectly so that they are not secure ...