How to fix console error " Refused to run the JavaScript URL..."

[yuri]

<a role="button">Action</a>

[telecastg]

If you encounter the console log error: " Refused to run the JavaScript URL because it violates the following Content Security Policy directive: "default-src 'self" it is very likely caused because modern browser security policy prohibits calling javascript code directly from html.

In my case, I had an <a> element that was being used as a button to call a javascript function (old coding habit) and the browser kept on throwing the error every time I clicked on the <a> element, so I substituted the <a> element with a transparent borderless <button> element and changed the event catching function in the template's view as sown below.

BEFORE:

custom/modules/data-visualization/res/templates/instruments/progress-cards.tpl

<a href="javascript:" class="card-link" data-criteriavalue="{{{categoryValue}}}">
    <span class="card-icon {{categoryIcon}} icon-{{categoryClass}} float-right"></span>                                    
 </a>​

client/custom/modules/data-visualization/src/views/dashlets/instruments/progress-cards.js

events: {        
        'click a.card-link': function(e) {
            // run my code in response to the clicking event  
        }​
}

AFTER

custom/modules/data-visualization/res/templates/instruments/progress-cards.tpl

<button class="card-link" data-criteriavalue="{{{categoryValue}}}" style="background-color:transparent;outline:none;border:none;">
    <span class="card-icon {{categoryIcon}} icon-{{categoryClass}} float-right"></span>                                    
</button>​

client/custom/modules/data-visualization/src/views/dashlets/instruments/progress-cards.js

events: {        
        'click button.card-link': function(e) {
            // run my code    
        }​
}