Chrome Packaged App: Refused to evaluate a string as JavaScript because 'unsafe-eval' ....

[dinhvh]

When including polymer.min.js in a Chrome Packaged App, I have the following error message in the console:

Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "default-src 'self' chrome-extension-resource:". Note that 'script-src' was not explicitly set, so 'default-src' is used as a fallback.

Even though it's expected and for "detection" purpose, it can be confusing for the developer using Polymer.

[dfreedm]

This seems like a Chrome bug. This is the minified repro case:

try {
 new Function('foo')
} catch (e) {
  // do something else
}

Even inside of a try/catch, that message will be printed.

[dinhvh]

Will it disappear when a native support for HTML import will be available in Chrome?

[sjmiles]

No, this problem has nothing to do with HTML Imports.

The data-binding code checks for functioning 'eval', because it can be used to optimize certain operations.

[dinhvh]

Maybe you could detect that you're in a chrome packaged app environment and avoid calling eval.

  if (chrome && chrome.app && chrome.app.runtime) {
    // do something that's allowed in packaged apps 
  } else {
    // do anything I want
  }

[dfreedm]

Filed https://code.google.com/p/chromium/issues/detail?id=277857

[dinhvh]

Just for information, we found today that Polymer/Dart uses a Polyfill for HTML imports that works in a Chrome Apps.
It would be great to have the same working in Polymer/JS.
Maybe they're just using a more recent version of HTML imports polyfill?

[jmesserly]

yeah, that's fascinating. Polymer.dart uses the HTML Imports polyfill from https://github.com/Polymer/HTMLImports, should be at a fairly recent version. I think the only difference is we build a concatenated "debug" as well as a minified version.

Also the Dart coding style typically has the Dart code in an external file, like <script type="application/dart" src="foo.dart"> rather than an inline script, so maybe that helps. We do that because it gives you a way to import the component's type name. (Otherwise you can't refer to MyFancyButton in code because Dart has no global scope and only lexical imports. It's similar in spirt to EcmaScript Harmony modules)

@dinhviethoa are you using Dartium?

[dinhvh]

I'm trying to get it to work using dart2js in standard Chrome (that's what our product targets for now).

[jmesserly]

ah, gotcha. Makes sense. When compiling to dart2js we concat the HTML and Dart, similar to Polymer's Vulcanizer tool.

[dinhvh]

I'm clarifying here:

• Our goal would to work with dart2js in standard Chrome.
• HTMLImports polyfill worked with Polymer/Dart in Dartium for now.
• HTMLImports polyfill didn't work with Polymer/JS in Chromium.

[jmesserly]

Hmm. I wonder if Dartium is ignoring CSP for .dart files. :)

[dinhvh]

Thoughts HTMLImports is JS and the file to import is referenced using HTML <link rel=...>
Do you still think dart is involved here?

[jmesserly]

Yeah, our HTML imports is pure JavaScript: https://github.com/dart-lang/bleeding_edge/tree/master/dart/pkg/html_import/lib

But there's two parts to HTML Imports:

• loading HTML imports code itself
• https://github.com/dart-lang/bleeding_edge/blob/master/dart/pkg/polymer/lib/boot.js loads your code, builds a concatenated .dart script, adds it to the page and runs it.

The second part should run afoul of CSP, based on my (admittedly limited) understanding of CSP.

[adam-singer]

@jmesserly has this changed within the last 3 months? Do you still expect polymer dart to run afoul of CSP for both dartium and dart2js?

[jmesserly]

@jmesserly has this changed within the last 3 months? Do you still expect polymer dart to run afoul of CSP for both dartium and dart2js?

Yes. Dartium has native (implemented in C++) HTML Imports support now. We don't generate Dart code on the fly AFAIK.

[adam-singer]

@jmesserly fwiw, @devoncarew has pointed out a few tricks for getting polymer working with Dartium an dart2js for Chrome Packaged Apps. Should probably file a bug and have these following features natively supported from polymers build/transformation system.

1. invoke the polymer deploy directly. pub build does not yet work.
2. munging before and after to tie all the pieces together: 650 lines of munging (https://github.com/dart-lang/spark/blob/master/ide/tool/grind.dart).
3. custom own bootstrap script, which loads the dart.precompiled.js version of the compiled JS.

The reason I'm mention this is with the Mobile Chrome Packaged apps the use of eval was allowed and something down the polymer build chain must of been calling it at runtime. I would consider it a bug that Mobile Chrome Packaged apps allows eval. So when taking that same Polymer application to the Desktop Chrome Packaged apps the application will blow up. I have not tried the suggestions that @devoncarew pointed out, but will eventually focus on building a sample that works on Mobile and Desktop that follows the build steps above.

Please forgive if this is not the place to discuss this oddity.

[jmesserly]

1. invoke the polymer deploy directly. pub build does not yet work.

they should be approx equivalent (other than polymer deploy being much faster at the moment). Any idea what the issue is? we should file an issue at http://dartbug.com

1. munging before and after to tie all the pieces together

a lot of that script looks like Spark specific release process stuff. I don't think Polymer.dart's build tools will ever be doing git operations for you :). To be honest, I don't understand why that script is doing most of the things it is doing. Workarounds for issues perhaps, but it isn't clear what they were.

1. custom own bootstrap script, which loads the dart.precompiled.js version of the compiled JS.

any more info about this? what does this custom bootstrap script do?

[ragingwind]

I've got a same error with my Chrome App.

Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "default-src 'self' chrome-extension-resource:". Note that 'script-src' was not explicitly set, so 'default-src' is used as a fallback.
   observe.js:629
  (anonymous function) observe.js:629
  (anonymous function) observe.js:632
  (anonymous function)

I'm using Chrome 36.0.1941.2(Enabled experimental Web Platform features), Polymer 0.2.3 and I made imports.html via vulcanize -v --csp -i x-element.html -o imports.html I looked into source code. they wrapped try/catch but didn't check the hasEval. Chrome still has a bugs of try/catch?

[dinhvh]

I think this commit fixes this issue:
googlearchive/observe-js@3103f66
Does Polymer 0.2.3 include that fix?

[ragingwind]

That code included in 0.2.3 but hasEval is not using in this function. I'm not sure that is problem.

var hasDebugForceFullDelivery = hasObserve && (function() {
    try {
      eval('%RunMicrotasks()');
      return true;
    } catch (ex) {
      return false;
    }
  })();

[dinhvh]

Oh. Sure that's an issue. It should be fixed.

[arv]

@rafaelw

[roberthartung]

Is this fixed? :)

[arv]

Should be fixed.

[ragingwind]

👍

[himulawang]

Seems this problem come back again.

Chromium 36.0.1985.67 (Developer Build 277752)
OS Linux
Blink 537.36 (@173750)
JavaScript V8 3.26.31
Dart 1.5.2
Flash (Disabled)
User Agent Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/36.0.1985.67 (Dart) Safari/537.36
Command Line ./chrome --flag-switches-begin --enable-experimental-web-platform-features --flag-switches-end

dependencies:
  browser: any
  chrome: any
  logging: any
  paper_elements: any
  polymer: any

Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "default-src 'self' chrome-extension-resource:". Note that 'script-src' was not explicitly set, so 'default-src' is used as a fallback.
observe.js:988
(anonymous function) observe.js:988
(anonymous function) observe.js:992
(anonymous function) wrappers.js:37

<!DOCTYPE html>

<html>
<head>
  <title>PRM</title>

  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-capable" content="yes">

  <!--
  <link rel="stylesheet" href="styles.css">
  -->

  <script src="packages/web_components/platform.js"></script>
  <script src="packages/web_components/dart_support.js"></script>

  <link rel="import" href="packages/paper_elements/paper_button.html">
  <link rel="import" href="packages/core_elements/core_drawer_panel.html">

  <style>
    body {
      font-family: sans-serif;
      color: #FFF;
      height: 100%;
    }

    [drawer] {
      background-color: #B99588;
      border-right: 1px solid #ccc;
    }

    [main] {
      height: 100%;
      background-color: #4F7DC9;
    }

    button {
      width: 160px;
      height: 40px;
      font-size: 16px;
      margin: 8px;
    }

    core-drawer-panel[narrow] button {
      display: inline-block
    }
  </style>
</head>

<body unresovled fullbleed>
  <core-drawer-panel>

    <div drawer>
      Drawer Panel
      <paper-button label='OK'>OK</paper-button>
    </div>

    <div main>
      Main Panel
      <button>toggle drawer</button>
    </div>

  </core-drawer-panel>

  <script type="application/dart" src="main.dart"></script>
  <script src="packages/browser/dart.js"></script>
</body>
</html>

Anybody has the same problem?

[FreakTheMighty]

I am still getting these warnings when I use dart2js within a cordova chrome app.

Refused to execute inline script because it violates the following Content Security Policy directive: "default-src 'self' chrome-extension-resource:" 

The ticket notes that the problem was fixed in 0.2.3, but the polymer.js included with polymer.dart appears to still be at 0.2.0.
https://github.com/dart-lang/bleeding_edge/blob/master/dart/pkg/polymer/lib/src/js/polymer/bower.json#L19

[davidmaxwaterman]

I'm getting this error when using polymer in a background script, and I've run the 'refactor for csp' on the bower_components directory from within the Chrome Dev Editor, so that should have fixed it.
Using polymer '@Version: 0.4.2', and the error is on polymer.js:12.

Oh, and also : polymer.concat.js:4170

[jnicolau]

I'm getting this same error from this line in polymer.concat.js (4170)
var f = new Function('', 'return true;');

[klebba]

I'm hitting this error using Polymer 0.4.2 via Bower (minified). Looks like it begins at

try{var a=new Function("","return true;") [...]

[jnicolau]

I'm also having the same problem. Is it possible to reopen this ticket or are we to open a new one?