The problem is this:
You have a textbox, you type in some text, send it to the server. On another page, that value is retrieved and displayed on screen in a textbox and a label.
It's important to stop scripting attacks, and asp.net won't let you submit unsafe code, so on submit you javascript replace < with < and the same for >
When the values are retrieved from the server, they will come back with < and > which is fine for displaying in the label, but when put into the textbox, they must be replaced back to < and >
The data should be stored securely in the database as other people might use this content. From a safety point of view I'd like to call htmlencode on it then store it. It is this encoded html I'd like to display in the label on the client, but the decoded version I'd like to display in the textbox.
So what I need, is a htmldecode solution in javascript. htmlencode/decode replaces more than just < > and without a definitive list I can't create my own method. Is there a solution out there?
Instead of trying to turn a string of text into HTML and then adding it to the document using innerHTML; use standard DOM methods.
myElement.appendChild(
document.createTextNode(myString)
);
Related
I have a ColdFusion form and set a field value by copying it from another form with the Javascript below. (This is actually from a popup input window where you can paste large texts).
form1.remark.value = form2.remark.value;
After this happens, form1 is submitted for further processing by another process.cfm page.
The problem is the remark.value contains complex text, including XML, but it is encoded when it arrives at the process.cfm page. I'm looking for a way to correctly encode it in the Javascript portion and then decode it at process.cfm using ColdFusion code so that I get back the original text, including XML tags.
How is this best accomplished?
If you're trying to use the value of the submitted form field as the value of a JavaScript variable on the next page, then you need to use the built-in (as of ColdFusion 10) function encodeForJavaScript.
<cfoutput>var myJSvar = '#encodeForJavaScript(form.myField)#';</cfoutput>
This will properly escape the string value of form.myField, so that it can be used with JavaScript.
If you're on CF 8 or 9, the OWASP JAR file is loaded into CF (if you're patched up correctly), and you can access the same functions directly by instantiating the correct Java class.
<cfset application.xssEncoder = createObject("java", "org.owasp.esapi.esapi").encoder() />
<cfoutput>
var myJSvar = '#application.xssEncoder.encodeForJavaScript(form.myField)#';
</cfoutput>
I think you can use StringEscapeUtils class of java like this:
<cfset objEscapeUtil = createObject("java", "org.apache.commons.lang.StringEscapeUtils")>
<cfset unescapedString = objEscapeUtil.unescapeJavaScript(escapedString)>
I have this code to show confirm message using vb.net, but I want to get the return result and use it in vb.net code.
Dim str As String = "<script>" &
"$('.test').live('click',function(){" &
"confirm('test');" &
"})</script>"
ScriptManager.RegisterClientScriptBlock(control, GetType(Button), "sas", str, False)
I am thinking in storing the result data in html compnent and use it in vb.net code, is there another solution ?
You can store the result in a hidden field (<input type="hidden">), then retrieve it in your code after postback.
Not directly. The server side code is outputting text down a one-way channel. The JavaScript is running on a different system. You can't get data from the JS to the server without making a new HTTP request.
See also Using Pylons global variables with JavaScript which is the same problem, just with a different language.
I'd like to get array of bytes from active-x component, store that in html-form input hidden field and then pass it to server via form-submit. How can I do that?
MIDL:
HRESULT Data([out, retval] SAFEARRAY(VARIANT) *pArray);
C++/ATL
STDMETHODIMP MyActiveX::get_Data(SAFEARRAY **pArray)
{
CComSafeArray<BYTE> arr;
for (int i = 0; i < 10; i++)
{
CComVariant a;
a = (BYTE)i;
arr.Add(a);
}
arr.CopyTo(pArray);
return S_OK;
}
Javascript:
$("#hiddenField").val(myActiveX.Data);
Browser tells me: type mismatch
Although I am not familiar with your exact situation, I have seen some similar situations before.
You are correct to put your data in a field using $('#hiddenField'). If you've put a name attribute on that field so that it becomes part of the HTTP submit, that part is good.
As for myActiveX.Data, I imagine that this is some sort of JavaScript object. Remember that only a string can be put into an HTML input; it does not hold binary data.
What I would do is put a breakpoint before $("#hiddenField").val(myActiveX.Data);
. Use the debugger keyword if you're not familiar with it. Run the code in your debugger and look at the structure of the value of myActiveX.Data. It probably has some sort of wrapper field.
Alternatively, if you don't have access to a good JavaScript debugger, try the following"
for(x in myActiveX.Data)
alert(x + ": " + myActiveX.Data[x]);
I'm assuming the C++ code is the server side code.
The best way to handle this is to serialise the SAFEARRAY. From there you can handle it in two ways.
Firstly, the serialisation. I've looked at MSDN and I think using LPSAFEARRAY_Marshal and LPSAFEARRAY_Unmarshal (with an optional IDispatch or IUnknown IID to specify the type, but the documentation doesn't say how it's used) or LPSAFEARRAY_UserMarshal and LPSAFEARRAY_UserUnmarshal to convert the SAFEARRAY to/from a serialised format.
Secondly, handling the data transfer.
Option 1: Save the serialised data on the server side and put a token representing the saved file into the hidden field.
Option 2: Use Hex, Base64, etc. to encode the data into a printable format and putting that data into the hidden field.
Either way, when you need to get the data back, just de-serialise it with the matching function.
I run into this problem constantly while developing AJAX applications. Let's say I want users to be able to click on a "flag" icon associated with each comment on my site, which results in an AJAX request being sent to the server, requesting that the comment be flagged. I need to associate a comment id with the comment on the client side so that the AJAX request may communicate to the server which comment to flag.
This page explains a number of ways to annotate HTML in this manner, but none of them are very satisfactory. While I could just use an id or class attribute to associate the comment id with the flag button (e.g. id="comment_1998221"), this fails with more complex data that doesn't fit well into those attributes (e.g. arbitrary strings). Is there a best practice for this sort of thing? Every time I need to do this, I end up with some kludge like using the id attribute, a hidden form field, or worse yet a span set to display:none.
The HTML5 data-* attributes seem like a perfect solution, but I've seen a lot of animosity toward them, which makes me think that people must already have a solution they're happy with. I'd love to know what it is.
This page explains a number of ways to annotate HTML in this manner, but none of them are very satisfactory.
Still, they are pretty much all you've got. Although that page isn't a terribly good summary, there are errors and it misunderstands what ‘unobtrusive’ JavaScript means.
For example it is in fact perfectly valid to put a script element inside body — just not directly inside a table element. You could put all the script fragments at the bottom of the table, or put each row in its own table, or even, with some limitations if you are intending to mutate the DOM, inside the row in question.
Setting “id="comment-123"” then scanning for all rows with an id starting with ‘comment-’ is indeed good for your particular case. For setting non-identifying extra info attributes, you could use either HTML5 data-attributes or hack it into the classname using eg. “class="comment type-foo data-bar"”. Of course both IDs and classnames have their limits about what characters you can use, but it's possible to encode any string down to valid strings. For example, you could use a custom URL-style encoding to hide non-alphanumeric characters:
<tr class="greeting-Hello_21_20_E2_98_BA">
...
</tr>
function getClassAttr(el, name) {
var prefix= name+'-';
var classes= el.className.split(' ');
for (var i= classes.length; i-->0;) {
if (classes[i].substring(0, prefix.length)==prefix) {
var value= classes[i].substring(prefix.length);
return decodeURIComponent(value.split('_').join('%'));
}
}
return null;
}
var greeting= getClassAttr(tr, 'greeting'); // "Hello! ☺"
You can even store complex non-string values in this way, by encoding them JavaScript or JSON strings then retrieving them using exec (or JSON.parse where available).
However, if you are putting anything non-trivial in there it soon gets messy. That's where you may prefer comments. You can fit anything in here except the sequence '--', which is easily escaped if it happens to come up in a string.
<table>
<tr class="comment">
<td>...</td>
<!-- {"id": 123, "user": 456} -->
</tr>
</table>
function getLastComment(node) {
var results= [];
for (var i= node.childNodes.length; i-->0;)
if (node.childNodes[i]==8)
return node.childNodes[i];
return null;
}
var user= getLastComment(tr).user;
The summary warns that this may not be guaranteed to work because XML parsers may discard comments, but then DOM Level 3 LS parsers must keep them by default, and every browser and major XML library so far does.
jQuery data API is nice for this.
Suppose you have the following DOM...
<div class="comment">
Flag
Some text
</div>
Then, assuming you are also loading these elements by ajax, you can do
$(".comment").data('someKey', (any javascript value/object));
Then later, upon click handler to the flag, you can do...
$(".flagSelector").click(function(ev) {
var extraData = $(this).closest(".comment").data("someKey");
// use extraData along with your request
});
If you are generating the comments on the server side and shipping them with the initial page, you need to figure out how to initialize the data. One way would be to have unique ID-s for the comment and upon pageload, still load the custom data from the server by Ajax.
Here is how I would do this:
When rendering the page server-side, generate the flag link as a normal link, so that it would work fine if you didn't have javascript enabled.
<a class="flag_link" href="/comment/123/flag/"><img src="flag.gif" /></a>
Then, in the javascript, add a click event to do this by ajax instead. I'll use jQuery for my example, but the same thing is not hard to do without it.
<script>
$('a.flag_link').click(function() {
$.get($(this).attr('href'), function() {
alert('you flagged this comment');
});
});
</script>
Of course, you'll do something more user-friendly than an alert to signal success.
I have the user entering a post-number in a form-field, and then I want to display the town with that post-number.
I have the server-side function set up, it takes a variable from the URL and returns a plain string.
As I see it, I need to get the variable from the form-field after the user has written it and the focus has left the form-field, use that number in an XMLHttpRequest call to the server and display the resulted string.
But the problem is, that I've never written any JavaScript, more complex than a Hello World. So I would like some help with writing the JavaScript for that page, any help would be appreciated.
Since you are new to JavaScript I won't recommend using any JS framework for this.
To get the value from an input box you can use
document.getElementById("txt1").value;
where txt1 is the id of the input element.
Then you can append the element value to the query string and call the server-side function. And if the response text is a plain string put that inside a div or span
document.getElementById("divTown").innerText = "response string"; // for IE
document.getElementById("divTown").textContent = "response string"; // for FF
You can get a basic understanding of AJAX and JavaScript read these
AJAX Introduction
JavaScript Tutorial