Undefined handlers cause error when unsafe-eval is restricted by the CSP header

[KarsonAlford]

Undefined handlers (OnBegin, OnSuccess, etc.) cause a browser evaluation error when unsafe-eval is restricted by the CSP header.

If you modify all of the text in the handlers to functions instead of JavaScript code then those handlers that contain functions will no longer be blocked by the browser (window.stop [function] vs window.stop() [code needing evaluation]). However, the issue is that the handlers that are left blank will be blocked by the browser and cause an error.

Uncaught EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive:

Related to Issue #23.

[KarsonAlford]

Explanation:
The getFunction method first tries to find the function in the DOM and falls back to eval via Function.constructor. Currently if one of the handlers (OnBegin, OnSuccess, etc.) is not defined then null is passed into getFunction which is evaluated and a function created that returns null.

Possible Fix:

function getFunction(code, argNames) {
    if (!code) return function() { return null; };

Current Options:
Option 1) Add a NOOP function for all the handlers that you are not using.

window.noop = function() { return null; };

OnBegin="noop"
OnSuccess="noop"

Option 2) Replace Function.apply so that the eval is not possible. Inspired by this blog post.

Function.apply = function (element, args) {
    if (args && args.length && args.length !== 0) {
        var code = args[args.length - 1];
        if (code) {
            console.log('JavaScript evaluation prevented - ' + code);
        }
    }
    return function () { return null; };
};

[AdamWillden]

@KarsonAlford I completely agree and cannot understand why eval is used even in cases where there's nothing to evaluate.

Please @mkArtakMSFT, @javiercn reconsider your stance on this. There's no need to depreciate existing features as was described previously in order to support the avoidance of eval.

[jumpingjackson]

I tried applying the changes in #48 to my copy, but i still get CSP violation.. Its getting past the if (!code) return function() { return null; }; check.

[KarsonAlford]

Can you post your example?

This fix is to stop empty handlers causing a CSP violation. If you are getting past !code then I assume you have something in a handler that is not a function in the DOM and therefore is being evaluated.

[jumpingjackson]

Sorry l thought it was a fix for what I now know is the other bug that they said they won’t fix. I’m trying to call a function in a .js file on success and getting the unsafe eval csp error.

…

On Fri, Jul 10, 2020 at 7:08 AM Karson Alford ***@***.***> wrote: Can you post your example? This fix is to stop empty handlers causing a CSP violation. If you are getting past !code then I assume you have something in a handler that is not a function in the DOM and therefore is being evaluated. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#49 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ADMRZ3EKHYKK7WUEP4VHYSLR24HE5ANCNFSM4G77CRSA> .

[calaluis]

Explanation:
The getFunction method first tries to find the function in the DOM and falls back to eval via Function.constructor. Currently if one of the handlers (OnBegin, OnSuccess, etc.) is not defined then null is passed into getFunction which is evaluated and a function created that returns null.

Possible Fix:

function getFunction(code, argNames) {
    if (!code) return function() { return null; };

Current Options:
Option 1) Add a NOOP function for all the handlers that you are not using.

window.noop = function() { return null; };

OnBegin="noop"
OnSuccess="noop"

Option 2) Replace Function.apply so that the eval is not possible. Inspired by this blog post.

Function.apply = function (element, args) {
    if (args && args.length && args.length !== 0) {
        var code = args[args.length - 1];
        if (code) {
            console.log('JavaScript evaluation prevented - ' + code);
        }
    }
    return function () { return null; };
};

Hello dear,

First of all, thanks to find a possible solution to this big problem, for an extremely used library in ASP.NET MVC.

I can inform you that option 2 has been implemented, within which it throws the following CSP error towards the Jquery library:

Stay tuned to your comments.

[KarsonAlford]

See the JS that I am using below. It also prevents $.globalEval which I didn't document in my original post.

I hope this helps.

disableEval.js

(function ($) {
    "use strict";

    // replace apply for Function.constructor
    Function.apply = function (element, args) {
        if (args && args.length && args.length !== 0) {
            var code = args[args.length - 1];
            if (code) {
                console.log('JavaScript evaluation prevented - ' + code);
            }
        }

        return function () { return null; };
    };

    $(function () {
        $.globalEval = function (code) { console.log('jQuery evaluation prevented - ' + code); };
    });
}(jQuery));

[calaluis]

Thank you very much @KarsonAlford , it worked perfect.

Now to investigate other libraries that also give problems with the CSP, such as the BlockUI.

[KAJOOSH]

After a few years, don't you want to think fundamentally to solve this problem?