Send text with html to mandrilapp - html

I'm trying to send something like this to mandrill "the force is <strong> strong </strong> in you" so it's get rendered like "the force is strong in you" but it's not happening. I'm using mandrill template api and using handlebars.
Is there any way to achieve this? I know i could divide the text in 3 parts and put the <strong> tag directly in the template but i have lots of text and would need lots of time

I'ts a handlebars thing. The solution is using triple braces instead of double {{{variable}}} instead of {{variable}}

Related

Scraping pseudo-elements from a website with XPath

I want to extract data from a website, but it seems that the elements that I want to extract are not "accessible".I also discovered they seem to be pseudo-elements. I can se that their tags are marked with a # before in my web-inspector.
Moreover, while using XPath I can't extract the text I want to access. Their is a point in the CSS "cascade tree" when I can't extract the content of a tag, you can see it below.
Here I can extract information up to the tag 'content fond'. But when I ask for the tag "fos_comment_thread" which is the tag just below, the return is empty. And it is especially this tag which is a pseudo-element, and the following behind. However the text I want to access is even more deeper in this part of the CSS tree...
Input
reponse.xpath=('//div[class#='row']/div[#class='span9 forum']/div[class#='content fond'].extract()
Output
['<div id="foc_comment_thread"<div>']
Input
reponse.xpath=('//div[class#='row']/div[#class='span9 forum']/div[class#='content fond']/div[id#='fos_comment_thread'].extract()
Output
[]
I don't understand why I can't extract, I think it is due to the fact that the rest of my tags are pseudo-elements,but I haven't found a solution to solve the problem...
The first thing you need to do is to not using your web-inspector tool and look at the raw HTML of the website.
Web inspectors take into account the transformations made by Javascript and may show you an update HTML after Javascript execution, that scrapy obviously can't see.

ReactJS - How to render carriage returns correctly when returned in Ajax call

In ReactJS, how is it possible to render carriage returns that may be submitted by the user in a textarea control. The content containing the carriage returns is retrieved by an Ajax call which calls an API that needs to convert the \r\n characters to <br> or something else. And then, I have a div element in which the content should be rendered. I tried the following Ajax responses:
{
"Comment" : "Some stuff followed by line breaks<br/><br/><br/><br/>And more stuff.",
}
and
{
"Comment" : "Some stuff followed by line breaks\n\n\nAnd more stuff.",
}
But instead of rendering the carriage returns in the browser, it renders the br tags as plain text in the first case and \n character as space in the second case.
What's the recommended approach here? I'm guessing I should steer clear of the scary dangerouslySetInnerHTML property? For example the following would actually work but there must a safer way of handling carriage returns:
<div className="comment-text" dangerouslySetInnerHTML={{__html: comment.Comment}}></div>
dangerouslySetInnerHTML is what you want. The name is meant to be scary, because using it presents a risk for XSS attacks, but essentially it's just a reminder that you need to sanitize user inputs (which you should do anyway!)
To see an XSS attack in action while using dangerouslySetInnerHTML, try having a user save a comment whose text is:
Just an innocent comment.... <script>alert("XSS!!!")</script>
You might be surprised to see that this comment will actually create the alert popup. An even more malicious user might insert JS to download a virus when anyone views their comment. We obviously can't allow that.
But protecting against XSS is pretty simple. Sanitization needs to be done server side, but there are plenty of packages available that do this exact task for any conceivable serverside setup.
Here's an example of a good package for Rails, for example: https://github.com/rgrove/sanitize
Just be sure whichever sanitizer you pick uses a "whitelist" sanitization method, not a "blacklist" one.
If you're using DOM, ensure you're using innerHTML to add text. However, in react world, more favourable is to use https://www.npmjs.com/package/html-to-react
Also, browser only understands HTML and won't interpret \n as line break. You should replace that with <br/> before rendering.

Keep linebreaks when getting text from <textarea>

I'm building a site with Visual Web Developer with C# and HTML.
I have a page where users can write feedback about my site in a textarea tag and then submit (in the textarea they can do a line-break everywhere).
The problem is that when I get back the text they wrote it appears without the linebreaks, for example:
if the user wrote:
"Hello, my name is
Omer N."
When I get it back it will look like this: "Hello, my name is Omer N.".
How can I fix this problem?
Depends on how you are storing the values. Remember that HTML and general input from fields following the whitespace rule, it will truncate/condense white space into a single entity.
So "Wide String" = "Wide String" and:
"Multi-line
string
here" will be truncated to "Multi-line string here" as you have experienced.
This is the default behavior.
So to keep your line breaks, spacing, etc.. you need to escape it or a process of encoding and decoding, before storing it.
It is explained here:
Many newcomers to web development cannot get their head around why the
carriage returns they made in their data on input from a textarea, or from a
text file, Excel spreadsheet etc. do not appear when the web page renders.
The solution is fairly obvious once the newcomer realizes that a web
page is only the browser's interpretation of html markup, and that a
new line in html is represented by the tag. So what is needed
is a way to swap carriage returns or line feeds with the tag.
Well, a way to Replace() them, actually.
<%# Eval("MyMultiLineValue").ToString().Replace(<linebreak>,"<br />") %>
The string.Replace() method allows this, but we also need to identify
what we want to replace with the html tag. How is a new line
represented in C# or VB.Net?
In C#, it's "\r\n", while in VB.Net, it's vbcrlf. However, there is
also a language independent option that does just the same thing:
Environment.NewLine.
<%# Eval("MyMultiLineValue").ToString().Replace(Environment.NewLine,"<br />") %>
Hope this helps! :)

CKeditor rich text editor displaying html tags in browser

I've just installed CKeditor rich text WYSIWYG editor on a site I'm building and it seems to be working ok except for the fact that it inserts text into my mysql database as encoded html rather than regular html and then when the browser outputs this text it converts the encoded data into regular html that then displays in the browser showing the html tags and none of the styling!?
eg I type:
"This is text"
into the editor and it then inserts
<p>This is text</p>
into the database. Then when the page is called the browser converts the above and outouts the following on the page:
<p>This is text</p>
obviously I just want "This is text" to display on the page.
Does anyone know why this is happening/how to solve it please?
Any suggestions would be most welcome.
Cheers
If you don't want CKEditor to create paragraphs for you, set config.autoParagraph to false. Additionally you may want to change enter key behaviour with config.enterMode set to CKEDITOR.ENTER_BR.
And regarding disappearing styles...
EDIT: OK, it seems I missed your point.
So your website is displaying HTML markup instead of HTML while rendering out what you typed?
Then the problem is your server side rather than CKEditor. You can verify in your console that CKEDITOR.instances.yourInstance.getData() yields the correct, unescaped HTML:
<p>This is text</p> // Right!
If it is so, and I strongly believe it is, CKEditor's just fine and this is your server app that is converting special chars into entities (i.e. like PHP htmlspecialchars) while saving to database. You didn't mention what kind of framework/language you use there, so I can just tell you that it is to secure user input to prevent cross-site scripting, breaking layouts etc. and all popular frameworks allow you to disable that feature for a particular field. Simply refer to documentation.
Modern templating languages tend to autoescape html input. For example, in DTL it would be displayed correctly in the template by simply using
{{ object.field_name|safe }}
This is a desired action, since user input is considered untrusted and may be considered malicious.
The browser is not parsing HTML, so on the page displaying (or in the php file) try using {! !} instead of {{ }}.
If you are using laravel, then you should use {!! $variable !!}.
For Laravel 7, 8, and 9 - foreaxample if there is a varable called- $student
and student varable holds "This is Text" in paragraph you must call the varable using singla culy brace front and back, inside two

How to create readonly textbox-like structure using html (div/span) and css?

I have a web page with a read-only text box which shows some HTML code:
<input type="text" readonly="true" value="<table>...</table>"/>
There is also submit button, which causes page post back and XSS validation to trigger. I don't want to turn off XSS.
I also tried disabled="disabled", but then the user is not able to copy the text in the text box.
So I thought that using div and span which can give same look and feel would suffice and negate the need for turning off the validation. While trying this, I am struggling to restrict the string in one line. As in text box, it is a single row with column size and text is shown nicely, we can also copy text.
Is there a better solution for what I'm trying to do?
If I understand you correctly you're trying to show some example code in a web interface that is formatted for easy consumption by the end user.
As a general rule, you should wrap code snippets in <pre></pre> tags, I would then suggest having a go at using: http://alexgorbatchev.com/wiki/SyntaxHighlighter to format the code as if you were viewing in an IDE.
This will prevent you from having to turn of the XSS checker.
you could use <pre> tags
check this link