1

I can't seem to find the solution for this anywhere. I'm making a Chrome extension for submitting data to another service and its functionality is based on a third-party API that is located on a secure url. The problem is that I can't get the https url to work and I'm getting this error instead:

Refused to load the script 'http://app.something.com/api/v1/idea/create?apikey=...&summary=test&_=1376649061760' because it violates the following Content Security Policy directive: "script-src 'self' https://app.something.com".

Permissions for https urls are added and the content_security_policy is defined in the manifest.json. Although I'm not entirely sure if the latter is defined correctly.

manifest.json

"permissions": [
     "contextMenus",
     "tabs",
     "storage",
     "http://*/*",
     "https://*/*",
     "<all_urls>"
 ],

"content_security_policy": "script-src 'self' https://app.something.com; object-src 'self'",

popup.js

$('#save').click(function(event) {
    event.preventDefault();
    var apiUrl = 'https://app.something.com/api/v1/idea/create?apikey=';
    var apiKey = localStorage.getItem('apiKey');
    var summary = document.getElementById('summary');
    var title = document.getElementById('title');
    $.ajax({
        url: apiUrl + apiKey,
        type: 'POST',
        dataType: 'jsonp',
        data: (function(title, summary) {
          var data = {};
          if(title) data["title"] = title;
          if(summary) data["summary"] = summary;
          return data;
        })
        ($("#title").val(),$("#summary").val()),
        success: function (data) { 
            ... 
        }

popup.html

<form action="" class="apiform" id="api">
    <input type="text" id="apikey" placeholder="Please enter your API key ...">
    <button type="submit" id="saveKey" form="api" disabled>Save</button>
    <a class="hint" href="#">Need help generating your API key?</a>
</form>

<form action="" class="idea" id="idea">
   <p class="label">Enter idea summary</p>
    <textarea name="summary" id="summary" rows="5" required></textarea>

    <p class="label">Name your idea <span class="hint">(optional)</span></p>
    <input type="text" name="title" id="title">

    <div class="buttons">
        <button type="button" class="secondary" id="cancel">Cancel</button>
        <button type="submit" class="primary" id="save" disabled>Save</button>
    </div>
</form>

<script src="jquery.min.js"></script>
<script src="popup.js"></script>

</body>

My question is:

Can I get around this using $.ajax or is there another (better) way to avoid this problem?

dTilen
  • 97
  • 2
  • 12
  • Don't use JSONP, but just JSON. – Rob W Aug 16 '13 at 11:21
  • possible duplicate of [Get JSON in chrome plugin](http://stackoverflow.com/questions/11842954/get-json-in-chrome-plugin) – Rob W Aug 16 '13 at 11:21
  • @RobW I get the `x.support.cors.e.crossDomain.send` error after replacing `jsonp` with `json` – dTilen Aug 16 '13 at 11:37
  • Show the code that produces that problem. – Rob W Aug 16 '13 at 13:41
  • @RobW I added code from popup.html that shows the form for submitting entered values - apart from that, I don't think there is any other code directly related to the API.. I get the crossDomain error after replacing the `jsonp` with `json` and clicking on `#save` button - after which, the form values should be submitted to a service through an API. The complete error looks like this: http://pastie.org/8242317 .. This is my first Chrome extension and I'm still getting a hang of it, be gentle. :) – dTilen Aug 16 '13 at 14:23
  • "Bad Request" indicates that you're actually able to talk with the server. Make sure that your use of the API is correct. Read the documentation associated with the web service, and check whether the created request matches the specification (via Network tab'). – Rob W Aug 16 '13 at 14:27
  • @RobW Awesome, got it working now, thanks! I didn't read API's documentation carefully enough and so the url wasn't structured properly. One more thing, even after API's successful call, the jQuery ajax will return the `error:` message instead of the `success:` one, why's that? – dTilen Aug 16 '13 at 16:21
  • Status code 400 indicates failure, so jQuery's error handler is triggered. See jQuery's source code: https://github.com/jquery/jquery/blob/338e48aea5c047486a410c8938fcfd8af2f0c060/src/ajax.js#L535-L536 – Rob W Aug 16 '13 at 16:24

0 Answers0