AngularJS code:
$scope.checking="<div style="color:red;">check</div>";
HTML code:
<p ng-bind-html="checking"></p>
so i used $sanitize for this one and the ng-bind-html directive to get the job done.
So the result in html page is:
check
and the above should come in red color
i got the output but the string 'check' does not come in red! the style tag is ignored! how can i do it? do i use interpolate?
Any way to do it? hopefully its simple... AngularJS experts please help!
$sanitize Sanitizes an html string by stripping all potentially dangerous tokens.
So do use $sce service method to make it trusted html using trustAsHtml method.
$scope.checking= $sce.trustAsHtml("<div style="color:red;">check</div>");
Related
The goal
The goal is to build a minimalistic wysiwyg editor in a text area. Retrieving a string from a network call, an interaction will add an `anchor` tag around selected text, and being able to send that (unescaped!) string over a network call.
The question is around Angular's built-in security measure to escape or ignore HTML tags.
Expected result:
before: Textarea value is set to this string
after: Textarea <a>value</a> is set to this string
However, angular (11) is automatically escaping / ignoring the HTML.
I've found and tried several solutions that use the [innerHTML] directive rather than [(ngModel)] directive. But since I'm working with two-way data bindings, this did not cut it.
If anyone knows a way to nudge angular to ignore this html sanitization for a single input field, I look forward to read about it
Thanks in advance
You need to use DomSanitizer (inject it) and do something like following:
this.sanitizer.bypassSecurityTrustHtml(value)
I'm not sure about how exactly are you planning on sanitizing the output (or for that matter, input), but have a look at https://angular.io/api/platform-browser/DomSanitizer#bypasssecuritytrusthtml
<div id='app'>{{ userContent }}</div>
In userContent, if a line starts with - I want to style only that line red. I can modify userContent data in js with the class for those lines and use v-html but then I lose XSS protection. Is there any way to have XSS protection with Vue.js but also be able to style the userContent?
I dont think this is possible without creating new elements from the user provided string.
You could parse the string yourself using a regular expression to match the lines starting with a hyphen, something like (?<=\-)(.*?)(?=\n) or \-(.*?)\n, wrap that content in a new element with a class, and then style it, but you would then need to inject that back into the html, which I believe would then open you up to XSS, same as with v-html.
To my knowledge and after a quick search there doesnt seem to be any way to do this purely with CSS.
I want to hide a div unless the div has received data to the local variable. I have this at the moment:
div#cost
p You earn #{cost} a day!
But it displays on the page. How do I hide it until it receives the data? Im confused about Jade's if/else syntax
-if (cost)
div#cost
p You earn #{cost} a day!
First of all, the - means that it is unbuffered Javascript code. Meaning this will not get rendered in the final version of the template. If you would want that, you should use a script tag like so: script..
Second, the if-statement will check if cost is not equal to null or undefined. When it doesn't exists, the code inside the if-statement will be skipped.
The above code will result in the following HTML if cost is not equal to null or undefined:
<div id="cost">
<p>You earn ... cost a day!</p>
</div>
What you are trying to achieve is not possible.
jade/pug is a template engine, you can give placeholder variable, perform loops, conditions etc but your browser does not understand jade/pug it understands only HTML, which means your template will be converted to a static HTML content before being displayed.
The if/else block decide what is going to be part of the generated HTML file, once the file is generated jade/pug does not have any control over it.
If you want to dynamically control your DOM you can use a web framework such as Angular, Vue, React or you can do DOM manipulation using jQuery or by hand with regular Javascript.
I am learning about XSS (for ethical purposes), and I was wondering how to execute some JavaScript code without using <script> tags. This is within the HTML tag:
"The search term" <p> *JavaScript here* </p> "returned no results"
For some reason, the script tags are not working.
Try putting in different types of strings with special characters and look if any of these get encoded or outputed. (I personaly use '';!--"<XSS>=&{()})
Now you have three options:
Inside a HTML Tag: The <> won't matter, because you are already inside a HTML Tag. You can look if this Tag supports Events and use some kind of onload=alert(1) or other event. If <> is allowed, you can break out and create your own tag '><img src=0 onerror=alert(1)>
Outside of HTML Tag: the <> are important. With these you can open a new Tag and the whole world is below your feet (or so...)
Inside Javascript: Well...if you can break out of a string with '", then you can basically write ';alert(1)
Craft your XSS accordingly to your encoded characters and the surrounding of where the string get's outputed
<XSS> disappears entirely: the application uses some kind of strip_tags . If you are outside of a HTML Tag and no HTML Tags are whitelisted, I unfortunatly don't know any method to achieve an XSS.
Crafting your own payload
There are various methods to achieve this and too much to name them all.
Look on these two sites, which have a lot of the methods and concept to construct your own.
It comes down to: What the page allows to go through.
https://www.owasp.org/index.php/XSS_Filter_Evasion_Cheat_Sheet#XSS_Locator_.28short.29
https://html5sec.org/
You can use the onclick attribute that is presented in HTML elements so you can create something like this:
"The search term" <p> Click me to see the JavaScript work! </p> "returned no results"
Now when clicking on the element the JavaScript will be executed.
Another one was mentioned at: https://stackoverflow.com/a/53430230/895245
asdf
Works on Chromium 81.
More important perhaps is the question of how to sanitize against it, see e.g.:
How to prevent XSS with HTML/PHP?
How to sanitize HTML code in Java to prevent XSS attacks?
Is using jquery parseHTML to remove script tags enough to prevent XSS attacks?
So I am wondering how to compute HTML in an AngularJS object (Like this: {{names}}) but I have an '<a>' element inside the object.
It comes out like this:
link text
I want this: link text
I want the links in this page to be the ones.
Im pretty sure the answer you are looking for can be found here ng-href will allow you to use the {{}} syntax to dynamically generate a url from your angular controller.
I think you need something like this <div ng-bind-html="name"></div>.
Note: you may need to do an '$sce.trustAsHtml()' if your HTML contents contain links. But be sure that what content goes in the HTML is safe before doing this. See more details Here