Jquery https http issue

Question

I'm using Fancybox from FancyApps to preview content on my website.

<a href="#inline" class="various"><span class="info"></span></a>

<div id="inline" style="display:none;width:500px;">
    <h2>Always enjoy the sunny days!</h2>
</div>

<script type="text/javascript">
    $(document).ready(function() {
        $(".various").fancybox({
                maxWidth    : 500,
                autoSize    : true,
                closeClick  : false,
                openEffect  : \'none\',
                closeEffect : \'none\'
            });
    });
</script>

Basically this is working fine, but in one situation I need to redirect my site to a secure server, so the domain will change.

Example:

https://secure-payment.com/relay/v2/relay.cgi/http://www.mydomain.com/checkout

When I use the link to trigger Fancybox no this page, I just get "The requested content cannot be loaded. Please try again later."

In addition (I don't know if it's relevant) I'm running the script below on the bottom of my page, this is as requested from the payment company.

//
// Variables used for searching
//
var relayurl = "https://relay.ditonlinebetalingssystem.dk/";
var relayurl_replace = "https://relay.ditonlinebetalingssystem.dk/relay/v2/relay.cgi/";
var baseurl = "";

function getURLParam(strParamName){
  var strReturn = "";
  var strHref = window.location.href;
  if ( strHref.indexOf("?") > -1 ){
    var strQueryString = strHref.substr(strHref.indexOf("?")).toLowerCase();
    var aQueryString = strQueryString.split("&");
    for ( var iParam = 0; iParam < aQueryString.length; iParam++ ){
      if (aQueryString[iParam].indexOf(strParamName.toLowerCase() + "=") > -1 ){
        var aParam = aQueryString[iParam].split("=");
        strReturn = aParam[1];
        break;
      }
    }
  }
  return unescape(strReturn);
} 

//
// Replace all links to NOT use the relay-script when the user clicks on the links
//
function replaceRelayButtons(parent, startTimer) {  
    var aEls = parent.childNodes;
    for (var i = 0, aEl; aEl = aEls[i]; i++) {
        //
        // Do recursive call
        //
        replaceRelayButtons(aEls[i]);

        if (aEls[i].tagName == 'A' || aEls[i].tagName == 'a') {
            if (aEls[i].href.indexOf(relayurl) == 0) {
                aEls[i].href = aEls[i].href.replace(relayurl_replace, "");
                aEls[i].href = aEls[i].href.replace(relayurl, "")
                if (aEls[i].href.indexOf("http://") != 0) {
                    aEls[i].href = (baseurl + "/" + aEls[i].href);
                }
            }
        }
        if (baseurl.length > 0) {
            if (aEls[i].tagName == 'IMG' || aEls[i].tagName == 'img') {
                if (aEls[i].src.indexOf(relayurl) == 0 && aEls[i].src.indexOf(relayurl_replace) == -1) {
                    aEls[i].src = aEls[i].src.replace(relayurl, relayurl_replace + "/" + baseurl + "/");
                }
            }
        }
    }

    //
    // Now start the timer which runs this function again to fix all body elements that might not be loaded in the browser yet
    //
    if (startTimer) {
        setTimeout("replaceRelayButtons(document.body, false)",1000)
        setTimeout("replaceRelayForms()",1000)
    }
}

//
// Replace all form actions to NOT use the relay-script when the user clicks on the links
//                              
function replaceRelayForms() {
    for (i = 0; i < document.forms.length; i++) {
        if (document.forms[i].action.indexOf(relayurl) == 0) {
            document.forms[i].action = document.forms[i].action.replace(relayurl_replace, "");
            document.forms[i].action = document.forms[i].action.replace(relayurl, "")
            if (document.forms[i].action.indexOf("http://") != 0) {
                document.forms[i].action = (baseurl + "/" + document.forms[i].action);
            }
        }
    }
}

//
// Go and replace the urls and form actions
//
if (getURLParam('baseurl') != null) {
    baseurl = getURLParam('baseurl')
}
replaceRelayButtons(document.body, true);

What Might I be doing wrong? Is this even possible?

score 0 · Accepted Answer · edited May 23 '17 at 12:02

0

I don't think much is wrong, but you can't load a HTTPS URL into a HTTP url, because it should be a secure URL aswell. This because fancybox generates a iFrame if the URL is another domain.

IE will show you a error, but Firefox will load the page, try it and you will see.

For more detailed information: JavaScript HTTPS to HTTP iFrame Security Question

edited May 23 '17 at 12:02

Community

1
1

answered Dec 16 '11 at 11:21

Niels

48,601
4
62
81

So basically it's not doable? – Kristian Dec 16 '11 at 11:55
No unless you are calling it from an HTTPS url. Cus you can go from Secure > Secure but not from Unsecure > Secure. – Niels Dec 16 '11 at 12:05
Really supprised I can't get this to work, as it's not really an iframe im launching but inline. I guess fancybox creates an hidden iframe or such. – Kristian Dec 16 '11 at 12:38
If you don't use a iframe, it's trying to do a cross domain Ajax request, which is not allowed in Javascript except if you uson JSONP. – Niels Dec 16 '11 at 12:59

score 0 · Answer 2 · edited May 23 '17 at 10:08

I think the issue of "The requested content cannot be loaded. Please try again later." it's more related to this thread https://stackoverflow.com/a/8509018/1055987 than the fact you are in a secure server.

so try changing this part of your code

<div id="inline" style="display:none;width:500px;">
    <h2>Always enjoy the sunny days!</h2>
</div>

to this

<div style="display:none;">
    <h2 id="inline" style="width:500px;">Always enjoy the sunny days!</h2>
</div>

Jquery https http issue

2 Answers2