Question

I am learning to develop a Browser Action extension for Google Chrome, and have split up javascript functionality into multiple files. In the popup.html file, script resources are defined like

<script src="js/Identity.js"></script>
<script src="js/View.js"></script>

View.js needs to call into methods of the object exposed from Identity.js, and passes a callback function to be notified when the process is completed. However, it appears Chrome would break execution.

Refused to evaluate script because it violates the following Content
Security Policy directive: “script-src ‘self'”

From what i understand, Google states that policy is to prevent arbitrary strings to be evaluated into an executable block of logic. However I am passing actual functions between my objects so i’m not too sure what must be corrected here?

IdentityObj.Process = function (params, callback) {
  doSomeWork();
  setTimeout(callback(true), 1000); // break here
};

From the View object, an example would be

View.loginClick = function(event) {
        event.preventDefault();
        this.loggingInState();

        var emailAddr = $('#emailAddr').val();
        var password = $('#password').val();
        IdentityObj.login(emailAddr, password, this.loginCallback.bind(this));
    };

View.loginCallback = function(success) {
        if (success) { this.usageState(); }
        else { this.errorState(); }
    };

Answer 1

My colleague sported the problem and explained it, so now I understand what you were referring to.

I was executing the callback function direct in the setTimeout() definition, so setTimeout() receives the result of callback(true) instead of the callback itself. That would then require an eval and thus triggering the Chrome security policy.

The execution of callback() has to be wrapped in a function declaration.

IdentityObj.Process = function (params, callback) {
  doSomeWork();
  setTimeout(function(){callback(true)}, 1000); // break here
};