Google Chrome content protection policy for AngularJS click directives
I have a very interesting script and it would be great to get an idea of the same. I recently came across a new Google Chrome content security policy that does not allow inline scripts or hovering events such as onclick or ontouch inside HTML itself.In short, makes it mandatory for us to write these click handlers using javascript in a separate file.
So instead of writing something like this:
<input id="addRecordBtn" type="button" value="Add record" onclick="addRecord()">
<input id="refreshBtn" type="button" value="Refresh" onclick="refreshList()">
Eventually I added adding jquery bindings using jQuery's on function so something like below:
$(document).ready(function(evt){
$('#addRecordBtn').on('click', function(){
alert("Adding Record");
AddValueToDB();
});
$('#refreshBtn').on('click', function(){
alert("Refresh Records");
ListDBValues();
});
});
Now the above method makes sure the HTML is clean and free of any JavaScript, but it also begs me wondering how and what to do if I'm using AngularJS or something like ng-click . How to get rid of them?
<input id="addRecordBtn" type="button" value="Add record" ng-click="addRecord()">
<input id="refreshBtn" type="button" value="Refresh" ng-click="refreshList()">
How can I remove ng-click OR I am wrong in understanding ng-click. Does ng-click include Chrome Content Security Policy?
I am getting very limited documentation on this. Few ideas would be great.
Thank you, Ankit.
source to share
AngularJS and Content-Security-Policy are documented according to the ngCsp directive . This is how rules affect unsafe
Angular:
unsafe-eval
: This rule prevents applications from usingeval
orFunction(string)
generated functions (by the way). Angular uses this in its service$parse
to provide a 30% increase in speed when evaluating Angular expressions.
unsafe-inline
: This rule prevents applications from entering custom styles into the document. Angular uses this to include some CSS rules (likengCloak
andngHide
). For these directives to work when a CSP rule blocks inline styles, you mustangular-csp.css
manually reference in your HTML.
Specifically ngClick uses AngularJS expression ...
<ANY
ng-click="expression">
...
</ANY>
... and AngularJS expression doesn't need eval
and works with unsafe
Content-Security-Policy rules .
Angular does not use JavaScript
eval()
to evaluate expressions. Instead, Angular services$parse
process these expressions.
source to share