Why you should not mix http and https when using iframes

In the administration of advanced iframe I have written the following note:

"Please do not use a different protocol for the iframe: Do not mix http and https if possible!".

What does this mean?

  1. If the protocol of your page is http than use a http page inside the iframe.
  2. If the protocol of your page is https than use a https page inside the iframe.

But why should you not do this?

1. https with http iframe

Lets start with the one you can not do:  Your page is https and your iframe page is http. This scenario is called "Mixed Active Content" and is blocked by all major browsers now. You can open this test page and check the browser console (F12) for the errors you get then!

-> HTTP pages cannot be included directly into HTTPS pages!

2. http with https iframe

-> HTTPS pages can be included into HTTP pages!

What you  can do is including an iframe with a https page into a http page. This not recommended as is generally bad practice to embed an iframe with content served over HTTPS within a page served over plain HTTP (or mix content). The reason for this is, that there's no good way for the user to check they're using the HTTPS site they intend (unless the user really wants to check the source of the page). They also don't know that e.g. their login credentials are sent over HTTPS as in the browser address only HTTP is visible.
Also you need to try if your pages are working on all major browsers. I already had users with side effects when it comes to cookies or session handling!

My recommendation is to upgrade your http page to https!

IF YOU STILL WANT TO DO THIS: The external workaround is by default NOT working in this setup as the Javascript is than loaded from an http domain which is blocked! To get this working in the pro version you need to

  1. Enable "Use post message for communication" on the "External workaround" tab.
  2. Copy the generated ai_external.js to a https domain and include it from there! Remember to copy the ai_external.js each time you change something with the "save" icon in the administration.

See a working example here: http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/external-workaround-with-post-message#e53

Have fun using advanced iframe (pro),
Michael

 

New advanced iframe pro demos

I have created 8 new demos for advanced iframe for existing and the new features that come with 7.3:

Hope this helps you to use advanced iframe even better.

Version 7.3 is now in the testing phase and will be released in a few days.

Have fun using advanced iframe,
Michael

 

TWG 2.4 preview with html5 uploader is online

Hi,

TWG 2.4 with html5 uploader is available as preview.

In the front end now for mobile devices plupload is included as html5 uploader.
There are 15 new settings in the config.php to configure it ($html5_*).

Feel free to try this version:

PLEASE NOTE: This version is now feature complete. I’ll now prepare the website and then I release it.

Get it here:
http://www.tinywebgallery.com/dl.php?file=twg24
Patch:
http://www.tinywebgallery.com/dl.php?file=TWG_1.6.x_to_2.4-patch

Please provide feedback!

Have fun using TWG,
Michael

Using a reverse proxy to enable all features of advanced iframe pro

In the quickstart guide you have found out which setup you have and which features are available for you. If you are on a different domain and you cannot add the line of Javascript than you normally cannot use features like auto height, css modifications or auto zoom.

The last option you might have is that you setup a so called reverse proxy (http://en.wikipedia.org/wiki/Reverse_proxy). If you run your own server or your hoster does allow that you use mod_proxy (http://httpd.apache.org/docs/current/mod/mod_proxy.html) AND you have access to the server config you can map the page you want in the iframe to a url of your site. Proxypass is not supported when you can only use a .htaccess file!

There are many tutorials about this topic. In my example below I use Five b from the following page: http://serverfault.com/questions/561892/how-to-handle-relative-urls-correctly-with-a-reverse-proxy.
A more detailed tutorial can be found here: http://www.apachetutor.org/admin/reverseproxies. Details about proxypass and proxypassreverse can be found here http://httpd.apache.org/docs/2.4/mod/mod_proxy.html#proxypass

So a reverse proxy setup can be quite simple but also not working at all depending on the page you want to include. And it does require a lot of time and is really an advanced topic.

As example I show you how I setup a reverse proxy on my localhost for the main page of www.tinywebgallery.com.

1. Enable mod_proxy and mod_substitute in conf/httpd.conf
2. Add

<IfModule proxy_module>
    ProxyPass /twg/ http://www.tinywebgallery.com/
    ProxyPassReverse /twg/ http://www.tinywebgallery.com/
    <Location /twg/>
      AddOutputFilterByType SUBSTITUTE text/html
      Substitute "s|www.tinywebgallery.com/|localhost/twg/|i" 
    </Location> 
</IfModule>

to the Apache config (conf/httpd.conf or e.g. extra/httpd-proxy.conf).

3. Restart the server

www.tinywebgallery.com is now available at http://localhost/twg/ ;).

And now you would be able to use all features of Advanced iFrame Pro!

Best, Michael

TWG 2.2 is available

TWG 2.2 is available

This are the important new features:

  • TWG has a new responsive mode for registered users.
  • Support for HTML5 videos! See the updated howto 34.
  • Many optimizations for mobile devices. Go the the ajax demo and go to the responsive folder.
  • Some hoster do report that a virus is in TWG. This is a false alarm but the part war rewritten to avoid this message.

This is the new stuff:

  • New: TWG goes responsive. Main, thumbnail and detail pages are responsive now. See the new howto 57 how to use this. This feature is available for registered users.
  • New: Support for HTML5 videos! See the updated howto 34.
  • New: Sorting mixed folders does now ignore v___. So sorting is not needed anymore only because of the video prefix.
  • New: New html mode selector images.
  • New: You can now set $use_manual_port if you are behind a proxy with a different port.
  • New: Additional media queries where added to improve support for mobile devices.
  • New: Optimization for ipad and iphone in horizontal mode.
  • New: Album and folder description use the dotdotdot jQuery plugin which cuts text with … if they cannot displayed anymore because of the screen size. See the first page of the ajax demo and reduce the browser size until you see the … ;).
  • New: Updated jQuery to 1.11.1
  • New: On smart phones the autodetect of thumbnails is disbled if the responsive mode is enabled on the thumb page because this can cause exteme big paginations.
  • New: On browser resize the new size is sent right away. So at the next request the size works fine right away.
  • New: TFU 3.2 included.
  • Fix: Swipe was not working on elements with links. This means on the detail page swiping was not working over an image.
  • Now a are excluded in the plugin and swiping should work now everywhere.
  • Fix: Some virus scanner where reporting a file of TWG which included some encoded code as virus. This is a false alarm but the code was changed to avoid that TWG is blocked by your hoster.
  • Fix: The pagination on the thumbnail page was wrong if you mix folders and thumbnails
  • Fix: Sorting for dates before 2000 (Length of the timestamp of 9)
  • Fix: Disabling the captions was disabling the edit of folder.txt and foldername.txt in the menu. Now this feature still works when captions are not shown.
  • Fix: iframe youtube and using a sorting prefix was not playing the first video.
  • Fix: Direct folder.png was not shown in php include mode.
  • Fix: Folder image was not shown when basedir was not default and SEO was enabled.

So everyone should update to this version for best user experience on deskop and mobile devices.

You find the download and the patch on the normal download pages…

Have fun using TWG,

Michael

TWG 2.0.5 is available – Swipe support for all Tablets!

Hi everyone,

a new version for TWG is available.

Swipe support for all smart-phones AND tablets is available ;).

2.0.5
New: Swipe support is now available for all smart-phones AND tablets! A real mobile detection is now included and a jquery plugin for swipes is used!
Fix: Lighbox images where broken inside an iframe on some browsers. Now all tested browsers work fine.
Fix: Vertical images on top x are now centered.

2.0.4
New: Enable/disable the whole mobile detection: $enable_mobile_detection
Fix: Speedtest fixed. Was broken because of the 404 crawling “+ loc +” fix.

So please update to 2.0.5 to get the full support for mobile devices + no crawling error on google.

Have fun using TWG,
Michael

TWG blog has moved to http://www.tinywebgallery.com/blog

TWG blog has moved to http://www.tinywebgallery.com/blog

One small note.

I was moving the blog and was getting redirected back to the main page again and again.

The problem was that if you move wordpress to a subdirectory the created .htaccess for permanent links is not correct anymore! Go to settings -> permalinks and copy the .htaccess example from this page into your existing .htaccess and everything is fine again ;).

Have fun with the new blog site…

– Michael