Change all onclick to event listeners

user_4004614 0
Viewed 303

We recently introduced the nonce content security policy in our software. The problem is that we have hundreds of HTML elements which execute inline Javascript with onclick events and we don't want to accept 'unsafe-inline' anymore.

Is there any way of getting all the elements from a page with onclick attribute set, read the code that they execute it and add something like

$(element).click(function(){
   doAction();
});
nonce content-security-policy jquery javascript
1 Answers

The onclick attribute is executed before any other click event handler in your JS.

function doSomething() {
  console.log('I do something')
}

var allElements = document.getElementsByTagName('*');
for (var i = 0; i < allElements.length; i++) {
  if (typeof allElements[i].onclick === 'function') {
    allElements[i].addEventListener("click", function(e) {
      console.log('Before I do something');
    });
  }
}
<div onclick="doSomething()">Click me to doSomething</div>

A trick workaround would be doing something like this :

function doSomething() {
  console.log('I do something')
}

var allElements = document.getElementsByTagName('*');
for (var i = 0; i < allElements.length; i++) {
  if (typeof allElements[i].onclick === 'function') {
    allElements[i].addEventListener("mousedown", function(e) {
      console.log('Before I do something');
    });
  }
}
<div onclick="doSomething()">Click me to doSomething</div>

user_99424180
Related