Dojo Toolkit：如何转义 HTML 字符串？答案

【问题标题】：Dojo Toolkit: how to escape an HTML string?Dojo Toolkit：如何转义 HTML 字符串？
【发布时间】：2012-04-11 19:31:36
【问题描述】：

我的 HTML 5 应用程序的用户可以在表单中输入他的姓名，该姓名将显示在其他地方。更具体地说，它将成为某个 HTML 元素的innerHTML。

问题在于，如果您在表单中输入有效的 HTML 标记，即某种 HTML 注入（如果您愿意的话），这可能会被利用。

用户的名字只是在客户端存储和显示，所以最终只有用户自己受到影响，但还是比较马虎。

在我将字符串放入 Dojo 中的元素 innerHTML 之前，有没有办法对其进行转义？我猜 Dojo 在某一时刻确实有这样的功能 (dojo.string.escape()) 但它在 1.7 版本中不存在。

谢谢。

【问题讨论】：

标签： javascript dojo escaping innerhtml

【解决方案1】：

dojox.html.entities.encode(myString);

【讨论】：

工作就像一个魅力，我不必重新发明轮子。谢谢！

【解决方案2】：

Dojo 具有用于 HTML 转义的模块 dojox/html/entities。不幸的是，the official documentation 仍然只提供 1.7 之前的非 AMD 示例。

这是一个如何在 AMD 中使用该模块的示例：

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

输出：

&lt;strong&gt;some text&lt;/strong&gt;

【讨论】：

【解决方案3】：

从 Dojo 1.10 开始，转义函数仍然是字符串模块的一部分。

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

以下是如何将其用作简单模板系统的方法。

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
    );
});

【讨论】：

【解决方案4】：

我试图找出其他库是如何实现这个功能的，我从 MooTools 中借鉴了以下想法：

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

所以根据 MooTools 有可以转义 HTML 的 innerText 或 textContent 属性。

【讨论】：

【解决方案5】：

查看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, "&amp;").
        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>"]
  );
});

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

【讨论】：