aws-amplify-angular cannot be used with strict Content Security Policy

[matulef]

Describe the bug
When using the AmplifyService from aws-amplify-angular, a reasonable Content Security Policy cannot be used without causing an error. This is because the aws-lex-audio.js file requires unsafe-eval (and worker-src blob:) permissions.

To Reproduce
Steps to reproduce the behavior:

1. Create a new angular app:

ng new csp-test
cd csp-test

2. Add AmplifyAngularModule, AmplifyService, AmplifyModules as described in
   https://aws-amplify.github.io/docs/js/angular. I am only using Auth, so in my app.module.ts file I have

{
      provide: AmplifyService,
      useFactory: () => {
        return AmplifyModules({
          Auth,
        })
      },
    },

2. In index.html, add a CSP:

 <meta http-equiv="Content-Security-Policy" content="script-src 'self'; object-src 'self'"/>

3. Start the app with ng serve
4. See the following error in the console:

Expected behavior
This should not require unsafe-eval permissions, especially since the Lex audio stuff isn't even being used. The error can be avoided with a loose content security policy, e.g.
worker-src blob:; script-src 'self' 'unsafe-eval'; object-src 'self'
but unsafe-eval is strongly discouraged for security reasons.

Note that this issue also applies when building the app to run as a Chrome extension, where the content security policy is defined inside of the manifest.json file.

Environment

   System:
    OS: macOS 10.15.3
    CPU: (8) x64 Intel(R) Core(TM) i7-8559U CPU @ 2.70GHz
    Memory: 132.70 MB / 16.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 10.14.2 - ~/.nvm/versions/node/v10.14.2/bin/node
    Yarn: 1.12.3 - ~/.nvm/versions/node/v10.14.2/bin/yarn
    npm: 6.5.0 - ~/.nvm/versions/node/v10.14.2/bin/npm
  Browsers:
    Chrome: 80.0.3987.122
    Firefox: 71.0
    Safari: 13.0.5
  npmPackages:
    @angular-devkit/build-angular: ~0.803.25 => 0.803.25
    @angular/animations: ~8.2.14 => 8.2.14
    @angular/cli: ~8.3.25 => 8.3.25
    @angular/common: ~8.2.14 => 8.2.14
    @angular/compiler: ~8.2.14 => 8.2.14
    @angular/compiler-cli: ~8.2.14 => 8.2.14
    @angular/core: ~8.2.14 => 8.2.14
    @angular/forms: ~8.2.14 => 8.2.14
    @angular/language-service: ~8.2.14 => 8.2.14
    @angular/platform-browser: ~8.2.14 => 8.2.14
    @angular/platform-browser-dynamic: ~8.2.14 => 8.2.14
    @angular/router: ~8.2.14 => 8.2.14
    @types/jasmine: ~3.3.8 => 3.3.16
    @types/jasminewd2: ~2.0.3 => 2.0.8
    @types/node: ~8.9.4 => 8.9.5
    aws-amplify: ^2.2.6 => 2.2.6
    aws-amplify-angular: ^4.1.7 => 4.1.7
    codelyzer: ^5.0.0 => 5.2.1
    jasmine-core: ~3.4.0 => 3.4.0
    jasmine-spec-reporter: ~4.2.1 => 4.2.1
    karma: ~4.1.0 => 4.1.0
    karma-chrome-launcher: ~2.2.0 => 2.2.0
    karma-coverage-istanbul-reporter: ~2.0.1 => 2.0.6
    karma-jasmine: ~2.0.1 => 2.0.1
    karma-jasmine-html-reporter: ^1.4.0 => 1.5.2
    protractor: ~5.4.0 => 5.4.3
    rxjs: ~6.4.0 => 6.4.0
    ts-node: ~7.0.0 => 7.0.1
    tslib: ^1.10.0 => 1.11.1
    tslint: ~5.15.0 => 5.15.0
    typescript: ~3.5.3 => 3.5.3
    zone.js: ~0.9.1 => 0.9.1
  npmGlobalPackages:
    @angular/cli: 8.3.25
    @aws-amplify/cli: 4.13.1
    apollo-codegen: 0.20.2
    apollo: 2.17.2
    cordova: 8.1.2
    gulp-cli: 2.0.1
    http-server: 0.11.1
    ionic: 4.6.0
    lumber-cli: 1.14.3
    lunr: 2.3.5
    npm: 6.5.0
    prettier: 1.15.3
    yarn: 1.12.3

Additional context

These appear to be the offending line(s):

amplify-js/packages/aws-amplify-angular/src/components/interactions/chatbot/aws-lex-audio.js

Line 597 in 8f6acca

Function(

amplify-js/packages/aws-amplify-angular/src/components/interactions/chatbot/aws-lex-audio.js

Line 588 in 8f6acca

Function(['require', 'module', 'exports'], '(' + fn + ')(self)'),

[jonasduever]

Just experienced this issue. Have to use unsafe-eval + worker-src blob: for now :/

[matulef]

@jonasduever , a word of warning: if you're planning to release your app on some sort of app store, I'd advise against including unsafe-eval. I strongly suspect this lax CSP was the reason for a 3+ week delay we had getting a Chrome extension approved in the Chrome store (it's still stuck in reviewing limbo, even though we only intended to release that version of the app internally for testing).

Ultimately, we ended up ripping out Cognito/Amplify Auth and replacing it with Firebase Auth instead. We've been happy with that, but I realize it's not a good solution if you're relying on other parts of the Amplify library.

[wlee221]

Hello @matulef and @jonasduever, sorry about the delay. We just released a new chatbot ui component that fixes this issue.
It will take some time to get through the pipeline, but I'll update you as soon as it's released.

Please see the documentation for getting started, and feel free to ask any questions or give feedbacks.

[github-actions]

This issue has been automatically locked since there hasn't been any recent activity after it was closed. Please open a new issue for related bugs.

Looking for a help forum? We recommend joining the Amplify Community Discord server *-help channels or Discussions for those types of questions.