DojoToolkit:如何转义HTML字符串

Dojo Toolkit: how to escape an HTML string?

本文关键字：转义 HTML 字符串何转义 DojoToolkit 更新时间：2023-09-26

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

问题是，如果在表单中输入有效的HTML标记，即某种HTML注入（如果愿意的话），就会利用这一点。

用户名只存储并显示在客户端，所以最终用户自己是唯一受到影响的人，但这仍然很草率。

在将字符串放入Dojo中的元素innerHTML之前，有没有一种方法可以对其进行转义？我猜想Dojo在某一点上确实有这样一个函数（dojo.string.escape()），但它在1.7版本中并不存在。

谢谢。

dojox.html.entities.encode(myString);

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

以下是如何将该模块与AMD一起使用的示例：

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

输出：

<strong>some text</strong>

从Dojo1.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
    );
});

我试图了解其他库是如何实现这个功能的，我从MooTools那里窃取了以下想法：

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

因此，根据MooTools的说法，有innerText或textContent属性可以转义HTML。

检查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-替换