Use of protobufjs breaks Content Security Policy because of eval usage

[schontz]

Describe the bug
Deploying the Chime SDK on a site that uses Content Security Policy (CSP) headers causes issues because of this protobufjs bug: protobufjs/protobuf.js#997

Chrome issues tab displays the following:

The Content Security Policy (CSP) prevents the evaluation of arbitrary strings as JavaScript to make it more difficult for an attacker to inject unathorized code on your site.

To solve this issue, avoid using eval(), new Function(), setTimeout([string], ...) and setInterval([string], ...) for evaluating strings.

If you absolutely must: you can enable string evaluation by adding unsafe-eval as an allowed source in a script-src directive.

Someone references https://github.com/mapbox/pbf as an alternative in the cited issue. I hope an alternative can be found, as the bug is old and likely won't be fixed.

[richnew10]

The usual fix for this is in a Webpack config (or similar):

{
        test: /\.(js)$/,
        use: [
          {
            loader: 'string-replace-loader',
            options: {
              multiple: [{
                search: /eval.*\(moduleName\);/g,
                replace: 'undefined;',
              }],
            },
          },
…
        ],
        include: [
          path.join(srcDir, 'node_modules/amazon-chime-sdk-js'),
          path.join(srcDir, 'node_modules/@protobufjs/inquire'),
        ],
      }

I could have sworn that the SDK already included this fix, but apparently I'm misremembering.

[nolanlawson]

Just to circle back on this, this can still be reproduced in the latest version of amazon-chime-sdk-js (2.15.0). Here is a minimal repro on the command line:

mkdir tmp
cd tmp
npm init --yes
npm install amazon-chime-sdk-js@2.16.0 webpack-cli@4.8.0
echo "import 'amazon-chime-sdk-js'" > src.js
npx webpack
grep eval dist/main.js # eval is in the bundle

The eval() comes from @protobufjs/inquire.