JSON in Browser cookie - json

I'm not sure whether this problem is discussed before but I want o store a javascript object in cookie through javascript.
Basically my problem is I've a html form with few input fields. I want to take input from the fields and store the same values in a javascript object. This javascript object is only accessible until I'm in this page. But once I go to another page, my javascript object becomes null/undefined. So I thought I can store the javascript object somewhere from where I can get back the values I entered from the input fields. But I don't know how I should be able to do this.
Any help will be appreciated.
Thanks,
Rupam

Cookie is the way to go.
You can do something like :
Add the plugin: https://github.com/carhartl/jquery-cookie
Setting a cookie:
$.cookie("CookieName","CookieValue");
Clearing the cookie:
$.removeCookie("CookieName");
Accessing the value in the cookie:
var temp = $.cookie("CookieName");

My advise is to use a dedicated persistant storage lib such as : http://brian.io/lawnchair/ It does exactly what you are looking for (and even more).

Related

Way to hide variable value in html

Is there any way that we can hide variable value in html? I dont want user to see the values at any cost.
<input id="defaulterrormessage" type="hidden" th:value="${errorMsg}"></input>
The above code will only hide from web page but if you inspect then you can see the value.
No. Use AJAX to pull values from the server as needed instead of storing them in the HTML (or CSS as generated content values or JS as variables, since all those can be discovered).
Can you provide more information? What are you trying to accomplish? If this is a form and you are assigning values after a submit, I suggest a server side language like php or c#.
If you are doing something with these values on your current page you could also store your values in a session variable or cookie depending on what is needed.
There are two approaches:
1) Make the value accessible by the page, but stored outside the page
eg.
Stored in HTML5 localStorage, accessible via localStorage.getItem(value);
Stored in an external JSON file, accessible via Ajax
Stored in a cookie, accessible via cookie interrogation
etc.
2) Hide the encoded value in plain sight. Decode using javascript
eg.
Encode the value as ASCII
Encode the value as Base64
etc.

Hide values from page source but show on page

I would like to be able to show some values on the page but hide them in the page source. Im pretty sure this is not possible, but i figured i would ask.
Edit
I am writing my own verification system to prevent hackers/spammers. Im using encryption when passing the data, but the original value can be currently viewed in the page source ( thus someone can write a loop on the source and pull the data ).
Officially as per your tags not including javascript: No...
However, it's possible to write to the DOM after load but probably not going to achieve what you want in the end.
You can do something like this:
<div id="something">
</div>
Then on page load use javascript in your footer to inject the value of that div:
<script type="text/javascript">
document.getElementById("something").innerHTML = "This is a previously hidden value";
</script>
This will write it to the dom after load and not write it to the page source. The real question is what are you actually trying to do? If you want to totally hide something then this is pretty much just an inconvenience. Anyone wanting to drill it out will be able to track this down.
If you update your question with your real intentions then maybe we can offer a better solution.
EDIT
As per your edit that you want a validation system that does not display the original values.
One option is to store the values in a database and only pass the reference id of the row to the form, assuming that's what you mean. You can do all your processing on the server side and minimize the amount of sensitive data passed to the client side.
The immediate answer is no, this is not possible -- because the browser must receive anything it intends to display.
With that said, depending on your intentions there are ways to display content to the page but hide it in the source.
One common place where this is an issue is with emails that you wish to hide from spambots, but need to display to your user -- if this (or something similar) is the case, I present a couple of solutions:
Use HTML character entities to obscure words: See here.
Use Javascript to dynamically generate it
Use HTML encoding: Here is a nice tool.
Use a plugin such as SilverLight with DRM: See Here.
Serve an image (note, some spambots know how to use OCR)
Use something like reCaptcha mailhide
At the end of the day, the user will almost definitely be able to copy whatever it is you are trying to hide - but if you are only trying to defend against spambots or automated tools, one of these options might work for you.
The way to do this is to have a <div id='fillme'> (or some other container) on your page, and then use AJAX to populate it with information after the page loads. That way, when someone clicks on "View Source" they'll see the contents of the html (or php or whatever) file that was loaded, rather than the end result after the javascript runs. jQuery has wonderful AJAX functionality, and you'll end up with code like this:
$.ajax({
type: 'POST',
url: '/server/side/script.php',
dataType: 'json',
data: { thing: value, thing2: value },
async: false,
success: function(data) {
$('#fillme').html(data);
},
error: function() {
alert('oops');
}
});
Since the page source is all the data a browser needs to generate everything on the page, it isn't possible no.
Ofcourse you could show images instead of values, isn't directly readable from the source code. Or use a html5 canvas or something.
Unfortunately, the short answer to this question is, you can't. There have been various methods put forth, but all of these are easily circumvented. In the end, the only sure fire way to make sure no one can steal your source code is to never put it on the Internet at all.

Why is a html form post to a restlet resource not working?

Restlet's (2.0M6 on Google App Engine) annotations are actually sensible to the order of a resource's methods.
When posting html form data, make sure that the #Post("html") method stays above the #Post("xml") method in the receiving resource.
At least Firefox puts both content types into the request's Accept header, so the first matching method will be processed.
The question is, if there is any other way to achieve control over method precedence?
For example I would like the client to accept text/html only.
As per your comment that you're asking whether there is some kind of client-side html form attribute or JavaScript to modify the accept header, the answer would be, AFAIK: no. Not for links clicked or forms submitted by the user. As you mentioned in your comment, you might be able to use JS to intercept link clicks and form posts, and use XHR instead, but that'd probably be tricky, if possible.
BTW, XmlHttpRequest doesn't really have anything to do with XML. It can handle any sort of content, for both requests and responses. It's very common to return a snippet of HTML to a XHR request and use DOM injection to dynamically update the page.

<Canvas> contents as data?

Is there a way to save a canvas element's content to data such as binary? I'm looking to be able to redraw this data when needed.
Not really sure on how to go about it..
Thanks so much!!
You should be able to save the image into a variable like so:
var imageVar = canvasObject.toDataURL();, and restore it again by calling canvasObject.drawImage(imageVar);
I haven't tested it yet, but the spec says it should work.
I suppose you can send the innerHTML of whatever element contains the canvas element back to the server using AJAX and then zip it up server side.
However, this would be grossly inefficient to an alternate method of creating a data-based representation of of the content, and just storing that without all the unnecessary overhead of actual HTML markup.

How can I post data (form) to html page and hijacking the data in the middle?

the site addres: http://www.ynet.co.il/YediothPortal/Ext/TalkBack/CdaTalkBack/1,2497,L-3650194-0-68-544-0--,00.html
fill the form with rubbish.
Hit 'Send'
the form post the data to another HTML without any parsing of the data i've just added
How do they do it?
A likely option is that they are using a content management system where "html" on the URL doesn't actually mean it's a static html file.
This may be out of left field, but I've certainly used the occasional JS function to grab everything in the header and either parse it or pass it to another script using AJAX.
I'll sometimes use this method in a 404.html page to grab the headers of the previous page, parse them out to see where someone was trying to go and redirect them.
That is, as annakata said, one of the numerous options available.
Edit based on clarified question:
Numerous frameworks can be configured to intercept an html request - for instance asp.net can be set to handle any given extension and an HTTPModule could do anything with that. It's really up to web server configuration what it decides to do with any request.
also: you don't really want to be saying "hijack"