We Keep Coding

ng-bind-html doesn't prevent cross site scripting

I used ng-bind-html in order to prevent cross site scripting,
read about sanitize and found this discussion and another good discussion.
Although, i did't work for me, can you please help me in figure out why?
HTML:
<p class="big-text" ng-bind-html="to_trusted(message)">
JS:
$scope.to_trusted = function(html_code) {
return $sce.trustAsHtml(html_code);
};
when i'm adding the following line
<img src="x" onerror="alert('cross')">
and adding it to a message i can see it rendered in the DOM, and when i'm refreshing the page i can see the message.
and the popup is shown:
can you please tell me what am i doing wrong?

First of all, it's not XSS on its own.
Second, $sce.trustAsHtml does exactly the opposite of what you thought - it, in fact, instructs Angular to "trust" that the HTML is safe - not to sanitize.
To sanitize, you need to add ngSanitize as a dependency to your app, and ng-bind-html directly to html_code (without to_trusted).
angular.module("myApp", ["ngSanitize"])
.controller("MainCtrl", function($scope){
$scope.html_code = '<img src="x" onerror="alert(\'cross\')">';
});
And in the HTML:
<div ng-bind-html="html_code"></div>

After using Sanitize i change my code and used getTrustedHtml instead trustAsHtml, it runs the sanitize on controller.
$scope.to_trusted = function(html_code) {
return $sce.getTrustedHtml(html_code);
};
And it solves my issue.

src stripped from json html data when using angular.js and angular-sanitize.js

I'm an angular noob here... but enjoying figuring it out. I have simple json file containing text like so:
"gettingstarted":{
"title":"Getting Started",
"content":"<img ng-src='images/pageone-snorkeler.png' width='150' height='107' alt='Snorkeler' /><p>Getting Started...... and a lot of other html in here...</p>"
},"etc..."
I am trying to load images into the rendered html, however, angular seems to be stripping the src and ng-src from my html.
My page.tpl.html file looks like so:
<h1 ng-bind-html="page.title"></h1>
<div ng-bind-html="page.content"></div>
I am loading / using:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-route.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-sanitize.min.js"></script>
I can see all the html render in the page correctly from the json data, however, not the image. It is rendering like so:
<img width='150' height='107' alt='Snorkeler' />
What am I missing to get images to load in my html?
EDIT::::
Looks like I needed to word my question different... I found the answer here: ng-bind-html does not load image src
ng-bind-html-unsafe
...which isn't working for me... or use the fully resolved url: http://superraddomainname.com/image/image.png for example.

ng-bind-html-unsafe has been removed in angular 1.2. What you've done with ng-bind-html should work, you have to make sure you add ngSanitize as a dependency in your app. For example...
angular.module('myApp', ['ngSanitize']);
Demo - Fiddle

Replace string in value from an JavaScript object

I have a JSON file which contains multiple <br /> tags. The file is parsed using JSON.parse(json) into an object. Because I bind the data with AngularJS and ng-repeat I don't want that the strings have any HTML tags and replace it with a new line \n. How can I replace all tags? It seems to me that replace() only works with strings.
Thanks for your help!
JSON example
{
"title": "Title",
"description": "This<br />is<br />a<br />description."
}
JavaScript
var retrievedObject = JSON.parse(json);
$scope.data = retrievedObject;
HTML
<div ng-repeat="item in data">
{{item.description}}
{{item.description}}
</div>

You could just replace it before you parse the string
var retrievedObject = JSON.parse(json.replace(/\<br \/\>/g, ''));
A better option would be to parse the strings as HTML and extract the text without the tags, not using a regex before you insert them in the DOM

There's two ways to do what you're looking for. One with css where you replace the br's with
\n and then in your css file give the element the white-space property of pre-wrap.
The other is angularish. Take a read of data-ng-bind-html. You'd be able to actualy have the br's outputted. https://docs.angularjs.org/api/ng/directive/ngBindHtml You would have to run it through a filter of $sce so that it's trusted but your code would be as simple as:
<div ng-repeat="item in data">
<span data-ng-bind-html="item.description | trusted"></span>
<span data-ng-bind-html="item.description | trusted"></span>
</div>
your filter for trusted would be this:
.filter("trusted", function($sce){
return function(input){
return $sce.trustAsHtml(input);
}
});

ngBindHtml will let you keep keep the <br>s and render newlines in your HTML. It will automatically sanitize your input using ngSanitize to strip out any tags are aren't in its whitelist (you have to bring ngSanitize in as a dependency)...
var app = angular.module("app", ["ngSanitize"]);
The view is as simple as...
<div ng-bind-html="item.description"></div>
JsBin
You can also use $sce.trustAsHtml() to tell ngBindHtml to blindly trust the HTML without sanitizing, but only do that if you can completely trust its content (i.e., not for things like user submitted comments, etc).

What is the way to encode json template to html with angularJS?

I'm a beginner in AngularJS and I try to render a json in html with angularJS but html tags are not encoded. Is there a way to do that with an angularJS method ?
My HTML:
<p>{{template.title}}</p>
My JSON:
{
"title":"try a <br> to break line"
}
My JS:
$http.get(JSON).success(function (data) {
$scope.template = data;
});
Unfortunately, the render display the br tag

Angular wants to bind text as text by default.
In Angular <1.2.0 you need to bind the html unsafe (this can be dangerous):
<h1 ng-bind-html-unsafe="title"></h1>
In Angular 1.2.0 you need to bind the html:
<h1 ng-bind-html="title"></h1>
Dont forget to include ngSanitize to keep your server safe.
Overall, I recommend using Angular 1.2.0 rc2 or later versions as the ngSanitize will keep you safe.

Python and Django. Remove all js from html

I want to display user typed html (from WYSIWYG).
But I have some problems with removing js from html.
Here is my view:
def bad_view(request):
# in real project we got it from user
bad_html = '<p onclick="alert(0)">:((</p><script>alert(0);</script>'
return render(request, 'template.html', {'bad_html': bad_html})
Here code in my template:
{{ bad_html|safe }}
bad_html should be like this <p onclick="">:((</p>
What is best way to remove ALL js from this html?
For removing <script> I can use regex, but what about onclick handler(and other js handlers)?
Thanks for your advices!

I recommend using the bleach python library, it is designed to handle all sorts of special cases and be a complete solution for your problem
http://bleach.readthedocs.org/en/latest/index.html

Might I suggest a prebuilt solution for django https://www.djangopackages.com/grids/g/forms/
Most have some form of filter examples included. I am actually looking into TinyMCE myself.
More info is here Using safe filter in Django for rich text fields