Content Security Policy directive: "script-src 'self' blob: filesystem: chrome-extension-resource:" While fetching whether

Question

I am using jQuery simple whether plugin to get the whether and trying to create a chrome widget.

While loading the file as a chrome extensions, I am getting error, after looking all the help provided by google and here it self, still I am not able to resolve this issue.

Below is the error for yahoo whether

> jquery-2.1.3.min.js:4 Refused to load the script
> 'https://query.yahooapis.com/v1/public/yql?format=json&rnd=2016437&diagnosti…ces(1)%20where%20text=%22New%20Delhi%22)%20and%20u=%22c%22&_=1462326587463'
> because it violates the following Content Security Policy directive:
> "script-src 'self' blob: filesystem: chrome-extension-resource:".

Another error which is for font,

> Refused to load the font
> 'data:application/octet-stream;base64,AAEAAAAPAIAAAwBwR1NVQrD+s+0AAAD8AAAAQk…GIUViwQIhYsQNkRLEmAYhRWLoIgAABBECIY1RYsQMARFlZWVmzDAIBDCq4Af+FsASNsQIARAAA'
> because it violates the following Content Security Policy directive:
> "default-src *". Note that 'font-src' was not explicitly set, so
> 'default-src' is used as a fallback.

Used manifest code are

"content_security_policy": "script-src 'self'; object-src 'self' https://query.yahooapis.com/",
    "permissions": [
      "tabs", "<all_urls", "http://localhost/",
      "http://*/*", "https://*/*", "https://query.yahooapis.com/*"
    ],
    "content_scripts":
    [{
        "css": [
            "css/component.css",
            "css/tooltip-line.css",
            "css/modal.css"
        ],
        "js": [
            "js/modernizr.custom.js",
            "js/jquery-2.1.3.min.js",
            "js/jquery.simpleWeather.min.js",
            "js/handlebars-v4.0.5.js",
            "js/moment.min.js",
            "js/background.js"

        ],
        "matches": [ "http://*/*", "https://*/*"]
    }]

Also In my html file i am using this meta tag

<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' http://* 'unsafe-inline'; script-src 'self' http://* 'unsafe-inline' 'unsafe-eval'" />

Can some one please help me to how i can solve this.

Answer 1

Your content-security-policy has "script-src 'self' which means scripts cannot be loaded from a third party URL.

You have specified yahoo API in the object-src directive. object-src directive (MDN) specifies valid sources for the <object>, <embed>, and <applet> elements.

To load the script from a third party, you have to specify in script-src directive like this:

"content_security_policy": "script-src https://query.yahooapis.com/ 'self'; ..."