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 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');
}
});
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.
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.
