0

I am creating an app which refers to Desmos graphical calculator api script. I have imported the script in my quip app directory. When I build my app and import it in my quip document it fails to load and spits this error:

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 https://quip-cdn.com 'self'"

I tried adding 'self', 'unsafe-inline' and 'unsafe-eval' options in script_srcs but with no avail. Here are some of the options I tried in the manifest file:

 "csp_sources": {
    "script_srcs":[ "'self' 'unsafe-inline' 'unsafe-eval' https://quip-cdn.com/"]
 }

without url

"csp_sources": {
        "script_srcs":[ "'self' 'unsafe-inline' 'unsafe-eval'"]
     }

separate keywords

 "csp_sources": {
    "script_srcs":[ "'self'", "'unsafe-inline'","'unsafe-eval'"]
 }

All these options in manifest file work during build process; however when I try to upload them on the quip liveapp console it errors out with:

The package has an invalid value for script_srcs:

How to include unsafe-eval option in quip live apps? I am new to Quip liveapp development and would appreciate any help to make it work.

1 Answer 1

2

I've been dealing with this for a while. It's annoying and I've had to do some massaging in order to get everything working properly. For the record, I am using VueJS for my live apps, which adds some complications. That said, I've found I've had problems when importing modules. Codewise, it comes down to webpack and babel messing things up. In my app.js, there are two code blocks that generate CSP problems.

try {
        // This works if eval is allowed (see CSP)
        g = g || Function("return this")() || (1, eval)("this");
} catch (e) {
        // This works if the window reference is available
        if ((typeof window === "undefined" ? "undefined" : _typeof(window)) === "object") g = window;
}

(from webpack)

and

// In sloppy mode, unbound `this` refers to the global object, fallback to
// Function constructor if we're in global strict mode. That is sadly a form
// of indirect eval which violates Content Security Policy.
function () {
  return this;
}() || Function("return this")());

(from regenerator-runtime)

You should be able to see this if you build your application in a "development" build. To do this, create a new script in package.json:

"build-dev": "NODE_ENV=development webpack; create-quip-app pack ./app"

and run it. This will prevent uglification but it makes a much larger app.js. You should be able to find those two code blocks in the file.

The exact problem code is: Function("return this") and (1, eval)("this") and the generated code basically tells you this :(

You can disable the first code block completely by adding this to webpack.config.js:

module.exports.node = {
  global: false,
}

The second one is harder. I haven't found a configuration solution to fix this, so I've been going in by hand and replacing it:

// In sloppy mode, unbound `this` refers to the global object, fallback to
// Function constructor if we're in global strict mode. That is sadly a form
// of indirect eval which violates Content Security Policy.
function () {
  return this;
}() || window);

There are some caveats to keep in mind: if your code is being executed in both a browser and in node, then it'll break a bit. This has not been a problem for me, though.

You may be able to find more information in the projects' github repos.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .