Solved

jQuery Fancybox and ClueTip caused the famous "Nonsecure" IE prompt

Posted on 2010-08-20
15
808 Views
Last Modified: 2013-11-11
Hi Guys,

I am currently using both Fancybox and Cluetip together in my J2EE portal. Well, I am not too sure which one is the offender but the portal keep prompting the "This page contains both secure and nonsecure items" intermittently (not always) when I opened up the pop-up using Fancybox. However, the fancybox is successfully shown in the background when the prompt is shown.

I am using Fancybox 1.3.1 and Cluetip 1.0.6. By disabling the cluetip, everything works fine hence I am guessing that the Cluetip could be the issue. It ONLY happened on IE6. I wish that everyone is using FF or Opera.

Has anyone experienced this before?

Thx
David
function constructURL(contextApp, obj, params) {
	var suiteId = "";
	var newHref = "";
	var title = "";
	var customerSite = "";
	
	if ($(obj) != null) {
		suiteId = $(obj).val();
	}

	if (suiteId == null || suiteId == undefined || suiteId == "undefined" || trim(suiteId).length == 0) {
		suiteId = "";
	}
	
	if ($("#customerSite") != null) {
		customerSite = $("#customerSite").val();
	}
	
	if (customerSite == null || customerSite == undefined || customerSite == "undefined" || trim(customerSite).length == 0) {
		customerSite = "";
	}

	// reset
	$("#" + params).attr("href", "/" + contextApp + "/ajax/AjaxAction.do");
	$("#" + params).attr("rel", "/" + contextApp + "/ajax/AjaxAction.do");
	$("#" + params).attr("title", "");
	
	// get existing
	newHref = $("#" + params).attr("href");
	newHref += "?methodName=retrieveSuiteIdDesc&suiteId=" + encodeURIComponent(trim(suiteId)) + "&customerSite=" + encodeURIComponent(trim(customerSite));

	$("#" + params).attr("href", newHref);
	$("#" + params).attr("rel", newHref);
	$("#" + params).attr("title", suiteId);

	// tooltip
	if (suiteId != null && trim(suiteId).length > 0) { 
		$("#" + params).cluetip({
			cursor: 'pointer',
			width: '160px'
		});		
	}
	else {				
		$("#" + params).cluetip({
			cursor: 'pointer',
			width: '140px',
			showTitle: false
		});	
	}
}

Open in new window

0
Comment
Question by:suprapto45
  • 9
  • 6
15 Comments
 
LVL 16

Author Comment

by:suprapto45
ID: 33487296
Oh yes,

In my JSP, attached are the ways on how I called it.

Thx
David
constructURL('<%=contextApp%>', $("#suite1"), 'suite1tip');


									<tr>					
										<td valign="top" height="25" width="40%" valign="middle">Test</td>
										<td valign="top" height="25" width="60%" valign="middle">
											<select name="suite1" id="suite1" onchange="constructURL('<%=contextApp%>', this, 'suite1tip');">
											</select>&nbsp;<img id="suite1Progress" src="/<%=contextApp%>/images/loading.gif">
											<a id="suite1tip" title="" href="/<%=contextApp%>/ajax/AjaxAction.do" rel="/<%=contextApp%>/ajax/AjaxAction.do" onclick="return false;"><img width="20" height="20" src="/<%=contextApp%>/images/new/icons/help.gif" style="border-style: none"></a>
										</td>
									</tr>

Open in new window

0
 
LVL 15

Expert Comment

by:SRigney
ID: 33502347
The famous nonsecure prompt will happen if you are serving your page over SSL, but you are also displaying content via http.  If the images that you are including are in an external location that is not https then it will display that message.

I don't think the problem is fancybox and cluetip.  I think the problem is the urls that you have in this section of the code.
0
 
LVL 16

Author Comment

by:suprapto45
ID: 33507279
Hi SRigney,

Thanks for the reply. I have used Fiddler2 to check is there any communication on HTTP instead of HTTPS but it reported that everything went to HTTPS hence, images are not the problem here. Additionally, I have checked all the CSS, JS and etc and all of them are using relative path (I am just afraid that there are some hardcoding URL to go to HTTP).

I have also checked the iframe and all the src of the frame have been properly set to avoid this message.

Thanks
David
0
 
LVL 15

Accepted Solution

by:
SRigney earned 500 total points
ID: 33510851
Try using YSlow, it will show you all of the images that are loaded from the CSS and their paths.  I've had luck with finding what was wrong that way before.
0
 
LVL 16

Author Comment

by:suprapto45
ID: 33512381
Thanks.

I just installed YSlow and it shows that all my images are coming from HTTPS.

Any other idea?

Thanks
David
0
 
LVL 15

Expert Comment

by:SRigney
ID: 33512427
verify that all of the javascripts and css are also coming from https.
0
 
LVL 16

Author Comment

by:suprapto45
ID: 33512468
Hi,

Yes, they all are. Just FYI, the nonsecure message was just intermittent hence I am also very confused here :(. If I disabled the cluetip, it works fine.

Thanks
David
0
Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

 
LVL 15

Expert Comment

by:SRigney
ID: 33512517
look inside the cluetip .css file.

Cluetip has the arrows that it loads make sure that they are set to load correctly.
0
 
LVL 16

Author Comment

by:suprapto45
ID: 33512589
Thanks friend,

Let me check this tomorrow and I really hope that this is the problem.

Thanks
David
0
 
LVL 16

Author Comment

by:suprapto45
ID: 33512681
Hi SRigney,

Can I confirm that you are actually suspecting that some of the images in cluetip are not loaded properly hence causing the nonsecure error to be displayed?

If this is the case, I will try to check other images in cluetip that may have this issue. Btw, any tool that I can use to check any unloaded image?

Thanks
David
0
 
LVL 15

Assisted Solution

by:SRigney
SRigney earned 500 total points
ID: 33512843
I just checked the newest cluetip on git http://github.com/kswedberg/jquery-cluetip/blob/master/jquery.cluetip.css

The images are included with url(images/rarrowup.gif) which would make them a dynamic path related to the current, and not the problem.

I personally had an issue with them before because I was serving them from a separate server that my static content was located at and that was an http server.   But that does not appear to be an issue in the default implementation.

Fancybox also appears to use the url() to include it's data.

I'm not sure I can provide any more assistance without having access to the site.
0
 
LVL 16

Author Comment

by:suprapto45
ID: 33518969
Hi SRigney,

>>"I'm not sure I can provide any more assistance without having access to the site."
You already helped me so much hence many thanks for that. I will try to play around with the codes and see whether I can solve this. If not, I may want to give you access to the site to hv a look.

Thanks
David
0
 
LVL 16

Author Comment

by:suprapto45
ID: 33542921
Hi SRigney,

Management has decided that this issue is minor issue and we will focus more to the bigger issue first.

Hence, I am going to accept ur answer on the YSlow. Well, it is not really fixing the core problem but that tools really help me in a lot of other things.

What do you think?

Thanks
David
0
 
LVL 16

Author Closing Comment

by:suprapto45
ID: 33548123
This does not directly solve the problem. Our management has decided that this is minor issue and we will look into it in the weeks to come.

However, SRigney has indirectly helped me in other problems by suggesting to use the YSlow hence I think that he deserves a full points.

Thanks again.
David
0
 
LVL 15

Expert Comment

by:SRigney
ID: 33549394
Thank you for the points.
0

Featured Post

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

Suggested Solutions

In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

747 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now