由于安全策略，无法使用Raphael JS在Chrome扩展弹出窗口中绘制路径？

Question

如果我尝试使用拉斐尔在default_popup页面中为我的Chrome扩展绘制一个路径：

r.path("M0,0L10,10");

我得到以下错误：

Uncaught EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self' chrome-extension-resource:".

我理解禁止eval()之类的东西的必要性，但是为什么要“将字符串求值为JavaScript”呢？除了设置一个不安全的安全策略，最终也允许eval()之外，有没有其他方法来生成不带路径字符串的路径？

Answer 1

为了在您的扩展中使用eval()，在您的manifest.json中添加以下行(我假设您使用的是清单v2)

"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"

正如您可能猜到的那样，指令'unsafe-eval‘可以做到这一点。

Answer 2

Sergii的解决方案正在发挥作用。但是，不建议这样做，因为这会使您的扩展容易受到XSS攻击。

你应该改用沙箱：http://developer.chrome.com/apps/sandboxingEval.html

Answer 3

如果你检查这个简单的例子。

function (params, callback) {
    setTimeout(function () {
        callback(true)
    }, 1000); // CSP
};

上面的代码确实违反了CSP，因为我正在执行setTimeout()定义中的回调函数，所以setTimeout()接收的是callback(true)的结果，而不是回调本身。这将需要一个评估，从而触发Chrome安全策略。

在类似的代码行中，我试图查看Raphel path的源代码，但我不是在一个好的方向上，我假设这类代码一定涉及到一些地方。

在chrome扩展中，没有办法超越Eval CSP，我建议使用另一种变通方法或使用纯SVG方法。