If I try to use Raphael to draw a path in the default_popup page for my Chrome extension:

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

I get the following error:

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:".

I understand the need to disallow eval() and things like that, but why is this "evaluating a string as JavaScript"? Is there any alternative way to generate the path without the path string besides setting an unsafe security policy that would also wind up allowing eval()?

If I try to use Raphael to draw a path in the default_popup page for my Chrome extension:

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

I get the following error:

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:".

I understand the need to disallow eval() and things like that, but why is this "evaluating a string as JavaScript"? Is there any alternative way to generate the path without the path string besides setting an unsafe security policy that would also wind up allowing eval()?

• javascript
• google-chrome-extension
• svg
• raphael

3 Answers 3

In order to use eval() in your extension add the following line in your manifest.json (I assume that you're using manifest v2)

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

As you might guess the directive 'unsafe-eval' does the trick.

Sergii's solution is working. However, it's not recommended to do this, since it makes your extension vulnerable to XSS attacks.

You should use sandboxing instead: http://developer.chrome.com/apps/sandboxingEval.html

If you check this simple example.

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

The above code does violate CSP, because I am executing the callback function in the setTimeout() definition, setTimeout() receives the result of callback(true) instead of the callback itself. That would then require an eval and thus triggering the Chrome security policy.

In similar lines i tried looking at source code of Raphel path, but i am not in a good direction, i assume some where this sort of code must have been involved.

In chrome extensions, there is no way to surpass Eval CSP, i suggest to use another workaround or use pure SVG methods.