Hide URL in HTML

This demo works for HTTP and HTTPS. You are on HTTP right now Please click here to get to the HTTPS version.

The browser needs the URL of the iframe to load the content of the iframe.  This feature can hide the real URL by using a page that gets the parameter aiUrl with a hash which redirects to the real URL.

If a user looks at the source code or uses a developer tool to inspect the code he will only see the link to the intermediate page. Please note that users can still use the network tab to find the URL which is really loaded or by using the “view iframe source code” function of the browser!

Right click handling

To make the detection of the real URL a little bit harder, right click is disabled in/over the iframe if you enable this feature. The disabling is supported for the same domain and also the external workaround.
Please note: This does not disable the right click on the page in general because this is quite user unfriendly as this menu has lot of useful things! The normal right click that shows the html source includes the obfuscated URLs. It is only disabled over the iframe itself because there you can see the real URL with “Show iframe source”. For external domains you need to have the external workaround enabled to disable the right click. If you like to disable it in general or for different features as well add
document.oncontextmenu = function(){ return false; };
e.g. by adding custom Javascript files with “Add/Include” files.

Storage

The plugin does support 2 ways to store the URLs: Database or file. By default the file advanced-iframe-custom/iframe-data.csv is used to store the URLs. This is very fast (~10-20 ms) but concurrent access to the file can cause issues because of parallel access. The plugin uses file locking for all write operations so many parallel users can slow down the writing.
By defining |db after the time e.g. 0|db the URLs are temporary stored in the WordPress database as transients. This solution is very stable, but is also slow (~0.5s) as this is done through WordPress. Expired transients are cleaned every 24h since WordPress 4.9.

This settings also defines the way the url looks like. If you use file then a iframe.php in the plugin folder is used. By using db your main WordPress URL is used. To both a hash to find the real url with aiUrl=<hash> is added.
The hash is build from the url, iframe id, time, ip and a random number. This is needed as URLs should only work once. Means if 100 users access  the url at the same time each link has to expire for this one user only and not for the one that accesses the iframe in parallel.

So which one should you use? It basically depends on the load you have. I would start with the default storing this data in a file. Then monitor the response time of iframe.php in the developer tools when you think you have the most users online during a day. There you see the time that is needed to get the url from this file. I did tests with 20.000 entries in the file which was still quicker than using the WordPress database. I did not have parallel 20.000 users with write access so this number. So please do your own measurements.

Settings

Here you see different example configurations:

src_hide=”0″ Creates one time links which are stored in advanced-iframe-customiframe-data.csv
src_hide=”3600″ Creates links which a valid for 3600 s = 1 hour which are stored in advanced-iframe-customiframe-data.csv
src_hide=”0|db” Creates one time links which are stored in the WordPress database as transients
src_hide=”3600|db” Creates links which a valid for 3600 s = 1 hour which are stored in the WordPress database as transients

Caching plugins

One time links only works if you don’t use any caching plugin like wp_rocket! If you use a caching plugin you either disable the caching for the urls where you have the hidden URL or you can define the time in seconds a link is valid. This hides the URL not as good as before because a user can now copy and the link will still work for the time you have defined it.

Examples

Below you find 2 simply iframes with hidden urls. Simply look into the source code of this page by clicking here and then search for <iframe ….

To make it easier to copy/paste the examples most examples are fully configured in the shortcode directly. I use use_shortcode_attributes_only=”true” that none of the settings from the administration are used.

File storage

This example has a one time link. Look at the source code by clicking here and search for ‘id=”hidden_file” ‘. Then copy the src value and try to open it. It should end with /iframe.php?aiUrl=hash. Each time you reload the page a new hash is generated.

The shortcode which is used is:
[advanced_iframe use_shortcode_attributes_only="true" id="hidden_file" src="//www.tinywebgallery.com/blog/wp-content/plugins/advanced-iframe/example/example_fixed.html" width="100%" height="100" src_hide="0"]

Db storage

This example shows a link which is valid for 60 seconds. Look at the source code by clicking here and search for ‘id=”hidden_file” ‘. Then copy the src value and try to open it. It should work for 60 seconds only! If you have the plugin “Transients manager” installed you can see this there.

The shortcode which is used is:
[advanced_iframe  use_shortcode_attributes_only=”true” id=”hidden_db” src=”//www.tinywebgallery.com/blog/wp-content/plugins/advanced-iframe/example/example_fixed.html” width=”100%” height=”100″ src_hide=”60|db”]