How to display URLs from an HTML string in Angular Dart? - dart

I'm trying to get Angular Dart to display a link in a tag from an HTML string.
At first, I tried to just set the inner HTML of the container to be the HTML string, but that didn't work, so I then I tried to use Dart's DomSanitizationService class, but that also doesn't seem to work.
What I have so far is
Dart:
class SomeComponent {
final DomSanitizationService sanitizer;
SafeUrl some_url;
SomeComponent(this.sanitizer) {
some_url = this.sanitizer.bypassSecurityTrustUrl('https://www.google.com');
}
String html_string = '''
<a [href]="some_url">Hi</a>
''';
String get Text => html_string;
}
HTML:
<div [innerHTML]="Text"></div>
The error I'm getting is Removing disallowed attribute <A [href]="some_url">. The text Hi seems to show, but there is no link anymore.

Just as you bypassed URL sanitanization, you have to bypass HTML sanitanization as well using bypassSecurityTrustHtml to return markup.
https://angular.io/api/platform-browser/DomSanitizer#bypassSecurityTrustHtml

Related

How string variable in razor becomes the html element in java script

I've declared a simple string variable in razor page to store a dynamic id of a div.
#{
int i = 0;
string divId = "Ratting_"+#i;
}
and used it like
<div id="#divId">
Test Div
</div>
But when I'm accessing it in javascript like this
<script>
var id = #divId;
console.log(id);
</script>
It represent a html element instead of a string. I know if I put the #divId inside a '' then will put string. But my question how this #divId just identified the html element.
On browser console I'm getting this

how to add hyperlink to text in dart

I am trying to add an anchor tag to the message I want to display but I am getting an error message. Am I not doing this right?
String browserRequirementsUrl = "https://test.testing.com";
var someText = new ParagraphElement()
..innerHtml = "Link can be found <a href=${url}>here</a>[1].";
But I get an error message saying
html_dart2js.dart:3614 Removing disallowed attribute <A href="https://test.testing.com">
Any suggestions, how I can do this?
By default in dart:html, for security purposes, this is disallowed.
You can use the .setInnerHtml method:
..setInnerHtml("Link can be found...", treeSanitizer: NodeTreeSanitizer.trusted);
Note that this can potentially be insecure (i.e. inject <script> tags and such), so you can always create a custom sanitizer or validator to only allow a subset of HTML tags (such as <a>).

MVC 4 Razor view Dynamically rendering Anchor tag

Trying to render dynamic HTML consisting of anchor tags, but its not rendering correctly on browser.
Code :
#{string str = Convert.ToString(ViewBag.DynamicHTML);
Html.Raw(str)
Output :
<a href="http: www.test.com="" categories="" test Category"=""><strong>test Category</strong> </a href="http:> }
Any help will be appreciated
I guess you have some problems with proper escaping of your string. I tried the following (note that the double-quotes for the href attribute are escaped):
#{
var str = Convert.ToString(#"<strong> Test Category </strong>");
}
#Html.Raw(str)
and this wrote a valid HTML output
<strong> Test Category </strong>

What's the difference between query(#idname).innerHTML and query(#idname).text

my function look like this:
void write (String message) {
query("#status").innerHTML = message;
query("#head").text = "Click me!";
}
all of them catch id and show text to web browser.
In general browser document model, innerHtml refers to all the internal HTML, whereas text just refers to the text values of the elements. innerHtml is often used by dhtml and Ajax to change a div, where text would be just to set the text value of a single element.
This is more explicitly illustrated when getting, rather than setting, i.e.
e.g. Given:
<div id="idName">
Text in the Div
<p id="anotherId">Inner P</p>
</div>
innerHtml returns
Text in the Div
<p id="anotherId">Inner P</p>
text returns :
Text in the Div
Inner P
If you try this:
String message = """<form method="get" action="#ref"><input name="first_name"/></p><input type="submit" value="Send"/></form>""";
write (message);
then you will appreciate the difference.
The innerHTML should operate an injection of code (an html form in the example) into the HTML page.

BeautifulSoup: parse only part of the page

I want to parse a part of html page, say
my_string = """
<p>Some text. Some text. Some text. Some text. Some text. Some text.
Link1
Link2
</p>
<img src="image.png" />
<p>One more paragraph</p>
"""
I pass this string to BeautifulSoup:
soup = BeautifulSoup(my_string)
# add rel="nofollow" to <a> tags
# return comment to the template
But during parsing BeautifulSoup adds <html>,<head> and <body> tags (if using lxml or html5lib parsers), and I don't need those in my code. The only way I've found up to now to avoid this is to use html.parser.
I wonder if there is a way to get rid of redundant tags using lxml - the quickest parser.
UPDATE
Originally my question was asked incorrectly. Now I removed <div> wrapper from my example, since common user does not use this tag. For this reason we cannot use .extract() method to get rid of <html>, <head> and <body> tags.
Use
soup.body.renderContents()
lxml will always add those tags, but you can use Tag.extract() to remove your <div> tag from inside them:
comment = soup.body.div.extract()
I could solve the problem using .contents property:
try:
children = soup.body.contents
string = ''
for child in children:
string += str(item)
return string
except AttributeError:
return str(soup)
I think that ''.join(soup.body.contents) would be more neat list to string converting, but this does not work and I get
TypeError: sequence item 0: expected string, Tag found

Resources