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?)
Related
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 paragraph that is enclosed in artist.bio.summary. This variable contains all the details about an artist. This is fetched from somewhere else. I am printing this out inside a p tag.
My problem is there is a link inside this p tag within a a tag.
The a tag is like this;
Read more
The p tag just prints this out rather than giving me a link to click.
What should I do to act accordingly?
I am calling this property as below:
<p>{artist.bio.summary}</p>
let artist = {
bio: { summary: '' }
};
I had set this artist.bio.summary as a string initially.
And an example string that i am getting is below:
"hello Read more there"
The above string is the content of the artist.bio.summary once i received it
This is a security issue and is not allowed by React (by default) so it's as expected to not evaluate the embedded html markup, but they have a workaround if you really want to. dangerouslySetInnerHTML
<p dangerouslySetInnerHTML={artist.bio.summary}></p>
But please read up on injection attacks so you understand the consequences before using this kind of dynamic evals.
https://www.codeproject.com/Articles/134024/HTML-and-JavaScript-Injection
From you description it seems that artist.bio.summary contains the entire content i.e Read more . In that case what you need is dangerouslySetInnerHTML
<p dangerouslySetInnerHTML={{__html: artist.bio.summary}}/>
However I would suggest you to make modifications to your data such that you aren't actually passing the HTML to the React component but creating it using JSX yourself
Suppose I have a string <span class="msg">Text goes here</span>.I need to use this string as a HTML element in my webpage. Any ideas on how to do it?
Mithril provides the m.trust method for this. At the place in your view where you want the HTML output, write m.trust( '<span class="msg">Text goes here</span>' ) and you should be sorted.
Mithril it's powerfull thanks to the virtual dom, in the view you if you want to create a html element you use:
m("htmlattribute.classeCss" , "value");
So in your case:
m("span.msg" , "Text goes here");
Try creating a container you wish to hold your span in.
1. Use jQuery to select it.
2. On that selection, call the jQuery .html() method, and pass in your HTML string.
($('.container').html(//string-goes-here), for example)
You should be able to assign the inner HTML of the container with the string, resulting in the HTML element you want.
Docs here.
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'm using WebBrowser to get source of html pages .
Our page source have some text and some html tags . like this :
FONT></P><P align=center><FONT color=#ccffcc size=3>**Hello There , This is a text in our html page** </FONT></P><P align=center> </P>
Html tags are random and we can not guess them . So is there any way to get texts only and separating them from html tags ?
you can use a TWebBrowser instance to parse and select the plaint text from html code.
see this sample
uses
MSHTML,
SHDocVw,
ActiveX;
function GetPlainText(Const Html: string): string;
var
DummyWebBrowser: TWebBrowser;
Document : IHtmlDocument2;
DummyVar : Variant;
begin
Result := '';
DummyWebBrowser := TWebBrowser.Create(nil);
try
//open an blank page to create a IHtmlDocument2 instance
DummyWebBrowser.Navigate('about:blank');
Document := DummyWebBrowser.Document as IHtmlDocument2;
if (Assigned(Document)) then //Check the Document
begin
DummyVar := VarArrayCreate([0, 0], varVariant); //Create a variant array to write the html code to the IHtmlDocument2
DummyVar[0] := Html; //assign the html code to the variant array
Document.Write(PSafeArray(TVarData(DummyVar).VArray)); //set the html in the document
Document.Close;
Result :=(Document.body as IHTMLBodyElement).createTextRange.text;//get the plain text
end;
finally
DummyWebBrowser.Free;
end;
end;
You should look at using the Delphi DOM HTML parser
If your asterisk is constant, you can simply get everychar between **.
If your asterisk is not constant you can rewrite this string and erase all tags (things who starting from < and ending with >. Or you can use some DOM parser library for it.
In essence: in general you can't.
HTML is a markup language with such a wide use and mind boggling possibilities to change the content dynamically that it is virtually impossible to do this (just look at how hard the web browser suppliers need to work to pass for instance the acid tests). So you can only do a subset.
For specific and well defined subsets of HTML, then you have a better chance:
First you need to get the HTML in a
string, then parse that HTML.
Getting the HTML can be done for instance using Indy (see answers to this question).
Parsing highly depends on your HTML and can be quite complex, you can try this question or this search.
You could use TWebBrowser as RRuz suggests, but it depends on Internet Explorer.
Modern Windows systems do not guarantee that Internet Explorer is installed any more...
--jeroen
Using Delphi HTML Component Library getting text only from HTML document is simple.
THtDocument.InnerText property returns formatted text without tags.