Chrome Manifest with Google API

2019-08-03 22:54发布

问题:

I need some advice on how I can get my chrome manifest for an extension to allow a Google API talk between the servers and the application. The application loads fine when I point to it directly(not as extension).

However my problem is that when I load it as an extension I get the following error:

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/".

The application is built to interface with Google’s Calendar API.

This is what my HTML header looks like (locally):

<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>

This is what it looks like when its loaded (**scripts loads - guessing an api call?):

<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>

My manifest:

{
  "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"
  }
}

回答1:

According to the docs regarding Content Security Policy configuration and more specificaly the policy against eval():

The policy against eval() and its relatives like setTimeout(String), setInterval(String), and new Function(String) can be relaxed by adding 'unsafe-eval' to your policy [...]

However, we strongly recommend against doing this. These functions are notorious XSS attack vectors.

(emphasis mine)

Thus, adding 'unsafe-eval' to your content-securty-policy might be a solution (but quite certainly not a good one in other aspects).

Pinoyyid's suggestion to use plain XMLHttpRequests could prove a better approach (if necessary setting the withcredentials attribute to true).



回答2:

Here is an example from my extension. In this case I'm calling the 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);

Rather than the raw XMLHttpRequest, I use a JS library which creates a JSON wrapper around the XMLHttpRequest object.