Use dynamic event handlers on elements to prevent nonce-based CSP errors (unsafe-inline disallowed)

[stringfellow]

This is a fix for issue #373 which causes significant issues for sites requiring strict CSP settings, allowing use of a nonce in the calling script tag, which which means the attached event handlers become trusted.

I have made a start as a proof of concept and on the fields/use cases that address our needs at DemandLogic. If @vedmack approves this approach, it could be refactored to match throughout.

UPDATE: JSFiddle

[vedmack]

Hi @stringfellow

Thanks for the PR, can you post some basic jsfiddle / etc` with your PR to see how it behaves? I will try to go over it in the upcoming days

[stringfellow]

Thanks @vedmack ! Here's an example - there is a console error but the example is functional. I can't quite track down in the call stack where the console error originates from... if you have any ideas/hints from anything that might be obvious to you that isn't to me, I'd be very happy to take another look at it :)

[stringfellow]

Scratch that @vedmack! Found it, I missed one of the element setup calls (see ede114e above, and e635a59 below). New fiddle here

[stringfellow]

@vedmack we've been using this in our production code with strict CSP and all seems to be working nicely :)

[vedmack]

on it now
merged and published as a new beta
you can install it with npm install yadcf@beta

[vedmack]

@stringfellow , although it was years ago, I remember when that when I tried to use .on("click" instead of .attr("onclick", it did not work, cause the datatables were triggered first, which was resulting in a column being sorted instead of "filtered by yadcf", so I wonder why now it does work properly, any ideas?

[stringfellow]

Hmmm indeed that is a bit strange! Thanks for merging, I missed the notification somehow so will take a look at reverting to the official release ASAP. Thanks again!