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?

4

0 回答 0