Content Security Policy getJSON

Question

I'm sorry for my english,

I have this following code in my HTML:

<script type="text/javascript" src="plugin.js"></script>

In my JS:

    $(document).ready(function() {
        $.getJSON("https://api.twitch.tv/kraken/streams/"+"NameOfStreamer"+"?callback=?",function(c) {

        if (c.stream == null) {
            $("p").text("Stream offline, n'hésitez pas à me rejoindre sur les réseaux sociaux afficher ci-dessous.");

        } else {

            $("p").text("Stream online, rejoins moi sur Domingo.tv en cliquant sur le lien ci dessous");

        }
    });
});

In my manifest :

{
  "manifest_version": 2,

  "name": "Getting started example",
  "description": "This extension shows a Google Image search result for the current page",
  "version": "1.0",
  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",

  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },

  "permissions": [
    "activeTab",
    "https://ajax.googleapis.com/",
  ]
}

And i obtain that :

Refused to load the script 'https://api.twitch.tv/kraken/streams/NameOfStreamer?callback=jQuery11120590793181443587_1429560015317&_=1429560015318' because it violates the following Content Security Policy directive: "script-src 'self' chrome-extension-resource:".

I would like to know how i can resolve that pls.

you're doing cross-domain ajax request. you need either jsonp, or the appropriate CORS headers to allow it. — Marc B, Apr 20 '15 at 20:14
Incorrect duplicate. The issue here IS jsonp. It needs to be dropped. — Xan, Apr 20 '15 at 20:17

score 1 · Accepted Answer · answered Apr 20 '15 at 20:24

1

Your problem is in trying to use JSONP, which is not needed.

You want to receive data, not a script to execute. JSONP is a trick to bypass the inability to make cross-domain requests if the remote server does not allow it; however, Chrome extensions have host permissions that bypass cross-domain restrictions.

Add cross-domain permissions for the API you're using.

  "permissions": [
    "activeTab",
    "https://ajax.googleapis.com/*",
    "https://api.twitch.tv/*"
  ]

Call the API without the callback parameter:

$.getJSON("https://api.twitch.tv/kraken/streams/"+"NameOfStreamer", 
  function(c) {
    if (c.stream == null) {
      /*...*/
    }
  }
);

answered Apr 20 '15 at 20:24

Xan

74,770
16
179
206

So , i try this code and i don't have the same error : XMLHttpRequest cannot load https://api.twitch.tv/kraken/streams/NameOfStreamer. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'chrome-extension://ennobinmkifbonghaaoekogblngkcdja' is therefore not allowed access. – Benoit Rastier Apr 20 '15 at 20:31
In your JS file inside Document.ready function. You need to replace $.getJSON method with above code and handle success as per your requirement. – Neha Narlawar Apr 20 '15 at 20:40
Did you add the permission? Did you reload the extension afterwards? – Xan Apr 20 '15 at 20:40
Yes i did as you told me. But now i have this error :/ – Benoit Rastier Apr 20 '15 at 20:44
Triple-check your manifest. This error should not appear if the permission is added correctly. Did you forget the `*`? – Xan Apr 20 '15 at 20:44
It's good, i reloaded the extension after and it works. Thanks you !! But , another question , do you know how i can hide this code , because everybody can enter with just a right click ^^ ? – Benoit Rastier Apr 20 '15 at 20:49
Basically, you can't. It will always be accessible, unless you offload part of the logic to a remote server. See [this question](http://stackoverflow.com/questions/4426132/encrypt-chrome-extension), for instance. – Xan Apr 20 '15 at 20:52

Content Security Policy getJSON

1 Answers1