I want to use fancybox in application running over https

Question

I have a web application that is making use of fancybox, it is working fine when web server is configured to run over http protocol, but when application is run over https protocal, fancybox is not loading anything. Any help in the matter will be helpful

score 1 · Answer 1 · edited May 23 '17 at 12:25

This is what you have to consider when using fancybox in a HTTPS environment :

1). Images

Images are allowed in a mixed HTTP/HTTPS environment, so you can call an image (via absolute path) hosted in unsecured (HTTP) site from a secured (HTTPS) page like :

<a class="fancybox" href="http://unsecured.com/images/image01.jpg">open image</a>

NOTE : This scenario triggers a warning in the console though.

If you are using relative paths, then the HTTPS is added to the image's URL and you don't have to do anything else.

2). Active Content

Active content (iframe/ajax) is not allowed in a mixed HTTP/HTTPS environment so you cannot call any HTTP page from a secured HTTPS server.

Also consider, AJAX calls are subject to the Same Origin Policy and despite any ajaxed page may be hosted in the same domain, calling it from a HTTPS page like

<a class="fancybox fancybox.ajax" href="http://myserver.com/ajaxpage.html">open ajax page, unsecured connection</a>

... won't work.

<a class="fancybox fancybox.ajax" href="https://myserver.com/ajaxpage.html">open ajax page, secured connection</a>

... will do.

3). Open iframes from another domain

It is not possible to open iframes from another domain, unless the page in question also offers the possibility of a secured HTTPS connection. Adding HTTPS to the URL is not enough if the external server/page doesn't support HTTPS.

Bear in mind that many sites that require HTTPS connection may be also sending X-Frame-Options : SAMEORIGIN headers so you may not be able to open them neither from a secured or unsecured page.

Workaround

Based on this StackOverflow answer, we could use Google as SSL proxy for a workaround to open unsecured pages from a secured page, so we could add this callback to our fancybox initialization code :

beforeLoad : function () {
    if (this.type == "iframe") {
        this.href = "https://www.google.com/search?q=%" + this.href + "&btnI=Im+Feeling+Lucky";
    }
}

See a DEMO
* you may get a warning because is a secured server

I want to use fancybox in application running over https

1 Answers1