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

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.

Related

Angular: How to implement ng-include like functionality in Angular 5?

Is there any functionality to render html file dynamically inside a components template based on the path? I have the path to local html file now I need to display the content of it inside a components template. In Anular 1.x we had ng-include, any similar functionality in Angular5?
<div class="row blogdetail-container">
{{blogSelected.description}} // currently interpolates the path
</div>
variable blogSelected.description contains the path to html file and I want to replace its content here.
Okay so the only reasonably straight-forward way I can think of to do this is to use an http request to get the contents of the html file then use that in the [innerHtml] attribute.
private dynamicTemplate: any = "";
http.get(blogSelected.description).map((html:any) => this.dynamicTemplate = sanitizer.sanitize(html));
then use
<div class="row blogdetail-container" [innerHtml]="dynamicTemplate"></div>
NOTE 1: remember to include http as a dependency for this component.
NOTE 2: remember to include sanitizer as a dependency for this component
NOTE 3: remember to validate blogSelected.description before calling the http request to check it's actually a valid URL.

Render html tag from string

I have some values as amount like 1000, 2000, <b>3000</b>, <4000>, <b>5000</b> inside JSON as an API response. I want to render this response inside a table. So I tried ng-bind-html. BUT it is showing only the value which are having tags like 3000,5000. I want to show all values , 1000,2000,4000 as a plain string and 3000,5000 in BOLD/or any other HTML tag.
angular.forEach($scope.arr2.test,function(item)
$scope.res=$sce.trustAsHtml(item.amount);
return $scope.res;
});
On HTML side, I have something like this
<td id="price" class="edit" ng-repeat="pro in d.procedure" ng-bind-html="valueCheck(d._id,pro._id,hos._id)"></td>
You can use ng-bind-html and ng-bind-html-unsafe for this. But please be mindful of the security concerns here.
You can find more details here
Do make sure you sanitize your strings, to prevent security vulnerabilities
First of all you need to download the ng-sanitize js
https://docs.angularjs.org/api/ngSanitize
and then inject ng-sanitize to angular module.
then you can use ng-bind-html and ng-bind-html-unsafe
you can use ng-sanitize module for the same - see here
var app = angular.module("myApp", ['ngSanitize']);

Bind Data to Template Defined in <script> Tag in AngularJS

I am trying to bind data to angular template. But I'm facing the following issue.
I am using $templateCache to retrieve the template but I cannot find data into the template.
$templateCache.get('q1.index.html');
Now, I am also trying to do $compile($templateCache.get('q1.index.html')); but I am getting Error: [jqLite:nosel] http://errors.angularjs.org/1.3.14/jqLite/nosel error.
Can someone please let me know what I am doing wrong & how can I resolve it.
You need to use this format for your <script> tag
<script type="text/ng-template" id="templateId.html">
<p>This is the content of the template</p>
</script>
then somewhere else you can retrieve with $templateCache
$templateCache.get('templateId.html')
Or via ng-include
<div ng-include="'templateId.html'"></div>

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.

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

Categories