Extjs, Chrome Extension and Content Security Policy

Question

I'm trying to develop a Google Chrome Extension with Ext JS 5.1.0.

When I was trying to add ext-all.js into default_popup html I discovered that Google chrome extensions can no longer use dynamic script evaluation techniques like eval() or new Function(), or pass strings of JS code to functions that will cause an eval() to be used, like setTimeout().

So during the setup google chrome debugger returns the following error:

Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self' chrome-extension-resource:".
ext-all-debug.js:8742 Ext.ClassManager.Ext.apply.getInstantiator

This is the faulty piece of code

        getInstantiator: function(length) {
            var instantiators = this.instantiators,
                instantiator, i, args;
            instantiator = instantiators[length];
            if (!instantiator) {
                i = length;
                args = [];
                for (i = 0; i < length; i++) {
                    args.push('a[' + i + ']');
                }

                // The problem is here 
                instantiator = instantiators[length] = new Function('c','a','return new c(' + args.join(',') + ')');

                instantiator.name = "Ext.create" + length;
            }
            return instantiator;
        },

I have found a solution changing the content_security_policy

"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"

Adding this line into manifest.json permits dynamic script evaluation techniques (but this is dangerous).

So, I would like to preserve standard google chrome security permission. Is there is a way to workaround this problem ?

Xan Xan · Accepted Answer · 2015-04-01T11:15:45

You could take a look at the sandbox approach outlined here: Build Apps with Sencha Ext JS

It's about Chrome Apps, but the principles still apply. You can create a sandboxed page with the sandbox property in the manifest, embed it in your page, and safely communicate with it using postMessage. Sandboxed page can't run elevated-privilege Chrome APIs, making eval safer to use.

Again, there's an aptly named article in Chrome docs: Using eval in Chrome Extensions. Safely.

Extjs, Chrome Extension and Content Security Policy

1 Answers