No inlined script, still getting "Refused due to Content Security Policy directive: "script-src 'self'"

StackOverflow https://stackoverflow.com/questions/17918149

Question

I'm trying to create a Google Reader-like browser action extension for Chrome, to be used with a different RSS reader I've got access to the API for. This produces X number of links in the browser action, each of which needs to open a new tab with the URL specified by the API.

However, I keep getting the following error message whenever a link is clicked: "Refused to execute JavaScript URL because it violates the following Content Security Policy directive: "script-src 'self' chrome-extension-resource:"."

I've been reading up on the error message as appearing primarily on inlined scripts, however I don't have any explicit onLoads, inlined script tags etc.

manifest.json:

{
"name": "A reader extension",
"version": "0.0.1",
"manifest_version": 2,
"description": "Desc",
"homepage_url": "homepage.com",
"icons": {
    "16": "icons/icon16.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
},
"default_locale": "en",
"background": {
    "page": "src/bg/background.html",
    "persistent": true
},
"browser_action": {
    "default_icon": "icons/icon19.png",
    "default_title": "browser action",
    "default_popup": "src/browser_action/browser_action.html"
},

"permissions": [
    "cookies",
    "https://www.a-reader.com/api/1/*",
    "http://www.a-reader.com/go?*"
]}

background-action.js

   function list() {
    $.getJSON('https://www.a-reader.com/api/current/', function (data) {
        var items = [];

        $.each(data, function (key, val) {
            if (val.idx < val.max_idx) {
                var line = "<tr class='listEntry'>" +
                    "<td> " +
                    "<a class='listLink' id='ID' data-uri='URI' href='javascript:void(0)'>BANNER</a> " +
                    "</td> " +
                    "<td> [UNREAD_ENTRIES] </td>" +
                    "</tr>";
                items.push(line.replace("ID", val.slug).
                    replace("URI", "http://www.a-reader.com/boilerplate?=" + val.uri).
                    replace("NAME", val.name).
                    replace("BANNER", val.banner.
                    replace("UNREAD_ENTRIES", "" + val.unread;
            }
        });

        $('<table/>', {
            'class': 'entry-list',
            html: items.join('')

        }).appendTo('#mainPopup');

    });
}
function newTabForEntry(entryUrl) {
    chrome.tabs.create({'url': entryUrl});
}
document.addEventListener('DOMContentLoaded', function () {
    list();

    document.querySelectorAll('.entryLink', function (entryLinks) {
        for (var i = 0, len = entryLinks.length; i < len; i++) {
            document.getElementById(i.id).addEventListener('click', function (e) {
                console.info(e);
                newTabForEntry(e.target.dataset.uri);
            });
        }
    });
});

browser-action.html

<!doctype html>
<html>
<head>
    <style type="text/css">
        body {
            max-height: 450px;
            width: 200px;
            background-color: #F6F7F4;
            overflow: hidden;
        }

        a:link {
            color: #F6F7F4;
            text-decoration: none;
            font-weight: bold;
        }

        a:visited {
            color: #F6F7F4;
            text-decoration: none;
            font-weight: bold;
        }

        a:hover {
            color: #F6F7F4;
            text-decoration: none;
            font-weight: bold;
        }

        ::-webkit-scrollbar {
            display: none;
        }

        #mainPopup {
            font-family: Helvetica, Ubuntu, Arial, sans-serif;
        }

        .listEntry {
            color: #F6F7F4;
            background-color: #483F36;
        }

        #banner {
            background-color: #483F36;
        }
    </style>
    <script type="text/javascript" src="../../js/jquery/jquery-2.0.0.js"></script>
    <script type="text/javascript" src="../../js/browser-action.js"></script>

</head>
<body>
<div id="banner">
    <img src="../../icons/reader-logo.png" width="124" height="25"/>
</div>

<div id="mainPopup">
</div>

</body>
</html>

Does any of this implicitly create an inlined script, or have I messed it up in some other way?

Was it helpful?

Solution

I had indeed messed things up a bit, although the reasons were a bit unclear. Turns out the culprit was "BANNER ". Chrome defines the javascript:void(0) call as an inlined script call. Switching the href to '#' removed the error message. The reason no tab was being opened was that attempts were made to add behaviour to components being created asynchronously in the (ajax) method getJSON(), which had not yet finished at that point. A quick move of the loop solved the issue, and things now work as expected.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top