Remove eval and Function from build to support strict CSP

[saulshanabrook]

Bug Report or Feature Request (mark with an x)

- [ ] bug report -> please search issues before submitting
- [x] feature request

Versions.

@angular/cli: 1.2.0
node: 8.1.0
os: darwin x64
@angular/animations: 4.2.5
@angular/common: 4.2.5
@angular/compiler: 4.2.5
@angular/core: 4.2.5
@angular/forms: 4.2.5
@angular/http: 4.2.5
@angular/platform-browser: 4.2.5
@angular/platform-browser-dynamic: 4.2.5
@angular/router: 4.2.5
@angular/cli: 1.2.0
@angular/compiler-cli: 4.2.5
@angular/language-service: 4.2.5

Repro steps.

$ ng new test-csp
$ yarn add web-ext

Create src/manifest.json with:

{
  "manifest_version": 2,
  "name": "test-csp",
  "version": "1.0",
  "browser_action": {
    "default_title": "test-csp",
    "default_popup": "/index.html"
  }
}

Add manifest.json to the apps[0].assets in the .angular-cli.json.

Repo available here https://github.com/saulshanabrook/test-csp

The log given by the failure.

Regular build:

$ ng build
$ ./node_modules/.bin/web-ext lint -s dist
Validation Summary:

errors          0
notices         0
warnings        11

WARNINGS:

Code                    Message                          Description                                                     File                  Line    Column
DANGEROUS_EVAL          The Function constructor is      Evaluation of strings as code can lead to security              polyfills.bundle.js   286     22
                        eval.                            vulnerabilities and performance issues, even in the most
                                                         innocuous of circumstances. Please avoid using `eval` and the
                                                         `Function` constructor when at all possible.'
DANGEROUS_EVAL          The Function constructor is      Evaluation of strings as code can lead to security              polyfills.bundle.js   850     71
                        eval.                            vulnerabilities and performance issues, even in the most
                                                         innocuous of circumstances. Please avoid using `eval` and the
                                                         `Function` constructor when at all possible.'
DANGEROUS_EVAL          The Function constructor is      Evaluation of strings as code can lead to security              polyfills.bundle.js   2397    11
                        eval.                            vulnerabilities and performance issues, even in the most
                                                         innocuous of circumstances. Please avoid using `eval` and the
                                                         `Function` constructor when at all possible.'
DANGEROUS_EVAL          eval can be harmful.             Evaluation of strings as code can lead to security              polyfills.bundle.js   2397    43
                                                         vulnerabilities and performance issues, even in the most
                                                         innocuous of circumstances. Please avoid using `eval` and the
                                                         `Function` constructor when at all possible.'
DANGEROUS_EVAL          The Function constructor is      Evaluation of strings as code can lead to security              vendor.bundle.js      2576    11
                        eval.                            vulnerabilities and performance issues, even in the most
                                                         innocuous of circumstances. Please avoid using `eval` and the
                                                         `Function` constructor when at all possible.'
DANGEROUS_EVAL          eval can be harmful.             Evaluation of strings as code can lead to security              vendor.bundle.js      2576    43
                                                         vulnerabilities and performance issues, even in the most
                                                         innocuous of circumstances. Please avoid using `eval` and the
                                                         `Function` constructor when at all possible.'
DANGEROUS_EVAL          The Function constructor is      Evaluation of strings as code can lead to security              vendor.bundle.js      36267   73
                        eval.                            vulnerabilities and performance issues, even in the most
                                                         innocuous of circumstances. Please avoid using `eval` and the
                                                         `Function` constructor when at all possible.'
DANGEROUS_EVAL          The Function constructor is      Evaluation of strings as code can lead to security              vendor.bundle.js      36273   17
                        eval.                            vulnerabilities and performance issues, even in the most
                                                         innocuous of circumstances. Please avoid using `eval` and the
                                                         `Function` constructor when at all possible.'
DANGEROUS_EVAL          The Function constructor is      Evaluation of strings as code can lead to security              vendor.bundle.js      36281   17
                        eval.                            vulnerabilities and performance issues, even in the most
                                                         innocuous of circumstances. Please avoid using `eval` and the
                                                         `Function` constructor when at all possible.'
UNSAFE_VAR_ASSIGNMENT   Unsafe assignment to innerHTML   Due to both security and performance concerns, this may not     vendor.bundle.js      50833   71
                                                         be set using dynamic values which have not been adequately
                                                         sanitized. This can lead to security issues or fairly serious
                                                         performance degradation.
UNSAFE_VAR_ASSIGNMENT   Unsafe assignment to innerHTML   Due to both security and performance concerns, this may not     vendor.bundle.js      50878   9
                                                         be set using dynamic values which have not been adequately
                                                         sanitized. This can lead to security issues or fairly serious
                                                         performance degradation.

Production build:

$ ng build --prod
$ ./node_modules/.bin/web-ext lint -s dist
Validation Summary:

errors          0
notices         0
warnings        11

WARNINGS:

Code                    Message                          Description                                                     File                              Line   Column
DANGEROUS_EVAL          The Function constructor is      Evaluation of strings as code can lead to security              polyfills.35d6fc6174fa08d451d6…   1      52746
                        eval.                            vulnerabilities and performance issues, even in the most        .bundle.js
                                                         innocuous of circumstances. Please avoid using `eval` and the
                                                         `Function` constructor when at all possible.'
DANGEROUS_EVAL          eval can be harmful.             Evaluation of strings as code can lead to security              polyfills.35d6fc6174fa08d451d6…   1      52776
                                                         vulnerabilities and performance issues, even in the most        .bundle.js
                                                         innocuous of circumstances. Please avoid using `eval` and the
                                                         `Function` constructor when at all possible.'
DANGEROUS_EVAL          The Function constructor is      Evaluation of strings as code can lead to security              polyfills.35d6fc6174fa08d451d6…   1      55491
                        eval.                            vulnerabilities and performance issues, even in the most        .bundle.js
                                                         innocuous of circumstances. Please avoid using `eval` and the
                                                         `Function` constructor when at all possible.'
DANGEROUS_EVAL          The Function constructor is      Evaluation of strings as code can lead to security              polyfills.35d6fc6174fa08d451d6…   1      56434
                        eval.                            vulnerabilities and performance issues, even in the most        .bundle.js
                                                         innocuous of circumstances. Please avoid using `eval` and the
                                                         `Function` constructor when at all possible.'
DANGEROUS_EVAL          The Function constructor is      Evaluation of strings as code can lead to security              vendor.7157c5dcd45d72de6187.bu…   1      54515
                        eval.                            vulnerabilities and performance issues, even in the most        ndle.js
                                                         innocuous of circumstances. Please avoid using `eval` and the
                                                         `Function` constructor when at all possible.'
DANGEROUS_EVAL          The Function constructor is      Evaluation of strings as code can lead to security              vendor.7157c5dcd45d72de6187.bu…   1      54590
                        eval.                            vulnerabilities and performance issues, even in the most        ndle.js
                                                         innocuous of circumstances. Please avoid using `eval` and the
                                                         `Function` constructor when at all possible.'
DANGEROUS_EVAL          The Function constructor is      Evaluation of strings as code can lead to security              vendor.7157c5dcd45d72de6187.bu…   1      54778
                        eval.                            vulnerabilities and performance issues, even in the most        ndle.js
                                                         innocuous of circumstances. Please avoid using `eval` and the
                                                         `Function` constructor when at all possible.'
DANGEROUS_EVAL          The Function constructor is      Evaluation of strings as code can lead to security              vendor.7157c5dcd45d72de6187.bu…   1      127089
                        eval.                            vulnerabilities and performance issues, even in the most        ndle.js
                                                         innocuous of circumstances. Please avoid using `eval` and the
                                                         `Function` constructor when at all possible.'
DANGEROUS_EVAL          eval can be harmful.             Evaluation of strings as code can lead to security              vendor.7157c5dcd45d72de6187.bu…   1      127119
                                                         vulnerabilities and performance issues, even in the most        ndle.js
                                                         innocuous of circumstances. Please avoid using `eval` and the
                                                         `Function` constructor when at all possible.'
UNSAFE_VAR_ASSIGNMENT   Unsafe assignment to innerHTML   Due to both security and performance concerns, this may not     vendor.7157c5dcd45d72de6187.bu…   1      141593
                                                         be set using dynamic values which have not been adequately      ndle.js
                                                         sanitized. This can lead to security issues or fairly serious
                                                         performance degradation.
UNSAFE_VAR_ASSIGNMENT   Unsafe assignment to innerHTML   Due to both security and performance concerns, this may not     vendor.7157c5dcd45d72de6187.bu…   1      142070
                                                         be set using dynamic values which have not been adequately      ndle.js
                                                         sanitized. This can lead to security issues or fairly serious
                                                         performance degradation.

Desired functionality.

We should be able to build the project with no CSP errors. That means eliminating all uses of eval and Function. This is needed in order for Mozilla to let any Angular 2 apps be submitted as extensions on their store. For example, I got this response when trying to submit an extension:

This version didn't pass review because of the following problems:

1. 'unsafe-eval' usage into Content Security Policy.

We generally don't accept using the 'eval' function. There are many reasons not to use 'eval', and there are alternatives available. You can read more about it here: https://developer.mozilla.org/en/XUL_School/Appendix_C:_Avoid_using_eval_in_Add-ons

Mention any other details that might be useful.

Moved from #1279 (comment).

This might be blocked on Angular core angular/angular#6361 angular/angular#1744.

[filipesilva]

There are, unfortunately, some eval usage right now that I don't know if we can easily get rid of. One such example is using script-loader to load scripts. This needs some investigation to see what can be done and where are the offending bits.

[justingrayston]

For me, the report is coming from webpack code trying to load the modules.

e.exports=function(e){"undefined"!=typeof execScript?execScript(e):eval.call(null,e)}}

Which I believe is the compiled version of

/*
    MIT License http://www.opensource.org/licenses/mit-license.php
    Author Tobias Koppers @sokra
*/
module.exports = function(src) {
    if (typeof execScript !== "undefined")
        execScript(src);
    else
        eval.call(null, src);
}

This issue in Webpack webpack/webpack#4094 kind of implies that it should be possible to resolve, but to be honest I am no webpack expert. If I have some time I may do some reading.

[moiz-h]

+1 for getting rid of eval() and new Function calls. We get the evalError when trying to use an Angular component in an existing AngularJS app.

[AdonousTech]

+1 - There's a single call to eval.call(...) in scripts.bundle.js that prevents proper use of a CSP response header in Angular apps.