Does not work with strict Content Security Policy (CSP) that blocks unsafe-eval (new Function)

[localpcguy]

Description

An error is thrown if used in an environment where a CSP does not allow 'unsafe-eval' due to the use of new Function in the createNamedFunction method currently at line 693 of the published rive.lean.js file.

function createNamedFunction(name, body) {
  name = makeLegalFunctionName(name);
  return new Function("body", "return function " + name + "() {\n" + '    "use strict";' + "    return body.apply(this, arguments);\n" + "};\n")(body);
}

The error looks like this (will be slightly different depending on your CSP and the browser viewed in:

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' ... ;"

Provide a Repro

This should be fairly simple to repro by adding the following CSP in the file that the Rive script is being used in (assuming the Rive script is self hosted, but update localhost to be the domain where the rive script is loaded from to allow it if not.)

<meta http-equiv="Content-Security-Policy" content="default-src 'none'; script-src 'self' localhost; connect-src: data:;"

Source .riv/.rev file

Individual RIV file is not relevant to this issue

Expected behavior

Expected that the Rive scripts do not try to use eval or new Function and work as expected without errors when used in an environment with a strict CSP that blocks the use of 'unsafe-eval'.

Browser & Versions (please complete the following information)

Any browser that parses and reads Content Security Policies (any modern browser including Chromium based browsers, Firefox and Safari).

[darkshredder]

I'm facing the same issue. Any updates on this? @luigi-rosso

[localpcguy]

I have not seen an update to date. I'd be interested in at least taking a look or even stab at fixing it if someone would be able to point me to the actual source files that are compiled/transpiled into the code shown above.

[zplata]

This is coming from generated code from the enscriptem library that compiles our underlying web assembly and JS-binding "glue" code.

Seems to be a popular issue, as seen here. You might have luck with wasm-unsafe-eval, but also, hoping to track this PR which attempts to remove the new Function code that is also problematic with CSP settings if you don't have unsafe-eval.

[localpcguy]

Thanks for the update and links to monitor this. The PR looks promising, and I'll try with wasm-unsafe-eval in the meantime. I'd like to keep this open until we can confirm a fix.

[zplata]

Hey @localpcguy , we updated this runtime in @rive-app/canvas - v1.0.85 to have a newer WASM build where you can use wasm-unsafe-eval in your CSP settings instead of unsafe-eval; no need to wait for that one specific PR on Emscripten's side to merge.

[localpcguy]

Sorry it took so long to get back to this - confirmed that using wasm-unsafe-eval does indeed allow eliminating unsafe-eval if the only reason for it was for wasm support. I wasn't able to run without the wasm-unsafe-eval in the CSP, but I believe that is to be expected. Closing, figure if someone wants to have wasm-unsafe-eval removed, that can be a different issue, but feel free to reopen if there's any disagreement.