Reputation: 23211
I have an AngularJS component which loads HTML into its scope and uses ng-bind-html
. I've noticed that <script>
tags are not executing.
How can I get this example code to alert?
app.component('myComponent', {
bindings: {
file: '<'
},
controller: function($http, $sce) {
var $ctrl = this;
$ctrl.onChanges = function(changes) {
$http.get($ctrl.file).then(function(response){
$ctrl.html = $sce.trustAsHtml(response.data);
});
};
},
template: '<div><div ng-if="$ctrl.html" ng-bind-html="$ctrl.html"></div></div>'
});
The $http
data that is being returned is:
<div> I am html <script>alert('I am a script')</script></div>
Or, what if I wanted to have a controller reference in the HTML?
<div ng-controller="myController"> I am html</div>
Upvotes: 1
Views: 314
Reputation: 2439
Behind the scenes, $http.get
is simply using XMLHttpRequest. Due to security constraints, and namely cross-site scripting, scripts added to the DOM dynamically (e.g. added after an XMLHttpRequest) do not execute. Hence, the only way to execute the script within your HTML is to find the script tag in the result, then call eval()
on the contents.
Upvotes: 1