How would I sanitize this string? (preferably in JQuery)? - javascript

I have a webpage where people type stuff into a text box, and it displays that text below them. That's it. There is no server side.
Let's say someone types <script src="blah">hello</script>
I want to display that as text. Not as a script, of course. How can I do that (all in javascript)?
I want to display the entire text. Don't stip the tags out.

$('div.whatever').text($('input.whatever').val());
That'll convert things to HTML entities, so they're displayed as they were typed, and not treated as markup.

If you want to display it in an element, you can use the text method. It will escape all the HTML for you.
You can see an example here.

<input type="text" onkeyup="$('#outputDiv').text($(this).val());" />
<div id="outputDiv"></div>

A quick way to sanitize any string in general with JQuery would be create a temporary element, set the text content with the text method and then retrieve the escaped text with text again.
const unsanitized = '<script>alert()></script>'
// Outputs '<\script>alert()><\/script>'
const sanitized = $("<p>").text(unsanitized).text()

Related

Load HTML content as text into div?

I'm using this code to grab html stored in a string into a div with contenteditable="true" (the string works, and if I manually place the code there it also works, but I need a way to "inject" html or whatever as text in it)
document.getElementById('content').innerHTML=txt
Problem is: It's not placing the html as text inside of it, but executing like it was part of the page. Is there a way around it? I need the HTML(javascript or whatever be written in the string) to be like text...
Use textContent instead to inject strings like this:
document.getElementById('content').textContent=txt
You should use textContent property:
document.getElementById('content').textContent = txt
for more information give a look on MDN

How should I prevent HTML from interpreting user-entered text as an entity?

I have a website where users and enter text. A user entered something "I worked on the #3&#4 valves" into an <input>. That text gets stored in a database, and displayed on screen somewhere else. My problem is that the "&#4" is being interpreted as an HTML entity or special character, and I want it to be interpreted literally.
Do I need to use Javascript to escape & from the <input>? I was hoping that <pre> would work, but it also interprets the text as a code. Again, this is user inputted text.
For example, when I run the code below, the <input> shows different text than the <p>. I want the <p> to show exactly what the <input> shows.
<html>
<body>
<input id="box">
<p id="para"></p>
</body>
<script>
document.getElementById("box").value = "something #3&#4";
document.getElementById("para").innerHTML = "something #3&#4";
</script>
</html>
Fiddle
EDIT:
I realized that I'll need both a client-side solution and a server-side solution. In one place that user-inputted text is displayed, I'm using Javascript's .innerHTML, and on another webpage, I'm echoing it with PHP.
I think your real issue is a lack of server side filtering. Given that you are having this problem, it seems very likely to me that you aren't doing any server-side input filtering/cleaning at all, which means that you are also going to be vulnerable to XSS
On the server side you should be sanitizing everything that goes back out to the client, which includes both stripping HTML tags (and also returning errors on save if people try to send up HTML tags) as well as replacing html special characters (see htmlspecialchars). The latter will convert your & into &, which will have the end result you desire: your HTML will not be interpreted as HTML special characters.
The problem with fixing this with javascript client side is that, not only do you have to do it everywhere, but you also have to remember to do it in a different way if there are cases where this same output is shown in the HTML document itself, i.e. not displayed by javascript.
In short, coming up with a coherent (and thorough) method for sanitizing user data before it goes back to the browser will fix your problem and also provide a first layer of protection against a number of malicious attacks.
Working fiddle.
Try to append the content as text not as HTML using one of the followinf methods ( innerText or textContent ), like :
document.getElementById("para").innerText = "something #3&#4";
document.getElementById("para").textContent = "something #3&#4";
NOTE : In case of server-side display you could use htmlentities($content).
Hope this helps.
document.getElementById("para").textContent = "something #3&#4";
<p id="para"></p>
Use innerText instead of innerHTML.
https://jsfiddle.net/9746ah8s/2/
You need to stop manipulating it as HTML, because text only becomes code if you do it explicitly. In a slightly modified version of your example, please compare:
var txt = "one <strong>two</strong>";
document.getElementById("box").value = txt;
document.getElementById("para1").innerHTML = txt;
document.getElementById("para2").innerText = txt;
<input id="box">
<p id="para1"></p>
<p id="para2"></p>
(In the case of <input> there's only one option because the element cannot hold HTML in the first place.)
To display &, you could replace all the & with &amp, this way you will see #3&#4 and '&#4' wont be interpreted.

displaying html tags as html in input field

Are there any possibility to do something like that?
Or how I can simulate input field with possibility input usual text and display html tags as html?
Thanks.
You can use contenteditable attribute:
http://jsfiddle.net/AnWej/
<div contenteditable></div>​
You can use the HTML5 property contenteditable, if you can use this technology.
Exemple: http://jsfiddle.net/hZWWd/
I'm sure with some javascript you can add some buttons to put in bold or else for exemple (by adding some tags), and you have your own richtextbox.
Hope I didn't misunderstood your question.

Getting the value from a TinyMCE textarea

I have a news editor for my site with which I am using TinyMCE. What I would like to be able to do is have a button (outside of the TinyMCE editor itself) that I can click to scan the textarea for any images, then list those images as options to use for a thumbnail image for said news article.
For an idea of what I mean, please see this link here: https://docs.google.com/leaf?id=0B05m73kzudwPNzUwZjkyNmItYjZkMy00NTdlLTlkNDctOGRhYThjMzNjNTM5&hl=en_US
My problem is that document.getElementById('NewsArticle').value is not returning anything when there is text in the textarea
The other potential problem is that whats shown in the textarea is not actual code, but images etc too so I wasn't sure it would even work in the first place, but since when the form is submitted the data[News][article] value is back into text, I thought there might be a chance.
If anyone knows how to get either the content or code for the tinyMCE textarea, or has a better solution, I'd be interested to hear
TinyMce has an api for accessing content from the editor.
This code will grab the html from the active editor:
// Get the HTML contents of the currently active editor
tinyMCE.activeEditor.getContent();
// Get the raw contents of the currently active editor
tinyMCE.activeEditor.getContent({format : 'raw'});
// Get content of a specific editor:
tinyMCE.get('content id').getContent()
Use below syntax, which will remove unwanted character from your input textarea....
(((tinyMCE.get('YourTextAreaId').getContent()).replace(/( )*/g, "")).replace(/(<p>)*/g, "")).replace(/<(\/)?p[^>]*>/g, "");
Try
window.parent.tinymce.get('contentID').getContent();
For some reason, the stock-standard tinymce.get() call didn't work for me, so I tried this and it works. :)
var temp = tinymce.get('textAreaName').save();
console.log(temp);
OR
var temp =tinymce.get('textAreaName').getContent();
console.log(temp);
Probably you have something like
<form>
<textarea id="myArea">Hello, World!</textarea>
</form>
you should simply add as follows
<form method="post">
<textarea id="myArea" name="value">Hello, World!</textarea>
<input type="submit">
</form>
and you can catch the data with PHP under myArea var.

Need to color the tags in an xml, displayed in a textarea

I need to color the tags in an XML string, which is displayed in the textarea of an html page.
say for example, im having an xml string stored in a variable 'xmldata'.
the textarea tag in html is as below
<textarea id="xmlfile" cols="20" rows="30"></textarea>
using the below javascript statement, im displaying the xml string in the textarea
document.getElementById("xmlfile").value=xmldata;
But the xml string is displayed as a plain text in the textarea.
Is there any javascript function to color the tags in xml ?
I don't want any external javascript and css code work like "google-code-prettify"
All i need is a simple javascript function that colors the tags in an xml string which is displayed in the textarea.
Please help me with a solution.
-Dinesh
Since the contents of your text area are not separate DOM elements I don't believe you'll be able to individually set their attributes (since they don't have individual attributes). You might find some variation on a rich text editor that you can plug in. This may or may not violate your stipulation that you don't want external javascript libraries.
As replied here have a look at a self contained prettifier that works for most cases does nice indenting for long lines and colorizes the output if needed. Nevertheless I guess it might not help if you need it inside a textarea.
function formatXml(xml,colorize,indent) {
function esc(s){return s.replace(/[-\/&<> ]/g,function(c){ // Escape special chars
return c==' '?' ':'&#'+c.charCodeAt(0)+';';});}
var se='<p class="xel">',tb='<div class="xtb">',d=0,i,re='',ib,
sd='<p class="xdt">',tc='<div class="xtc">',ob,at,sz='</p>',
sa='<p class="xat">',tz='</div>',ind=esc(indent||' ');
if (!colorize) se=sd=sa=sz='';
xml.match(/(?<=<).*(?=>)|$/s)[0].split(/>\s*</).forEach(function(nd){
ob=nd.match(/^([!?\/]?)(.*?)([?\/]?)$/s); // Split outer brackets
ib=ob[2].match(/^(.*?)>(.*)<\/(.*)$/s)||['',ob[2],'']; // Split inner brackets
at=ib[1].match(/^--.*--$|=|('|").*?\1|[^\t\n\f \/>"'=]+/g)||['']; // Split attributes
if (ob[1]=='/') d--; // Decrease indent
re+=tb+tc+ind.repeat(d)+tz+tc+esc('<'+ob[1])+se+esc(at[0])+sz;
for (i=1;i<at.length;i+=3) re+=esc(' ')+sa+esc(at[i])+sz+"="+sd+esc(at[i+2])+sz;
re+=ib[2]?esc('>')+sd+esc(ib[2])+sz+esc('</')+se+ib[3]+sz:'';
re+=esc(ob[3]+'>')+tz+tz;
if (ob[1]+ob[3]+ib[2]=='') d++; // Increase indent
});
return re;
}
For demo see https://jsfiddle.net/dkb0La16/

Categories

Resources