Unable to avoid unsafe-eval in Flutter web

[wenchonglee]

Description

In my Flutter web deployment, I have to add unsafe-eval to CSP.
This is despite the FAQ section saying otherwise. (which I presume is for rive-web)

Reproduction

I created a simple project and deployed it here: https://unsafe-eval.pages.dev/
You should be able to open dev tools and see the following error:

The project is created with flutter create and adding rive, along with the simple code:

import 'package:flutter/material.dart';
import 'package:rive/rive.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        body: Column(
          children: [
            Text('Demo'),
            SizedBox.square(
              dimension: 500,
              child: RiveAnimation.network(
                'https://cdn.rive.app/animations/vehicles.riv',
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Along with the inline CSP in index.html:

<meta http-equiv="Content-Security-Policy"
    content="script-src 'self' 'wasm-unsafe-eval' 'unsafe-inline' www.gstatic.com cdn.jsdelivr.net">

I may have missed something here but is there a workaround to avoid adding unsafe-eval?

Versions

• Flutter version 3.29.2
• Rive version 0.13.20

[HayesGordon]

@wenchonglee there is a difference between adding unsafe-eval and wasm-unsafe-eval

I'll include some information that is a summary of an internal conversation. Unfortunately, this is a browser requirement.

Essay below:

---

WASM isn’t insecure; it’s just a binary format for code that can be run in some sort of virtual machine (e.g., a browser). The core of the Rive runtime for web (and Flutter web) is compiled into WASM, allowing us to be performant while maintaining a single C++ code base for our core.

A Content Security Policy (CSP) is an optional HTTP header returned in your HTML that can restrict where resources (e.g., images, script files, etc.) are pulled from and what can execute. With a CSP, there is a list of “directives” that control how and where specific resources can be loaded. A directive often enforced by security teams is the script-src directive, which dictates how JavaScript can run.

Now, a feature of JavaScript is the eval() function (and some other similar functions). This introduces security concerns.

Adding unsafe-eval to your CSP in the script-src directive allows eval to run. Not having it prevents eval.

When WASM was first introduced, it was treated the same as eval, and its execution was blocked unless you had unsafe-eval in your CSP.

So, to run WASM, you expose yourself to the risk of having eval in your code.

This has now been fixed with wasm-unsafe-eval, which allows only WASM modules to be loaded, decoupling WASM from eval.

This was only introduced recently (2022), and from looking here: https://caniuse.com/mdn-http_headers_content-security-policy_script-src_wasm-unsafe-eval, we can see Safari 16 is the earliest version of Safari that allows it. The latest version of Safari on iOS 14 is 14.1 (according to google gemini).

wasm-unsafe-eval, shouldn't be flagged as a security risk. And it is required to use the Rive runtime in the web.

Note that you can also restrict where resources are loaded via the connect-src directive.

Technically, we could compile our Rive runtime to be all JS, but it would be slow. This is maybe something we can investigate, or provide as an option for users to manually build.

But note, that Flutter is now also supporting WASM builds and moving in that direction, which means if you're building your Flutter web app with --wasm then you will need to opt into the above regardless of Rive.

I'm closing this issue, but if there is a case to be made to support Rive Flutter building for JS then we can look into adding that as a flag when users build manually.

[wenchonglee]

@HayesGordon

Thanks for the response, but I'm aware wasm-unsafe-eval is fine, and I'm not suggesting otherwise.
In the demo I prepared, you should be able to see that wasm-unsafe-eval is in the header but still errors out. I'd need to add unsafe-eval for it to run properly. This is specific to a flutter compiled web app and not the rive js library.

If there is something I'm missing or is not reproducible, I'd be very thankful if you could point it out!