When working on a web application, my client-side (angularjs based) receives JSON data from a web service. The JSON can contain a text field with some URLs, such as:
blah blah ... http://www.example.com blah blah blah ...
To render these links as HTML, I need to replace the URLs with an HTML tag. Based on a gist post I came across, I attempted the following filter:
botino.filter('parseUrl', function($sce) {
replacePattern1 = /(\b(https?|ftp):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gim;
return function(text, target, otherProp) {
angular.forEach(text.match(replacePattern1), function(url) {
text = text.replace(replacePattern1, '<a href="$1" target="_blank">$1</a>');
});
text = $sce.trustAsHtml(text);
return text;
};
});
By using the following on the HTML page:
<span ng-bind-html="tweet.text | parseUrl"></span>
This method works successfully for me.
My concern is how secure this implementation is. Is there any risk of it being used maliciously? Can anyone suggest a better approach to solving this issue?