bug: Ionic Core using unsafe eval now allowed by strict CSP

[billygerhard]

Bug Report

Ionic version:

[x] 4.x

Current behavior:

The ionic.core.js files, as well as ionicons.core.js files use the line new Function("w","return class extends w.HTMLElement{}") which causes 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"

This looks like it comes from ES5 backwards compatibility. There should be an option to not include ES5 if needed. There is the option in the angular.json, but that doesn't seem to work to remove this "es5BrowserSupport": false

Expected behavior:

All unsafe evals should be removed to allow ionic to run in environments with strict CSP.

Steps to reproduce:

Generate a new ionic application

Related code:

var e;
            ! function r(n) {
              return /\{\s*\[native code\]\s*\}/.test("" + n)
            }(n.customElements.define) ? (e = function(t) {
              return n.HTMLElement.call(this, t)
            }).prototype = Object.create(n.HTMLElement.prototype, {
              constructor: {
                value: e,
                configurable: !0
              }
            }): e = new Function("w", "return class extends w.HTMLElement{}")(n), U[s].u(function i(n) {
              var t = C(n),
                e = t.s,
                r = d(n[0]);
              return t.s = function(n) {
                var t = n.mode,
                  i = n.scoped;
                return function o(n, t, e) {
                  return __webpack_require__("./node_modules/@ionic/core/dist/esm/es5/build lazy recursive ^\\.\\/.*\\.entry\\.js$ include: \\.entry\\.js$")("./" + n + (t ? ".sc" : "") + ".entry.js").then(function(n) {
                    return n[e]
                  })
                }("string" == typeof e ? e : e[t], i, r)
              }, t
            }(t), e)

Other information:

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.12.0 (C:\Users\billy\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.4.0
   @angular-devkit/build-angular : 0.13.9
   @angular-devkit/schematics    : 7.3.9
   @angular/cli                  : 7.3.9
   @ionic/angular-toolkit        : 1.5.1

Cordova:

   cordova (Cordova CLI) : 9.0.0 ([email protected])
   Cordova Platforms     : none
   Cordova Plugins       : not available

System:

   NodeJS : v10.15.3 (C:\Program Files\nodejs\node.exe)
   npm    : 6.4.1
   OS     : Windows 10

[billygerhard]

Related issue from Angular which was fixed in angular's core when using AOT, but this still is present in Ionic even when using AOT. angular/angular-cli#6872

[billygerhard]

This looks like this issue was also reported with Stencil stenciljs/core#1265 but the PR was rejected.

[liamdebeasi]

Hi there,

Thanks for the issue. We are aware of this issue, and this is something that will be fixed in our upcoming Stencil refactor.

I will keep this issue open until Ionic has been updated with the latest Stencil update.

Thanks!

[liamdebeasi]

Thanks for the issue. I am going to close this as it has been marked as fixed with the Stencil One refactor. If you are still experiencing this behavior please open a new issue. Thanks!

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.