I am trying to render html string into the chat application based on Azure Communication Services. The boilerplate code is taken from Azure Samples GitHub repo https://github.com/Azure-Samples/communication-services-web-chat-hero.
I have the string in format:
"str1</br>str2</br>str3</br>".
What I want is I want to render this string as html in ChatArea component of the app so that it looks like
str1
str2
str3
I have also set SendMessageOptions.type to 'html' in sendMessageHelper method in sideEffects.ts file but still getting the output as string only. Only difference is now I am getting sanitized string without / in br tags.
Any help would be greatly appreciated.
Thanks so much in advance.
By default this sample trivially assume messages are one-line strings and react doesn't automatically handle \n characters or <br />.
To do multiline, inside ChatThread where the messages are rendered, you will want to ensure the appropriate JSX is generated:
To support multiline where lines are seperated by \n you will need to update
{renderHyperlink(message.content.message)}
to something like:
{message.content.message.split(/\n/g).map((line: string) => <p>{renderHyperlink(line)}</p>)}
More information and other solutions can be found here: How to add a <br> tag in reactjs between two strings?
To support rendering any arbitrary HTML from messages you will need to adapt this line to load the message string as html. However using arbitrarily sent html can be dangerous in an application, a malicious user could embed malicious scripts html or scripts, so avoid doing this. For more information search up Cross-Site Scripting attacks: https://owasp.org/www-community/attacks/xss/.
Related
I'm trying to record a scenario of SAP CRM.
But I have a problem due to that everytime I login SAP CRM generates a new hashed token and will be used in URL like below:
See Image 1 Here
I tried to check where is the information stored, and in firebug and I found it in DOM tab:
See Image 2 Here
Is there any way to get the value from this DOM Properties using Jmeter?
Usually the choices are in:
CSS/JQuery Extractor
XPath Extractor
Regular Expression Extractor
Choose the one, you're most familiar with. Usually it is Regular Expression Extractor, however parsing HTML with regular expressions is not a good idea, moreover you will be very sensitive to DOM changes (part of the element goes to next line, attributes change positions, etc.).
So I would recommend choosing between CSS and XPath, but choose them wisely. I.e. if the number of styles on the page is not too big - go for CSS, if there are a lot of styles but the DOM itself is not very complicated - choose XPath.
We have a requirement wherein a section of a page will be part authorable and part dynamic. What I mean by this is "You have 6 visits left out of 16." The 6 and 16 in the sentence are coming from a REST service call but the text "You have...visits left out of.." has to be authorable through dialog. Also, we are using AEM 6.
Thanks in advance
Maybe this solution will help others looking for simple placeholder text for their dialog textfields (OP not so much). Use an emptyText attribute...
<dialogText fieldLabel="AEM CLassic UI Text" jcr:primaryType="cq:Widget"
name="./nameOfText" emptyText="THIS IS THE PLACEHOLDER" xtype="textfield"/>
Perhaps you can start by extending foundation/components/text, where the user would be expected to enter a valid formatable string (i.e. "You have %d visits left out of %d").
In your component you would be implementing text.jsp therefore overriding the default behavior of foundation/components/text, in which you can do something like
<cq:text property="text" escapeXml="true"
placeholder="<%= Placeholder.getDefaultPlaceholder(slingRequest, component, null)%>"
tagName="span"
tagClass="myformatedmessage" />
You use tagName and tagClass which will wind up putting the formattable text in a <span class="myformatedmessage">...</span>. Then use jQuery to find it and populate the format placeholders after getting the data via ajax. All that jQuery code you can probably put into a clientlib folder within the same component you extended.
Based on your description, I think you are looking for replacement or substitution instead of placeholders.
"placeholder" generally refers to display text inside a form input that is displayed until the user enters data in the field (such as hint data).
You generally have 3 options for replacing parts of the data:
Server-side (prevents page from being cacheable in dispatcher). Requires parsing authored content & replace some kind of tags with desired REST data, such as "You have ${x} visits left out of ${y} total". Other ways of "tagging" substitution data could look like "You have %x% visits left out of %y%"
client-side JavaScript DOM manipulation once REST data returns. ie $el.html(newDomContentString)
client-side JavaScript templates (handlebars, dust, etc). Takes more initial setup in JS, but generally scales better.
Fortify scan caught this below error as critical. can some please help ?
switchcontent.loadpage=function(page_request, header){
var innercontent=document.getElementById(header.id.replace("-title", "")) //Reference content container for this header
innercontent.innerHTML=switchcontent_ajax_msg //Display "fetching page message"
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)){
innercontent.innerHTML=page_request.responseText
header.ajaxstatus="loaded"
}
}
what change would be needed to fix this code for avoiding XSS ? Any help is greatly appreciated. thank you.
In the responseText are HTML tags inserted or is it just text you want to insert/change? s a rule of thumb always sanitize/encode all user input and output that is generated from user input. If it's only text that you're inserting use document.createTextNode (example) and append the text to the element's needed (always encoded also), I would recomend using jQuery .text() as with pure javascript it's kind of cumbersome. If it's HTML that is needed to be inserted be sure it's not user input as this is a vulnerability. If the text needs to be from a user use a whitelist to check that the user is only writing tags that you are expecting for example <p></p>.
Fortify treats this as a vulnerability because if a user sends in the responseText <script>alert('XSS')</script> the page will render this as HTML and the script will be executed if you encode this it would just appear as text and not be executed, not only scripts can be executed but HTML will be rendered also and deform your page. You can read more in: OWASP DOM Prevention Sheet
Points:
1: ALWAYS ENCODE USER INPUT!
2: If it's just text create text nodes and append them to the element to make this easier use jQuery if possible function .text() not .html() as the .htlm() function will render the HTML.
3: If it's user generated HTML sanitize malicious tags agains a WHITELIST you can do blacklist but blacklists are not that safe as there are always tags you could forget to check against.
4: If the HTML is server generated and has not user input you should be fine.
5: Know that Fortify is just a scanning tool and it has false positives, so if you have the right countermeasures you should be XSS free.
Whitelisting: Checking agains a list of available tags. Only letting tags that you know the user can use like <p></p><br/>.
Blacklisting: Checking against a list of "not welcome" tags. This means having a list with tags you don't want to let the user use.
I have a JSP page in which I have JavaScript function that will be called when a link is clicked. Now, when the value reaches the JavaScript function, the apostrophe is encoded.
Example:
Name#039;s
Before # there is &, which originally should be:
Name's
I have used the unescape() decode function, but nothing seems to work. In the end, I had to delete the characters and add the apostrophe. Does anyone know a fix for this? Is it that JSP doesn't support encoding for &? When I was writing the same encode value in this page, it changed the symbol to the apostrophe, which is what I wanted in my code.
Built-in Javascript function such as unescape(), decodeURIComponent() has nothing to do with the string you are working on, because the one you are looking to decode are HTML entites.
There are no HTML entites decoder available in Javascript, but since you are working with a browser, if the string is considered safe, you may do the following (in JQuery, for example)
var str = $('<p />').html(str).text();
It bascially insert the string as HTML to a <p> element and then extract the text within.
Edit: I just realize the JSP output you posted is not real HTML entities; To process the example given you should use the following, add & before every #1234; and make it Ӓ:
var str = $('<p />').html(str.replace(/\#(\d+)\;/g '&#$1;')).text();
I am new to iphone development.I want to ignore CDATA tag while parsing because it consider the HTML tag following it as text.Since i want to display the content alone ,i want my parser to ignore CDATA tag.My source code is
[CDATA[<br /><p class="author"><span class="by">By: </span>By Sydney Ember</p><br><p>In the week since an </p>]].
Is there any way to ignore CDATA tag?
Is there any way to parse my source twice so it displays only the content?
Please give me some sample code.Please help me out.Thanks.
If you treat the CDATA content as XML instead of CDATA then your parser will throw an error (since your HTML is a weird mix of XHTML and HTML and is not well formed).
If you want to get the HTML, then parse the XML, extract the text content of the node, then parse that text as HTML.
There is no way to ignore the CDATA tag - it's part of the xml spec and parsers should honour it.
If you don't like the idea of this answer to your earlier question, you could get the contents of the CDATA section and parse it as XML again. However, this is highly not recommended! You don't know that the contents of the CDATA are going to be valid xml (they're probably not).
If you can 100% guarentee that the CDATA section contains the form you have above, you could probably use some string manipulation to get the data out (i.e. string replace '<span class="by">By: </span>' with '') but again, this will almost certainly break if the CDATA contents change.
Where is the xml coming from? It's a better idea to talk to owner of the service and get them to send you instead of description something like
<description>
<author>By Sydney Ember</autho>
<text>In the week since an </text>
</description>
S