带有 Google API 的 Chrome 清单答案

【问题标题】：Chrome Manifest with Google API带有 Google API 的 Chrome 清单
【发布时间】：2013-11-03 03:41:17
【问题描述】：

我需要一些关于如何获取我的 chrome 清单以允许服务器和应用程序之间进行 Google API 对话的扩展的建议。当我直接指向它（而不是作为扩展）时，应用程序加载正常。

但是我的问题是，当我将它作为扩展加载时，我收到以下错误：

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 'self' https://apis.google.com/".

该应用程序旨在与 Google 的日历 API 交互。

这是我的 HTML 标头（本地）的样子：

<head>
    <link href='reset.css' rel="stylesheet" type="text/css">
     <link href='style.css' rel="stylesheet" type="text/css">
    <link href='animate-custom.css' rel="stylesheet" type="text/css">
     <script type="text/javascript" src="jquery.min.js"></script>
     <script src="https://apis.google.com/js/client.js?onload=onClientLoad" type="text/javascript"></script> 
    <script src="main.js" type="text/javascript"></script>
    <script type="text/javascript" src="moment_langs.js"></script>

    <title>Dashboard</title>
</head>

这是加载时的样子（**脚本加载 - 猜测 api 调用？）：

<link href='reset.css' rel="stylesheet" type="text/css">
     <link href='style.css' rel="stylesheet" type="text/css">
    <link href='animate-custom.css' rel="stylesheet" type="text/css">
**<script src="https://apis.google.com/_/scs/apps-static/_/js/k=oz.gapi.en.lm_l25KfNhA.O/m=client/rt=j/sv=1/d=1/ed=1/am=AQ/rs=AItRSTM1DJ5OrFPvETO8O24EqSIF_JCoKQ/cb=gapi.loaded_0" async=""></script>**
     <script type="text/javascript" src="jquery.min.js"></script>
     <script src="https://apis.google.com/js/client.js?onload=handleClientLoad" type="text/javascript"></script> 
    <script src="main.js" type="text/javascript"></script>
    <script type="text/javascript" src="moment_langs.js"></script>

我的清单：

{
  "manifest_version": 2,
  "name": "My Dashboard",
  "version": "1.2",
  "content_security_policy": "script-src 'self' https://apis.google.com/; object-src 'self'",
  "permissions": [
    "webRequest",
    "*://*.googleapis.com/*",
    "*://*.apis.google.com/*"
  ],


    "chrome_url_overrides" : {
    "newtab": "index.html"
  }
}

【问题讨论】：

有什么问题？当您将其用作扩展程序时会发生什么（与将其用作网络应用程序时相反）？它如何与 Google Calendars API 交互？
@ExpertSystem 我编辑了问题并陈述了问题。该应用程序拉入日历事件并列出它们。此时，日历 url 是硬编码的公共日历。
我不相信 jsapi 库支持 Chrome 扩展。在我的扩展中，我直接使用 XMLhttprequest 调用 Google API。这很简单。
@pinoyyid 你能扩展你的解决方案吗？这对我来说都是新的。我了解 XMLhttprequest 的作用，但是我在请求中将其称为“apis.google.com/js/client.js?onload=handleClientLoad”吗？
我根本不使用 client.js。而是直接从 javascript 调用底层 REST API。我已经发布了一个带有代码片段的答案

标签： html google-chrome-extension google-calendar-api

【解决方案1】：

根据有关 Content Security Policy 配置的文档，更具体地说是 policy against eval()：

针对 eval() 及其亲属的政策，例如 setTimeout(String)、setInterval(String) 和 new Function(String) 可以通过在您的策略中添加“unsafe-eval”来放松 [...]

但是，我们强烈建议不要这样做。这些函数是臭名昭著的 XSS 攻击 向量。

（强调我的）

因此，将“unsafe-eval”添加到您的 content-security-policy 可能是一种解决方案（但在其他方面肯定不是一个好的解决方案）。

Pinoyyid's suggestion 使用普通的 XMLHttpRequests 可以证明是一种更好的方法（如有必要，将 withcredentials 属性设置为 true）。

【讨论】：

好点，但正如你暗示的那样，我试图避免“不安全评估”，因为我正在访问用户数据，因此不希望他们的信息处于危险之中。
o有一些方法可以安全地使用 eval() in a sandbox 并通过 window.postMessage 传递数据。再说一次，还有 XMLHttpRequest。
我喜欢 XMLHTTPRequest 方法，但是如下所述@pinoyyid 评论我不太确定如何实现它。
试试 pinoyyid 的回答（如果您不想使用库，请尝试使用“raw”XMLHttpRequest）。

【解决方案2】：

这是我的扩展中的一个示例。在这种情况下，我调用 Drive 'trash' API。

            var xhr = new window['JSONHttpRequest']();

            xhr.open("POST", "https://www.googleapis.com/drive/v2/files/" + id + "/trash", true);
            xhr.setRequestHeader('Authorization', 'Bearer ' + token); // token comes from chrome.identity
            xhr.setRequestHeader('Content-Type', 'application/json');
            xhr.sendJSON(dmark);

我使用一个 JS 库而不是原始 XMLHttpRequest，它围绕 XMLHttpRequest 对象创建一个 JSON 包装器。

【讨论】：

我正在尝试实现原始 XHMLhttpRequest。你能看看这是否正确？ (jsfiddle.net/86YEu)
我在这里更新了你的小提琴jsfiddle.net/86YEu。在 xhr.open 之后有一个虚假的 =。此版本失败 403-Access not Configured 这可能是由于密钥无效，或未注册使用日历 API。