【问题标题】:Polymer, Dart, Chrome App, CSP and debuggingPolymer、Dart、Chrome 应用、CSP 和调试
【发布时间】:2015-07-21 01:27:17
【问题描述】:

类似的问题已经有一段时间了,也许有人知道今天堆栈的答案。理想情况下保留可调试性...

我有一个 Dart 应用程序,它在 Polymer/Dart 中实现 GUI,在 Chrome/Dart 中实现后端。这两部分都运行良好(非常感谢)现在我正试图将它们联系在一起并调试任何问题。统一的应用程序遇到了一波 CSP 错误,所以我整理了一个小测试用例。网上有很多 Dart/Polymer/CSP 建议,但随着事情的发展而变化,很难看到当前的最佳实践。这是测试用例:

ma​​nifest.json

{
  "manifest_version": 2,
  "name": "Test Case",
  "version": "0.3",

  "icons": {"128": "dart_icon.png"},

  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",

  "app": {
      "background": {
          "scripts": ["background.js"]
          }
      },

  "permissions":  [ "usb"
                  , { "usbDevices": [ {"vendorId": 1027, "productId": 24597} ] }
                  , { "fileSystem": [ "write", "retainEntries", "directory" ] }
                  ]

}

background.js

chrome.app.runtime.onLaunched.addListener(function(launchData) {
  chrome.app.window.create('testwrap.html', {
        'id': '_myMainWindow',
        'bounds': {'width': 800, 'height': 500 }
        });
});

testwrap.html

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <title>PolyChrome</title>    
    <link rel="import" href="packages/polymer/polymer.html">
    <link rel="import" href="clickcounter.html">    
  </head>
  <body>
    <h1>Testing...</h1>    
    <p>in the test directory...</p>

    <div id='container_id'>
      <p id='text_id'>The log is here.</p>
    </div>
    <div id='div2'>
      <click-counter></click-counter>
    </div>

    <script type='application/dart' src='testwrap.dart'></script>    
  </body>
</html>

testwrap.dart

import  'dart:html';
import  'package:polymer/polymer.dart';
export  'package:polymer/init.dart';

//----------------------------------------
@whenPolymerReady
void mainStartup() {
  querySelector("#text_id").text = 'Running';
  }

点击计数器元素是来自 Dart/Polymer 页面的标准代码。

yaml 包含一个可能未使用的 $dart2js (?) 或者可能有两个 csp:true 行不正确?

pubspec.yaml

name: polyChrome

description: Chrome App with Polymer

dependencies:
  chrome: ^0.7.0-dev1
  code_transformers: any
  core_elements: any
  paper_elements: any
  polymer: any

transformers:
- polymer:
    entry_points:
    - web/testwrap.html
    csp: 'true'    
- $dart2js:
    csp: 'true'
    checked: 'true'

CSP 错误信息(都一样):

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.

令人困惑的是,尽管出现错误消息,但测试应用似乎可以正常工作,但更大的测试在启动时会冻结 - 不能忽略这些消息。

较大的测试给出了来自

的错误消息
Zone zone = await initPolymer();

消息有点不透明(my_clock 是一个测试聚合物组件,可 100% 用作网络应用程序):

Breaking on exception: Unsupported operation: Unsupported uri scheme chrome-extension for library LibraryMirror on 'my_clock'.

【问题讨论】:

  • 我很确定这两条 csp 行是正确且必要的。

标签: dart google-chrome-app dart-polymer


【解决方案1】:

这甚至不是部分答案,但它可能对其他人有所帮助......

csp 行有一个常见的拼写错误。不要写:

csp: 'true' 

这是正确的(同样的修复适用于已检查:true):

csp: true 

并从清单中删除这一行:

"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",

搜索继续:)

【讨论】:

    【解决方案2】:

    这是一个聚合物飞镖的基本示例

    https://github.com/dart-gde/dart-chrome-app-samples/tree/master/chrome-app-with-polymer-dart

    编辑:您需要在 pubspec.yaml 中拥有这些

    transformers:
    - polymer:
        entry_points: web/index.html
        csp: true
    - chrome
    - $dart2js:
        csp: true
    

    并从您的 manifest.json 中删除 content_security_policy

    这应该可行

    【讨论】:

    • 请从链接中添加一些内容。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2013-12-22
    • 2013-05-01
    • 2014-12-27
    • 2013-10-17
    • 1970-01-01
    • 1970-01-01
    • 2013-08-27
    相关资源
    最近更新 更多