Post-Theory

Part 3 in my series on “Tumblr Theme Limitations”

AKA, Why Tumblr’s Theme Template System is Incredibly Lame,
and Hacks You Can Use to Get Around Its Limitations & Lameness

Introduction

In my previous Article, I pondered whether or not URL’s supplied by Tumblr’s Theme Templater were in general safe to include directly in JavaScript strings: i.e., that they had at least been properly Escaped for inclusion inside a Double (or single) quoted String.

I decided that, No: Tumblr is lame. So I should not assume that:

1. URL’s have been properly escaped for inclusion in Strings
   
   
2. URL’s have been properly URL Encoded to replace URL-unsafe characters

But at least there is the {JS…} Variable Transform, which does seem to function properly — so far as I can tell. And it’s useful too — we’ll get to that more in this article.

The Question

This led me to wonder if in general, URL’s supplied by Tumblr’s Theme Templater were even safe to include directly in your HTML — e.g.

<a href="{SomeURLVariable}"> ... 

The Question: Answered

The Answer is NO: You cannot assume that Every URL that Tumblr passes you is Safe to include in your HTML.

Case Study: {LinkURL}

{LinkURL} is the “Click-through Link” rendered in Photo Posts. I also discussed this very same variable last time

Let us suppose that somebody enters a rather naughty “Click-through” URL:

http: //naughty.urls/break” onclick=”javascript: alert(‘Tumblr is lame!’); return false;

Now, you being the good Theme Developer you are, write your Theme Code like this:

<a href="{LinkURL}"><img .... ></a>

Looks fine, right? Wrong. This is what actually gets rendered on the page:

<a href=”http://naughty.urls/break” onclick=”javascript: alert(‘Tumblr is lame’)”><img …. ></a>

Well - you can guess what happens when someone clicks that Image!

Go see for yourself on this page. Really, go try it. There are two examples. One contains a “naughty” URL, and the other a “nice” URL which just happens to include a “ character in it.

The (hacky) JavaScript Solution

Since I’ve already established that the {JS…} Variable Transformation seems to function properly, I’m going to solve this problem with some hacky JavaScript. Once again.

For the sake of brevity, let’s just assume that {LinkURL} exists — I already showed you how to handle those cases when it does not.

And here’s the basic code:

{block:Photo}
    <script>
        document.write('<a href="' + encodeURI( {JSLinkURL} ) + '">');
    </script>
    <img src="{PhotoURL-500}">
    </a>
    ...
{/block:Photo}

Wrapping {JSLinkURL} with the encodeURI JavaScript function makes sure that the link is actually safe to include inside the href=”…”.

You can see now, on this new page, the results.  The “naughty” URL no longer does anything bad, and the “nice” URL works properly.

If {LinkURL} is broken, then what else is Broken?

Honestly, I don’t know yet. I haven’t tried to test every single type of {URL} Variable on Tumblr’s Theme Templater.

Here are things I know think are OK:

1. In {block:ContentSource} Blocks, the {SourceURL} seems to be OK.

2. URLs to pages in your own blog [eg, {Permalink} ] all seem to be OK.

Things I have observed to be broken in the same way as {LinkURL}:

1. Links to a User’s own “Pages”:

   Inside the {block:HasPages} and then {block:Pages}, the {URL} variable is not properly escaped / URL encoded

   What could happen is a user sets up one of their pages with a URL like:

   htp://my-blog.tumblr.com/”About Me”

   That will break, if you try to include the {URL} directly in your HTML.

As I find more bugs, I will update this post to let you know!