Creative Juices Bo. Co.

Incorrectly Blaming TinyMCE for My InvalidTag Problems

My entire morning was wasted on a perplexing little problem I was having trying to get TinyMCE to embed YouTube videos for one of my clients. I must have tried a gazillion different little hacks, mods and anything I could think of, but each time I hit the submit button, it seems as if the <object> and <embed> tags were being converted to <InvalidTag>. No matter what settings I used in the TinyMCE init script, it still was converting these tags. Guess what? It wasn't TinyMCE at all. It was ColdFusion all along! Go figure.

My client is on a shared hosting plan and I guess one of the options in the ColdFusion admin is to turn on a little security feature called "Enable Global Script Protection". Well, as it turns out, this converts these tags to <InvalidTag>. So, if your running into this issue (and maybe this is something that goes on with other server technologies besides ColdFusion), double-check to make sure that the tags aren't being converted server-side.

Since my client was on a shared hosting plan, there wasn't much I could do to get them to turn of the script protection setting. What I wound up doing is adding an onSubmit event to tinyMCE.init(). This in turn calls a function that does a little tag substitution prior to submitting it to the server. This is what I'm using:

tinyMCE.init({
   ... all my other settings ...
   setup : function(ed) {
      ed.onSubmit.add(function(ed, e) {
         doCleanTinyMCECleanUp(e.target);
      });
   }
});

Then I had to create the doCleanTinyMCECleanUp function. All I did here, was swap out the <object> and <embed> tags with something I could search and replace easily on the server side... You can change this to whatever you want, but I just added a simple little prefix before the tag name, like so:

function doCleanTinyMCECleanUp(frm) {
   frm.MY_FIELD_NAME.value = frm.MY_FIELD_NAME.value.replace("<object","<XXX_OBJECT");
   frm.MY_FIELD_NAME.value = frm.MY_FIELD_NAME.value.replace("<embed","<XXX_EMBED");
}

Once the form was submitted to my ColdFusion script, all I had to do is change the fake tags back to their correct names, like so:

<cfset form.MY_FIELD_NAME = ReplaceNoCase(form.MY_FIELD_NAME,"<XXX_OBJECT","<object","ALL") />
<cfset form.MY_FIELD_NAME = ReplaceNoCase(form.MY_FIELD_NAME,"<XXX_EMBED","<embed","ALL") />

As of this writing, I'm not sure exactly all of the tags that this ColdFusion setting changes, but at least using this simple little method, I can be prepared to add them easily as more are discovered.

Hope this helps anyone else having this issue, this one was another doozy!

UPDATE: It looks like ColdFusion's cross script protection changes these tags: object, embed, script, applet and meta.