My site has user generated content. I noticed that if the user has quotes in some text and later I displayed that text in an HTML attribute, the layout would get screwed up in IE.
Hello
However, if I had generated the same anchor with Javascript (Prototype library), the layout would not be screwed up in IE:
$$('body').first().appendChild(
new Element(
'a', {
title: 'user "description" of link',
href: 'link.html'
}
).update('Hello')
);
Why is this so? The JS and the plain HTML versions both have the same intended result, but only the JS doesn't screw up IE. What's happening behind the scenes?
BTW, I do strip_tags() and clean XSS attacks from all user input, but I don't strip all HTML entities because I use a lot of form text input boxes to display back user generated text. Form elements literally display HTML entities, which looks ugly.
You need to escape all output that is user-specified (using entities). The DOM-methods do that automatically.
I don't know how you are processing the user generated content, but you could use a replace function to clean up the input something like string.replace("\"", "")
The answer to your question: 'Why is it so' is because in your JavaScript example set the title attribute with single quotes. So the double quotes in the user generated string are already escaped.
In you A tag example, single quotes around the text you use in the title attribute may be a way to solve the rendering problem.
However, Your HTML attributes should be in double quotes, so you would be better off using entities, as suggested by #elusive in his answer.
Related
I have an application which help our user to format the email template. A sample email template looks like this:
Dear <FirstName> <LastName>:
Thank you for your entry <Title> and your order number is <OrderID>....
These are saved in our database as Text. The issue is when i try to load this text in simple Textarea it works fine when i try to display this text in TinyMCE editor textarea it cuts off when it see the first "<" and display something like this:
Dear :
Thank you for your entry and your order number is ....
TinyMCE dose not render the tags. i dont know how to render the custom tags and they are not <abc> </abc> tags. Our system will replace the "<SomeValue>" with the actual value based on the tag and send the email to the client.
I tried replacing the "<" and ">" to "<" and ">" and its not working. I also tried them replacing it to "<code><" and "></code>" before i bind the textarea but that is not working either. I have added "code" plugin while declaring my TinyMCE in javascript. Do i need anything else, any specially "entity_encoding"? I tried "raw" and "html" nothings works.
here is my javascript
<script>
tinymce.init({
selector: '#mytextarea',
entity_encoding: "html",
plugins: "code",
toolbar: 'code'
});
</script>
Any help is appreciated as i have spend two days searching the web and trying bunch of things.
If you want TinyMCE to treat these elements like HTML tags you need to define them as custom tags:
https://www.tiny.cloud/docs/configure/content-filtering/#custom_elements
An alternative which may take less effort to setup is to use another syntax (e.g. {first_name}) along with marking that text as non-editable so that TinyMCE treats the entire string like one "character" in the UI.
In my MVC web application, I have a text area inside View, in that user will put HTML text so in that text, I want to replace html tags with my own custom tags.
For Example:
HTML tag:
<input type='text' name='MyList.First_Name' data-val='true' data-val-required='Please enter first name' />
Replace with:
[~TextFieldTag|MyList.First_Name|||0|data-val=>true|data-val-required=>Please enter first name|~]
Can anyone suggest what is the best approach to do this?
I was going to recommend a simple string replacement at first, but given the seemingly complicated nature of your replacements, that might not be the best approach.
Probably the best approach would be to take the HTML, convert it to DOM elements, which can be done simply by throwing it into an elements innerHTML:
document.querySelector('button').addEventListener('click', () => {
document.querySelector('#renderSpace').innerHTML = document.querySelector('textarea').value;
});
Add some HTML:
<textarea></textarea>
<button>Press Me</button>
<div id="renderSpace"></div>
You can position the area you render it inside of off-screen so users don't actually see it.
From there, I would walk the DOM tree (basically, start at the root, then look at all of its children, then their children, etc., recursively), reading off any properties that you deem appropriate and then writing your string replacement as you go along.
That does require that they have entered valid HTML (which is generally a requirement, but can be difficult to rely on users to enter), so you'll want to have some good, user-friendly, error handling in there.
I've been trying to do something simple, i think, let me explain:
I have an BPMS software where a send an e-mail at the end of the process, this e-mail is an HTML page that i created, inside the HTML page we have some identifying codes that get a field value from an previously form, some strings. The problem is, when i transfer that value to the HTML page, obviously the "Enter" key doesn't work like the "br" tag, so i made a simple javascript to replace the "enter" for the "br". It worked, but when i send the e-mail my ID is changed and they put an "x_" prefix, so there goes my question.
Can i stop it or there is some other way to do it?
The code is below:
<p id="informacoes">
TEST
TEST
</p>
<script>
var strMessege = document.getElementById('informacoes');
strMessege.innerHTML = strMessege.innerHTML.replace(/(?:\r\n|\r|\n)/g, '<br />');
</script>
It seems like your end goal here is to retain original line breaks present in the source code. I think your best bet would be to address this using CSS.
Take a look at the CSS property white-space, MDN: white-space property
By default, CSS collapses white space (e.g. multiple non-breaking ("regular") spaces, tabs, and newlines) into, effectively, a single regular space. In your example, the line breaks that you see in the source code are being collapsed and so they will not be rendered by the browser or email client.
Try using CSS to set a different white-space property, like
#informacoes {
white-space: pre-line;
/* depending on your use case,
a different value might work better */
}
Property values other than white-space: normal (which is the default) will change whether and how white space, including new lines, are collapsed when rendering from the source code to the screen.
I know there are a lot of JavaScript escaping questions, but nothing seemed to fit my needs.
I have textarea elements being dynamically displayed on a JSP. In the case of invalid form submits, I need to repopulate these fields with the values the user entered. I am doing this like so (note: simplified version):
var textareaBox = document.getElementById("myTextArea");
if (textareaBox) {
textareaBox.value = '${myForm.myValue}';
}
Everything works fine until the user enters a value in the box that contains special characters. I've tried using the escape and unescape JavaScript functions individually and combined to no avail.
Does anyone know how I can handle these special character values? Note that I obviously do not want the escaped text in the textarea as this would not look good to users.
Use JSTL's <c:out> tag to escape it and assign it as innerHTML of the text area:
textareaBox.innerHTML = '<c:out value="${myForm.myValue}" />';
But why don't you just display it in textarea's body directly without the need for JS?
<textarea id="myTextArea"><c:out value="${myForm.myValue}" /></textarea>
The <c:out> (and its EL function counterpart fn:escapeXml()) escapes XML special characters.
See also:
Not able to display special characters properly in a JSP page
I have a form with several textarea elements. User enters data and submits the form. On the next page it shows submitted text as static text - in p tags. Obviously New Line and multiple paces get ignored and everything just shows in one line.
I can do some preprocessing like replacing New line characters with "br/" and spaces with . but I was wondering if there is a standard solution to that either on server side (C#) or client side (javascript)
Since the data is preformatted (and this isn't just a matter of presentation), the pre element would be suitable (you will still need to replace <, & and friends with the appropriate entities).
Apply CSS white-space: pre; on the <p> element. This way any whitespace inside the element will be preserved.
Actually, I ended up replacing new line symbol with [br/] and it works very well.