Question

There seems to be a bug when using the JavaScript functions encodeURI / escape and encodeURIComponent. Example:

escape( 'The Frames' )             // The            0.000000rames
encodeURI( 'The Frames' )          // The            0.000000rames
encodeURIComponent( 'The Frames' ) // The            0.000000rames

The comments show the output. Executing this code outside of Spotify in whatever browser works as expected (replacing a space by either + or %20).

Can others confirm this is a bug? Or am I doing something wrong here…? Is there a place to report bugs for Spotify Apps?

EDIT: Apparently the examples above work as they are supposed to. However, incorporating them in an alert() will show a messed up string, while in fact it is OK.

Answer 1

From the guidelines:

Encoded Strings

To ensure that applications do not use strings in potentially unsafe ways, all strings given by the Spotify APIs are encoded so that accidental misuse will not cause injection vulnerabilities. If the application does not decode these strings, using the two methods described below, the strings will display as garbage to the user. The only exception to this is URIs, which are never encoded and thus require no decoding. The API documentation states for each method which strings must be decoded or not.
Two methods have been added to the JavaScript strings: decodeForText() and decodeForHTML(). If the string is intended to be used in a safe manner, such as setting the innerText or creating a text node using document.createTextNode(), the decodeForText() should be used. It will return a raw non-escaped string, so make sure it is never inserted into any context where will be interpreted as HTML. If the string is inteded to go into an innerHTML or in any piece of code that will be intepreted as HTML, the decodeForHTML() must be used. It will ensure that < and > is encoded as < and > etc. For example:


getElementById('song-title').innerHTML = track.title.decodeForHTML();
getElementById('song-title').innerText = track.title.decodeForText();
getElementById('song-title').appendChild(document.createTextNode(track.title.decodeForText()));


Applications that do not use these methods will a) not be able to display metadata or any other data from the Spotify API, and b) will be rejected in the upload process. Also ensure that you propery escape unsafe HTML strings from wherever they happen to come from, e.g., your backend servers.

---

And the source code, in case you’re curious:

String.prototype.decodeForText = function() {
    var result = "";
    for (var i = 0; i < this.length; ++i) {
        if (this.charAt(i) !== "&") {
            result += this.charAt(i);
            continue;
        } else if (this.substring(i, i + 5) === "&amp;") {
            result += "&";
            i += 4;
            continue;
        } else if (this.substring(i, i + 4) === "&lt;") {
            result += "<";
            i += 3;
            continue;
        } else if (this.substring(i, i + 4) === "&gt;") {
            result += ">";
            i += 3;
            continue;
        } else if (this.substring(i, i + 6) === "&quot;") {
            result += "\"";
            i += 5;
            continue;
        } else if (this.substring(i, i + 6) === "&apos;") {
            result += "'";
            i += 5;
            continue;
        } else if (this.substring(i, i + 8) === "&equals;") {
            result += "=";
            i += 7;
            continue;
        }
    }
    return result;
};

String.prototype.decodeForHTML = function() {
    return this;
};

String.prototype.decodeForLink = function() {
    return encodeURI(this.decodeForText());
}

String.prototype.encodeToHTML = function() {
    var result = "";
    for (var i = 0; i < this.length; ++i) {
        if (this.charAt(i) === "&") {
            result += "&amp;";
        } else if (this.charAt(i) === "<") {
            result += "&lt;";
        } else if (this.charAt(i) === ">") {
            result += "&gt;";
        } else if (this.charAt(i) === "\"") {
            result += "&quot;";
        } else if (this.charAt(i) === "'") {
            result += "&apos;";
        } else if (this.charAt(i) === "=") {
            result += "&equals;";
        } else {
            result += this.charAt(i);
        }
    }
    return result;
}
}(this));