How to load google fonts into chrome packaged apps

问题:

How is one supposed to load google fonts, Do I really have to download and package every font I use with my app? I'm trying to avoid packaging the fonts since they are so many that my app would be huge (it's a web editor)

<link href='http://fonts.googleapis.com/css?family=Nunito' rel='stylesheet' type='text/css'>

> Refused to load the stylesheet 'http://fonts.googleapis.com/css?family=Nunito' because it violates the following Content Security Policy directive: "style-src 'self' data: chrome-extension-resource: 'unsafe-inline'".

I thought I could load it as a blob but I'm not sure if it can be done. The data is downloaded but there are no changes, I have tried this:

var xhr = new XMLHttpRequest();
xhr.open("GET", "http://themes.googleusercontent.com/static/fonts/nunito/v4/0rdItLTcOd8TSMl72RUU5w.woff", true);
xhr.responseType = "blob";
xhr.onreadystatechange = function() {
    console.log("STATE", xhr.readyState);
    if (xhr.readyState == 4) {
        var myfontblob = window.webkitURL.createObjectURL(xhr.response);
        $("<style>").text("@font-face {\
            font-family: 'Nunito';\
            font-style: normal;\
            font-weight: 400;\
            src: '"+myfontblob+"' format('woff');\
        }").prependTo("head");
    }
};
xhr.send();

回答1:

Using sandbox is not a good way

it can expose your application to attack and security issue.
This is wy in Chrome App Environment, CSP are so strict.

Content Security Policy (CSP)

When you load something with XMLHttpRequest(); like Mud has sayd you have to take care about CSP. To learn more about it I suggest this blog post on html5rocks.com by Mike West from Google Team.

But, if you are targetting Google Chrome App they is a different concept from Extensions and have different rules.

Setting the permission in the manifest.json

In the manifest.json for Chrome App you can't any more set directly the environment for content_security_policy. But you can add some permissions to the uri you want to add at the whitelist of your Content Security Policy. Doing it is easy, just add to your manifest.json an array of whitelist uri in the key "permissions" like this:

{
  "manifest_version": 2,
  "name": "Your Awsome App Name",
  "version": "1",
  "permissions":[
  "http://localhost/",
  "http://youraswomedomain.io/"

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

  "icons":{
      "16": "icon_16.png",
      "128": "icon_128.png"
  }
}

If using Angular.js you will have a tag: ng-csp that work with CSP directly out of the box! You just need to place the tag in the body or in the palce where you will istanziate the ng-app.

回答2:

I believe this should work for a Chrome packaged app. You will need to whitelist the URL in your manifest (https://developer.chrome.com/apps/app_external) and then use a bit of JavaScript that looks like this:

var xhr = new XMLHttpRequest();
xhr.open("GET", "http://themes.googleusercontent.com/static/fonts/nunito/v4/0rdItLTcOd8TSMl72RUU5w.woff", true);
xhr.responseType = "blob";
xhr.onreadystatechange = function() {
    console.log("STATE", xhr.readyState);
    if (xhr.readyState == 4) {
        var myfontblob = window.URL.createObjectURL(xhr.response);
        var newStyle = document.createElement('style');
        newStyle.appendChild(document.createTextNode("\
        @font-face {\
            font-family: Nunito;\
            font-style: normal;\
            font-weight: 400;\
            src: url('" + myfontblob + "') format(woff);\
        }\
        "));
        document.head.appendChild(newStyle);
    }
};
xhr.send();

回答3:

You should be able to just modify your manifest's content security policy to allow from the google font site like so:

"content_security_policy": "script-src 'self' http://fonts.googleapis.com; object-src 'self'"

See the similar question here: Google Chrome Extensions with Typekit Fonts