in my JSON string (from the server response) I have a HTML tags, eg abc<br/>dd. That string goes to the DOM element as its content.
How to display it as a proper HTML, instead of raw string ?
You'll need to set it as the HTML rather than the text. Using DOM directly, you'd set element.innerHTML = myValue;. If you're using jQuery, you'd use $('#myElement').html(myValue);.
Related
I am trying to sanitize a html page in spring boot using Jsoup. I added head, html and body tag in the allowed tags in the following way.
Safelist safelist = Safelist.relaxed();
safelist.addTags("html", "head", "style", "body", "title");
in the documentation it says that this should work.
The cleaner and these safelists assume that you want to clean a body fragment of HTML (to add user supplied HTML into a templated page), and not to clean a full HTML document.
**If the latter is the case, either wrap the document HTML around the cleaned body HTML, or create a safelist that allows html and head elements as appropriate.**
When I pass the string
String s = "<html><head><title>Title of the document</title></head><body><p>some text</p></body></html>";
to Jsoup.clean() method:
Jsoup.clean(s,"",safelist,new Document.OutputSettings().prettyPrint(false))
I get output as:
<body><title>Title of the document</title><p>some text</p></body>
what I want is:
<html><head><title>Title of the document</title></head><body><p>some text</p></body></html>
Thanks in advance.
I have a sort of strange use-case in Angular 2 where I have some content that contains regular html tags as well as custom html tags. I want to render the regular html tags and show the custom html tags as plain text. For example
the <CUSTOM_TAG>boy</CUSTOM_TAG> went to the <b>store</b>
should have <CUSTOM_TAG>boy</CUSTOM_TAG> appearing as plain text just as you see it above, however <b>store</b> should appear as store i.e. the bold tag is actually rendered.
When I try the usual way of inserting html i.e.
<div [innerHtml]="myHtml"></div>
I get a sanitization error because of the custom tag. When I fix the sanitization error as was done here it just strips out the custom tags which I also don't want. Is showing the custom tags as plain text and rendering the regular html tags possible?
If all the possible custom tags are known, you can encode them before passing the string to the [innerHTML] binding. The method encodeCustomTags in the following code snippet uses a regular expression to replace <customTag> with <customTag>:
private customTags = [
"CUSTOM_TAG",
"otherTag",
];
myHtml = this.encodeCustomTags("the <CUSTOM_TAG>boy</CUSTOM_TAG> went to the <b>store</b>");
private encodeCustomTags(html: string): string {
let regex: RegExp;
for (let tag of this.customTags) {
regex = new RegExp(`<(/?)${tag}>`, "gi");
html = html.replace(regex, `<$1${tag}>`)
}
return html;
}
See this stackblitz for a demo.
I have a string, read from a database, that contains HTML that I want to output. Despite applying HttpUtility.HtmlDecode(), the View always renders the string as encoded HTML (i.e. <SPAN> instead of <SPAN>).
I am using:
string test = WebUtility.HtmlDecode(myStr);
<span>#test</span>
I have tried:
string test = HttpUtility.HtmlDecode(myStr);
<span>#test</span>
<span>#HttpUtility.HtmlDecode(myStr)</span>
Use Html.Raw()
#Html.Raw("<span>Hello</span>")
All the output from helpers and other elements in Razor are put through HttpUtility.HtmlEncode, unless they implement IHtmlString. But your best option here is using Html.Raw()
You need to use #Html.Raw:
#Html.Raw("<h1>Header</h1>")
Will output the text Header.
Try this helper method
#Html.Raw(myStr)
How can I set the title attribute of an HTML tag via knockoutjs in a way that will cause any HTML entities in the tag contents to be evaluated and displayed (i.e. not escaped)?
Example:
<div data-bind="attr: { title: titleObservable }"></div>
In the above example, if titleObservable contains an HTML entity, it will not be rendered, rather the entity name will be displayed. See this fiddle for a working example. Notice that when you hover over the div, the title text contains ' instead of the apostrophe symbol.
I know that when setting the contents of an HTML tag with the knockoutjs text binding that HTML is escaped for security reasons (see this thread). I am assuming that this is what is happening to the entity in my title attribute. I also know that I can just embed the apostrophe directly into the title attribute, but I would like to know if there is a way that I can do this with the HTML entities (due to certain limitations on the project I am working on).
The only way to use HTML entities within Javascript (which Knockout bindings use) is through innerHTML. All other access to the DOM uses UTF-8 text.
I suggest that you update your code to use plain text within your model and only use HTML entities within actual HTML documents. But if you cannot do so, you can use a custom binding handler that converts from HTML to text before setting the DOM property. Here's one I just made that sets the title.
ko.bindingHandlers.myTitle = {
update: function(element, valueAccessor) {
var value = ko.utils.unwrapObservable(valueAccessor());
var d = document.createElement('div');
d.innerHTML = value;
element.title = d.innerText;
}
};
Example: http://jsfiddle.net/mbest/TMSHB/2/
I don't know if I'm trying to do something against the very nature of SafeHtmlBuilder. The thing is that I'd like to put html code (for instance, an < a > tag) in a div and make it safe. So here is my code:
SafeHtmlBuilder builder = new SafeHtmlBuilder();
builder.append(TEMPLATES.diagramHeader(
BasicConstants.diagramHeaderId + "description",
newBox.getDescription());
newDiv.setInnerHTML(builder.toSafeHtml().asString());
And my template:
#Template("<div id=\"{0}\">{1}</div>") /* Description */
SafeHtml diagramHeader(String idDesc, String description);
When getDescription() returns a string with html code (e.g., an < a > tag) and the contents of newDiv are rendered, I don't see the hyperlink, what I see is the HTML CODE of the hyperlink.
I would like to see the hyperlink, how can I do this? (I am willing to sacrifice HTML's safety for the cause).
Thanks!
If the description argument to the template can contain markup, then it should be of type SafeHtml.
You'd then use SafeHtmlUtils.fromTrustedString(newBox.getDescription()), as you're trusting newBox.getDescription() to be safe.
As a side note, I don't understand why:
you use a SafeHtmlBuilder to append() only once
you use setInnerHTML instead of setInnerSafeHtml (maybe you're not using GWT 2.5?)