I am using jquery for all my ajax thing, I don't know if that is fine but I use that for now.
I have one text input when user type characters in it I call server side get some values and add them on the view.
Code that I use bellow works fine but I want to improve it a little.
How can I make this ajax call so that users that want to investigate my page source code can't see what I call here?
So basically I want to hide from page source what url, what type and data send I use here, is it possible?
$(function () {
$("#txtSearch").keyup(function (evt) {
$.ajax({
url: "/Prethors/Users/SearchUsers",
type: "POST",
data: "text=" + this.value,
success: function (result) {
$("#searchResult").prepend("<p>" + result + "</p>");
}
});
});
});
No, a user will always be able to figure out what calls you are making if you include it in javascript.
You can compress and minify the javascript, but a determined person will always be able to find your url calls.
Here's a js compression site, for example.
http://jscompress.com/
overall, you shouldn't worry about this. there is no way I'm aware of to hide your ajax calls, but you shouldn't need to.
-you could encrypt the info.
-you could use comet to stream the data on a persistent connection. (super complicated).
-follow good server security practices and not worry about it.
source: here
If you are really worried about this, you could set up kind of an anonymous URL, which will then redirect to where you really want to go based on some variable which is arbitrary.
for example, instead of going to "/Prethors/Users/SearchUsers"
go to "/AnonymousCall?code=5"
from which you could execute the code you want for searchusers
You can't hide client-side code. You can disguise it with minification but sensitive data should always be stored and processed on the server-side.
Use console.clear(); after you ajax calls :P
It just clears the reqs from the console but you still cannot hide client side calls.
Related
Its known that interactions between Javascript and SQL-Databases are not very secure. But most Websites use it cause the Webside doesent reload to show matches in a search.
With PHP it isn't possible to change Page-Contents without a completely Page-Refreshing.
Witch is the right way to get Data from SQL with Javascript without security-neglects.
Aspeccialy for a Searching function with directly matches in a list.
You can use 2 way to get data from db by using js;
1. Ajax:
function refresh() {
$.ajax({
url:"your url",
method: "GET",
data: your_params,
success: function(response) {
$("#specific_div_id").html(response);
}
});
}
You can do this within an interval like;
setInterval(refresh, 5000);
in order to get content in every 5 sec.
2. Websockets
In AJAX, you are requesting in every 5 secs to get updated content from server. Think that, you are not getting content server pushes updated content to you. In other words, server notifies you on any updated data. You can have a look at Socket.io for an example implementation of websockets. When server notifies you, you can take data and put it related html area
As mention in the commentaries, the best way is to use AJAX, which is an acronym that stands for Asynchronous Javascript and XML.
The last part, XML, is a bit misleading. It kept that name because that's what is was first use for. But AJAX can now be use to make HTTP request and interface with any language, including PHP.
Depending on the technology you are built on, there are several implementation available. Chances are you have jQuery installed already. In that case, jQuery Ajax, and particularly jQuery.get() would address your concerns.
If you are using a router on the backend, you can simply call a route, specifying it as the url, first argument of the function. Otherwise, you can directly call a file by using the relative path from the html page the javascript is embedded in.
jQuery.get will return anything you echo within you server script. In other words, anything that is directly rendered on the page. You can use a callback catch the data returned and process it.
Example :
$.get('/path/to/file.php', function (data) {
console.log('Here is the data received from the server!', data)
// Process data here
});
In my new site I have form for client that went to contact me.
I don't have much web programming experience so I'm not sure what is the easiest way to do it,
My goal is for example if the client fill his name and phone number, and then decide that there is too much fields to fill (even that it's not must) then he give-up and exit the page,
Then I went to make in such case I will still get his the details that he filled, (name and phone number)
Also, if he fill something and then change or delete, I also went to know.
What is the easiest way to do it?
Is there any open-source PHP base system that can do it?
Even add-on for WordPress.
The person that fill the page, will he know that I do it? it will load each time he move field or something? because I really prefer that it won't
BTW, I'm not going to contact anyone if he not press send, I just went to learn better why I lose leads and maybe maximum to send email question about that.
I would use ajax and save everytime they change a value in the form by "change, keyup" or something similar like mentioned in the answer before. Since you use Wordpress you can use jquery for that.
It could potentially look something like this. Made 3 different ways to define a field if you are unfamiliar with jQuery, it is a lot like CSS. The serialize does take all your fields and post them to the your_savingfile.php.
$('input[name="firstname"], .lastname, #phonenumber').on('keyup', function(){
saveForm($('#form-id'));
}
var function = saveForm(f) {
$.ajax({
type: "POST",
url: "your_savingfile.php",
data: f.serialize(),
success: function(data) {
$("#save-notify-div").html('Saved form...');
}
});
}
A nice way to solve your problem would be to update your server when the user moves away from your page. You can do this by attaching a handler to the 'unload' event
window.onunload = function(){
//collect all form field values and make ajax request here
}
One thing to remember while doing this is that you cannot receive the server response. It has to be a send and forget approach.
actually I can see the answer for this is you to monitor the events(base on your scenario, keypress, keydown, keyup for your fields) of the form elements and then send data via ajax call to your server. You can use jQuery ajax for ease http://api.jquery.com/jQuery.ajax/
but take note that this will call multiple requests, which may populate and increase traffic on your server so use it wisely
The answer on Auto refreshing with Javascript? seemed like exactly what I needed, but after a while I found something not working like I wanted it to :( When I made a timer to check the web page every 5 seconds, it kept returning the same string even after the page changed. I think this is happening because it's doing the equivilant of F5; re downloading the page only if the php script has been changed by me, and if not just sending my Javascript what's in the browser's cache, if that makes any sense. The problem is, the page isn't actually being re-uploaded every five seconds, the reason the page would change is because of the database content the PHP is displaying. What I would like is a function similar to $.get but will act more like Ctrl-F5, not using any cache, just re downloading the whole page. Sorry if this doesn't make any sense...
UPDATE: What I'm asking for is not a Javascript script that Ctrl-F5's the page, what I'm asking for is a function like $.get that downloads from the server no matter what. urgle, see, $.get only downloads from the server if the page has been edited since x time (and if it hasn't it'll return a copy of the page from the browser's cache), but I don't want it to do the x time thing, I just want it to download the page no matter the last-edited time.
I always throw useless query like this:
$.get(url + '?v=' + Math.random(), success: function (data) {
// stuff
})
That math.random basically tricks the browser into not caching that request.
Use jQuery.ajax(). Pass through cache : false as one of the parameters.
For example, straight from the documentation:
$.ajax({
url: "test.php",
cache: false,
success: function(){
//whatever
}
});
Source: http://api.jquery.com/jQuery.ajax/
The best solution I can imagine is to update/redirect to a page that redirects you back to current. I'm not sure if javascript has a ctrl+f5 function.
If using jQuery use the cache option with the .ajax call. Alternatively append a date stamp to the url to force the browser to fetch each time.
I am building a Spider in Perl and have a problem:
The Site I want to spider uses a JavaScript for Age-Verification and I don't know how to get past this in Perl...?
The Script looks like this:
<script type = "text/javascript">
function set_age_verified(){
new Request({
method: "post",
url: "/user/set_age_verified"
}).send();
$('age_verification').setStyles({visibility: 'hidden', display: 'none'});
$('page_after_verification').setStyles({visibility: 'visible', display: 'block'});
return false;
}
</script>
And here the OnClick Event :
<img src="http://example.com/age-verification-enter.gif" alt="ENTER">
The function has two effects. One is to POST a request to the URL "/user/set_age_verified" and the other is to alter the display visibility of some HTML.
Your spider can easily ignore the second effect, but presumably the first effect, by going to the server, sets some cookie or server variable which the server will require.
You do not have to actually run the javascript, so long as the server sees the same POST data.
The answer is for your Perl script to detect pages which have this javascript, and to call a Perl function to POST the data to the age verification URL.
Any cookie or similar which is returned will have to be recorded by you - your HTTP library may take care of this for you though.
What Perl modules are you using? WWW::Mechanize has an AJAX plugin, although it hasn't been updated in a while. I guess you could also look at something like WWW::Selenium.
But I bet that AJAX request is going to inject some HTML that requires the user to input some data, then submit a form. Pretty tricky to cover all bases for that general case...
Take a look at the WWW::Mechanize::Firefox module. It allows you handle some JavaScript.
Also, in Firefox HTTPHeaders is your best friend.
Turn it on, manually click what ever you need to in order for the Javascript to run and submit to the server, then go back to the HTTPHeaders window. It will show you exactly what that Javascript event sent to the server (GET or POST + the data, even if it is HTTPS) - as well as the server response.
$.ajax({
type: "POST",
url: "http://images.digu.com/web_res_v1/images/logo.png?t=20091230",
success: function(msg){ alert( "Data Saved: " + msg ); }
});
where is the download file.
thanks
AJAX request actually only 'download' the requested resource into your browser memory. If you request an image like in your code, the image will be put into browser's cache. So if you set an img DOM element's src with the same URL, the modern browser will smart enough to use the one in cache.
If you request a part of web page, not an image like your code above, you can insert it directly into DOM element:
$.get(URL,
{},
function(data){
$("#container").html(data);
});
Read the jQuery documentation about AJAX for more example and explaination.
Btw, AJAX request can be only made to the same domain, so make sure that you only request URL in the same domain with your jQuery code. Your code above will only work if the page also in http://images.digu.com/.
Second note, use POST when you need to send data that will change something in the server side (add, edit, delete). If you just want to request something, use GET. Also, if you don't need extra AJAX setting, I recomend you to use $.post(); and $.get(); so the code will be more readable and easier to maintain, at least it work for me :)
It is loaded into browser memory, and likely your cache. If you're wanting to save the file, you probably don't want AJAX.
It doesn't download to a file or anything. A successful ajax call returns data in a javascript variable. In this case you are saving it into a variable called msg. Depending on your app, you could insert this data into the webpage (i.e into the DOM).
I guess I'd ask for more detail. It seems like you just want to set an image's src property on the fly since I don't see you posting any data. To do that, you can use something like this:
$("#my_image").attr("src","http://images.digu.com/web_res_v1/images/logo.png?t=20091230");