禁用unsafe-eval的CSP环境下Dojo parser使用new Function()报错

问题原因 #

使用Dojo v1.17.3且启用禁用unsafe-eval的内容安全策略（CSP）时，直接在DOM标签上定义onClick='myFunction()'属性会触发解析错误。这是因为Dojo解析这种字符串形式的事件属性时，会内部使用eval执行字符串中的代码，而你的CSP策略禁止了unsafe-eval，因此报错：

error EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed

解决方案 #

需要避免使用DOM属性式的事件绑定，改用以下两种符合CSP要求的方式：

方式1：编程式绑定事件 #

通过Dojo API获取MenuItem实例后，直接绑定事件函数：

require(['dijit/registry', 'dojo/on'], function(registry, on) {
    // 获取MenuItem实例
    var menuItem = registry.byId('tooltipID');
    // 绑定click事件
    on(menuItem, 'click', myFunction);
});

方式2：声明式使用data-dojo-props绑定 #

修改DOM标签，用data-dojo-props直接传递函数引用，而非字符串：

<div data-dojo-type='dijit.MenuItem' class='tooltip' id='tooltipID' disabled='true' name='tooltip' data-dojo-props="onClick: myFunction"></div>

这两种方式都是直接关联函数引用，不会触发eval操作，完全适配禁用unsafe-eval的CSP策略。

内容的提问来源于stack exchange，提问作者Shiva