Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
himulawang opened this issue Jul 7, 2014 · 9 comments

Comments

@himulawang
Copy link

Seems this problem come back again. #252

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?

@jmesserly
Copy link
Contributor

Hi @himulawang, I fixed this already in googlearchive/observe-js@fc8d439

The Dart web_component package is updated in https://codereview.chromium.org/355133002/

Also, a few general notes:

  • "any" is a dangerous version constraint. It can select very old versions. It's much better to choose a recent version yourself.
  • --enable-experimental-web-platform-features should not be needed anymore.

@himulawang
Copy link
Author

Thank you for your notes & fixing this problem so fast @jmesserly

@jmesserly
Copy link
Contributor

No problem! I wanted to point you at one additional problem we found today: https://github.com/Polymer/polymer-dev/issues/42 ... it only happens if you are using "noscript" elements.

@Dumbris
Copy link

Dumbris commented Jul 11, 2014

As i understand this fix does not availiable on https://pub.dartlang.org/packages/web_components now.

Could you tell please, how to use the lastest dev version of web_components?

I rebuild platform.js from github (via https://github.com/polymer/tools). Then override platform* files in dart source tree dart/pkg/web_components/lib with newly builded files.
Then add to pubspec.yaml in my project with
dependency_overrides:
web_components:
path: ../path/to/web_components

But I see the same errors in console "Refused to execute inline script because it violates the following Content Security Policy directive: "default-src 'self' chrome-extension-resource:". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'script-src' was not explicitly set, so 'default-src' is used as a fallback."
So problem not gone.

I try to use paper-button polymer elements in chrome packaged app.
Project https://github.com/Dumbris/test_polymer_paper_elements_chrome_app can be used as minimal working example to show the problem.

@Dumbris
Copy link

Dumbris commented Jul 11, 2014

I found solution. After dart2js run vulcanize index.html --csp.
But in this case is impossible to use dartium and dartEditor for debug.

@zoechi
Copy link

zoechi commented Jul 11, 2014

Have you tried what I suggested on your SO question http://stackoverflow.com/questions/24620604
The Polymer transformer does mostly the same as vulcanize. Launching the app from DartEditor uses pub serve to serve the files to Dartium and pub serve invokes configured transformers. Or doesn't that apply for the JavaScript embedded in the paper-elements?

@Dumbris
Copy link

Dumbris commented Jul 11, 2014

Yes, I use
transformers:

  • polymer:
    entry_points: web/test_polymer_paper_elements_chrome_app.html
    csp: 'true'
  • chrome

see https://github.com/Dumbris/test_polymer_paper_elements_chrome_app/blob/master/pubspec.yaml

but it is not enough, in practice. I suppose because dart paper_elements import a html files with polymerJS based paper_elements

@prateekjassal
Copy link

How do we fix this in a Chrome packaged app without using Dart ?

@robdodson
Copy link
Contributor

Running the app through vulcanize with the --csp flag should fix it.

Give this a shot: github.com/polymerlabs/polymerchromeapp

On Tue, Jul 29, 2014 at 2:30 AM, Prateek Jassal [email protected]
wrote:

How do we fix this in a Chrome packaged app without using Dart ?


Reply to this email directly or view it on GitHub
#612 (comment).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

6 participants