Dojo Toolkit: how to escape an HTML string?

Question

A user of my HTML 5 application can enter his name in a form, and this name will be displayed elsewhere. More specifically, it will become the innerHTML of some HTML element.

The problem is that this can be exploited if one enters valid HTML markup in the form, i.e. some sort of HTML injection, if you will.

The user's name is only stored and displayed on the client side so in the end the user himself is the only one who is affected, but it's still sloppy.

Is there a way to escape a string before I put it in an elements innerHTML in Dojo? I guess that Dojo at one point did in fact have such a function (dojo.string.escape()) but it doesn't exist in version 1.7.

Thanks.

Pallet

Answer 1

dojox.html.entities.encode(myString);

Erikerika

Works like a charm and I don't have to reinvent the wheel. Thanks! – Pallet

Answer 2

Dojo has the module dojox/html/entities for HTML escaping. Unfortunately, the official documentation still provides only pre-1.7, non-AMD example.

Here is an example how to use that module with AMD:

var str = "<strong>some text</strong>"
require(['dojox/html/entities'], function(entities) {
 var escaped = entities.encode(str)
 console.log(escaped)
})

Output:

<strong>some text</strong>

Senegambia

Answer 3

As of Dojo 1.10, the escape function is still part of the string module.

http://dojotoolkit.org/api/?qs=1.10/dojo/string

Here's how you can use it as a simple template system.

require([
    'dojo/string'
], function(
    string
){
    var template = '<h1>${title}</h1>';
    var message = {title: 'Hello World!<script>alert("Doing something naughty here...")</script>'}
    var html = string.substitute(
        template
        , message
        , string.escape
    );
});

Longer

Answer 4

Check this example of dojo.replace:

require(["dojo/_base/lang"], function(lang){
  function safeReplace(tmpl, dict){
    // convert dict to a function, if needed
    var fn = lang.isFunction(dict) ? dict : function(_, name){
      return lang.getObject(name, false, dict);
    };
    // perform the substitution
    return lang.replace(tmpl, function(_, name){
      if(name.charAt(0) == '!'){
        // no escaping
        return fn(_, name.slice(1));
      }
      // escape
      return fn(_, name).
        replace(/&/g, "&").
        replace(/</g, "&lt;").
        replace(/>/g, "&gt;").
        replace(/"/g, "&quot;");
    });
  }
  // that is how we use it:
  var output = safeReplace("<div>{0}</div",
    ["<script>alert('Let\' break stuff!');</script>"]
  );
});

Source: http://dojotoolkit.org/reference-guide/1.7/dojo/replace.html#escaping-substitutions

Selfgovernment

Answer 5

I tried to find out how other libraries implement this function and I stole the idea of the following from MooTools:

var property = (document.createElement('div').textContent == null) ? 'innerText': 'textContent';
elem[property] = "<" + "script" + ">" + "alert('a');" + "</" + "script" + ">";

So according to MooTools there is either the innerText or the textContent property which can escape HTML.

Angelita