JavaScript logging in Internet Explorer 9

Today it took me a long time to figure out why a JavaScript-based third-party product I used did not work in Internet Explorer 9.
After a while, I found out coincidentally that it did work, but only when the F12 Developer Tools were opened.

The solution to this problem lies in the fact that the JavaScript console object, which is used for logging and provides methods like log and info, is available in Internet Explorer 9 only if the debugger is switched on.
So instead of just logging away, which throws Exceptions in this case, use the following code:

if (console && console.log)



Detecting Folders in HTML Drop Area

For our Filesharing product, we are currently building a modern HTML5 upload client. In the browsers that support it, we use Drag and Drop to accept files to upload. We only support Drag&Drop in Firefox, Chrome and Internet Explorer 10 because only those support other features we need for the full version of our app (like FileReader). Unfortunately, only Chrome supports the dropping of folders (since version 21 which has been released only two weeks ago). Chrome is also the only browser to support folder upload.

In Firefox, it is possible to drop folders in the drop area, but not to access them programmatically, which leads to the uploading of garbage. The same holds for older (< 21) versions of Chrome. Thus, we need a way to distinguish dropped folders from files.

$("#drop_zone").bind("drop", handleDrop);
// . . .
function handleDrop(evt) {

Using this (simplified) piece of code and inspecting the files array yields no solution:

The evt.dataTransfer.files array holds one File object for each dropped item, in my case a folder named “test1”. The size of the folder is, in this case, 0 (my experiments in Firefox showed 0, 4 and 16 KiB, I´m not sure where these differences are coming from) and the type is empty. Of course, there may be valid files whose size is zero or a multiple of 4 or whose type is empty (e. g. files without an extension). Nevertheless, I think that these two properties are a necessary, but insufficient condition for an item to be a folder (thanks to this stackoverflow discussion for the hint). To check for sure, I propose the following method for Firefox (I have introduced the 100 KiB file size limit to avoid performance problems):

if (!f.type && f.size%4096 == 0 && f.size <= 102400) {
    try {
        reader = new FileReader();
        //file is a directory

This makes use of Firefox´ disability to read the directory objects.

This disability does not exist in Google Chrome, i. e. Chrome is able to read these “Files” without throwing an Exception. Because of this, I have not yet found a way to detect dropped folders in Chrome < 21. Any help would be kindly appreciated. I do not want to do the check on the server because the user should get feedback immediately after dropping.

Making <audio> work

For the HTML game project I am currently working on, I needed to include background music in a loop which the user should be able to switch on or off.

There are several possibilities to include audio in HTML. I decided to try the <audio> element which was introduced in HTML 5 and should work in all newer browsers.

<audio id="bgmusic" preload="auto" loop autoplay>
    <source src="bgmusic.mp3" type="audio/mpeg" />
    <source src="bgmusic.ogg" type="audio/ogg" />

I will explain the attributes of the audio element later.

You should offer your sound files in mp3 and ogg format to support all major browsers. Include <source> tags in your <audio> in the order of preference, i. e. the browser will iterate through the list of sources and choose the first one it can use. When testing (all on Windows 7), I found that different browsers load different sound files:

  • Firefox 12: ogg
  • Internet Explorer 9: mp3
  • Chrome 18: mp3
  • Opera 11: ogg
  • Safari 5: does not work

Why does Safari not work? I found the answer in the Safari Developer Library, where it says: “Safari on iOS supports low-complexity AAC audio, MP3 audio, AIF audio, WAVE audio, and baseline profile MPEG-4 video. Safari on the desktop (Mac OS X and Windows) supports all media supported by the installed version of QuickTime, including any installed third-party codecs”. So the reason that the audio won´t play in Safari on my Windows is that I don´t have QuickTime installed. I did not find a workaround for this yet.

To handle browsers that do not support the audio element, just add fallback code after the sources, like this:

<audio id="bgmusic" preload="auto" loop autoplay>
    <source src="bgmusic.mp3" type="audio/mpeg" />
    <source src="bgmusic.ogg" type="audio/ogg" />
    Your browser does not support the audio element.

Interestingly, the fallback code is also executed by Safari if it cannot play any of the sources, although it says in the Safari Developer Library that “Browsers that understand the <audio> and <video> tags do not display fallback content, even if they cannot play any of the specified media”. Caution if you want to execute scripts in fallback mode: If you replace the text above by <script> code, it will be executed always, not only in fallback mode. To execute JavaScript code if the browser does not understand the <audio> element, you can use various HTML Feature Detection Techniques. To execute JavaScript code if no source could be loaded, check the networkState of theelement as described in the<audio> specification. Here´s an example:

function supports_audio() {
     return !!document.createElement('audio').load; //return true if the audio element has a method named load

 if (supports_audio())
     alert("Your browser supports audio.");
     alert("Your browser is not very cool.");

 var bgmusic = document.getElementById("bgmusic");
 if (bgmusic.networkState == bgmusic.NETWORK_NO_SOURCE)
     alert("Your browser does not like any of the audio sources.");

You´ll find a complete documentation for the <audio> element over at the W3C. The element supports the following HTML attributes (among others):

  • autoplay: the audio will be played immediately when loaded
  • preload: the browser can preload the entire file, only the metadata or nothing
  • controls: the browser can display controls or not
  • loop: the audio will be played in a loop

In the application I develop, the user can switch the background music on or off. This setting is then persisted on the server. When the application is loaded, I therefore check the setting and set the attributes accordingly.

 <audio id="bgmusic" preload="auto" loop autoplay> <!-- use this if music is switched on -->
<audio id="audio_theme" preload="none" loop> <!—use this if music is switched off -->

There is a JavaScript API that provides the useful methods play(), pause() and load() as well as interesting fields. I use this to turn the music on or off as soon as the user changes their settings.

 var bgmusic = document.getElementById("bgmusic");
if (bgmusic_on) {
    if (bgmusic .readyState < bgmusic.HAVE_CURRENT_DATA) //if HAVE_NOTHING or HAVE_METADATA
} else {

The usage of load() is necessary because I set preload to “none” above. I only want to load the music from the server if it has not been loaded yet, so I check the readyState property. Its possible values are HAVE_NOTHING = 0, HAVE_METADATA = 1, HAVE_CURRENT_DATA = 2, HAVE_FUTURE_DATA = 3 and HAVE_ENOUGH_DATA = 4.

Oracle: Using SQLPLUS and SQLLDR on databases without TNSNAMES entry

There are circumstances when you would like to connect to databases with tools like SQLPLUS or SQLLDR which are not registerred in TNSNAMES.ora.

For example when you have no local admin rights to change the TNSNAMES.ora or you want to connect to databases you only rarely need, or just when you want to test a connection.

It works quite straight forward, you just have to put the same data as in the TNSNAMES entry into the connection string, although its a bit different in SQLLDR and SQLPLUS – that all was done and tested under Windows, but should be very similar on any other OS with an Oracle client:

For SQLPLUS, you can do like that (for  example, executing “myscript.sql” on SID “MYDBSID” on database host “myDBHost”):


For SQLLDR, it’s quite the same, but you have to escape all quotes and brackets, so it looks a bit more ugly.
Importing mytable.ldr to SID “MYDBSID” on database host “myDBHost”:

sqlldr userid=username/password@\"\(DESCRIPTION=\(ADDRESS_LIST=\(ADDRESS=\(PROTOCOL=TCP\)\(HOST=myDBHost\)\(PORT= 1521\)\)\)\(CONNECT_DATA=\(SERVER=DEDICATED\)\(SID=MYDBSID\)\)\)\" Control='mytable.ldr' Log='mytable.log'

Mac OS X Lion – bad interpreter error message

When trying to deploy an Application to Google App Engine after an Upgrade from Snow Leopard to Lion using NetBeans, the deployment fails.

The problem lies in, it is not possible to execute due to permission denied:

-bash: ./ /bin/bash: bad interpreter: Operation not permitted

When doing some research, the problems lies in the fact that somehow the Lion update has put this file into “quarantine” mode, see

So we check if is in quarantine:

xattr -l * 0006;4fb76ac4;TextEdit;

The solution is simply to remove quarantine from all files in the directory:

xattr -dr .

And executing and deploying to App Engine is possible again 🙂

This quarantine mode is apparently some bug in MacOSX Lion, see also

Typo3 Website – Change Domain Name

A short tip for Typo3 newbies: When migrating an existing Typo3 site to another domain name, and the site still has all links and cached content pointing to the old domain, then you forgot to change the domain name in the template:

  • Login in the Typo3 backend (can for example be found under /typo3)
  • Go to Template – Home
  • Klick on Setup
  • Change config.baseURL (and all other occurences of the old domain name) from the old domain to the new one
  • Done, the changes should be effective immediately 🙂

PHP Security: Part 7


This is the last part of my series on PHP Security. Today´s topic is PHP / Server configuration.

To make your PHP server secure, you have to make three components safe: the web server, the PHP installation and the database server. We will concentrate on the PHP installation for now. When setting up a new server, one of the first questions you´ll come across will be: Unix or Windows? – In terms of PHP security, the answer should be Unix. This is mainly because many modules and extensions rely on the rights management and on functions that are not supported by Windows. Because of that, these modules and extensions will only work in a limited way on Apache servers running on Windows, let alone on IIS.

Keep your PHP up to date to be sure you always have the latest security fixes. Subscribe to a mailing list (see PHP Security: Part 1) to be notified when there´s a new version.

PHP implements some security mechanisms on its own, like open_basedir. The problem with that is that not all PHP extensions adhere to it. This is why you should use PHP extensions sparingly. Another PHP security mechanism that you will find in older sources is the Safe Mode. Please note that this feature has been removed as of PHP 5.4.0.

Let´s look at open_basedir more closely: This is a php.ini directive, using which you can limit the files that can be opened by PHP to the specified directory tree(s). You can set it either in the php.ini file or a virtual host block. You can specify multiple paths, separated by colons. Include the root of your virtual host and the location of the PEAR libraries, if needed. If you use multiple virtual hosts, it is recommended to set open_basedir for every virtual host separately. Notice that upload_tmp_dir should be below open_basedir, or else your PHP scripts won´t be able to accept uploaded files!

Some other config options you should take care of:

For additional security, consider using Suhosin (a set of PHP patches and extensions), modsecurity
(a web application firewall) or PHPIDS (an intrusion detection system).

Now, before I leave, let me make clear that I gave you only a brief introduction to PHP security. For additional information, I encourage every PHP developer to do the following things:

Constant Vigilance!