Edit a comment - javascript, php working together - php

Hey all, I am facing a rather serious security error. Let me first outline my code.
<li class="comment">
<form action="" method="POST" name="edit-form" class="edit-area">
<textarea style="width: 100%; height: 150px;"><?php echo $response->comment; ?></textarea>
</form>
<div class="comment-area" style="padding-top: 2px"><?php echo (parseResponse($response->comment)); ?></div>
<p class="ranking">
<?php if ($response->user_id == $user_id) : ?>
Edit • Delete
<?php else : ?>
Like (<?php echo $response->likes; ?>) • Dislike (<?php echo $response->dislikes; ?>)
<?php endif; ?>
</p>
</li>
is what I got in my body, and here's the relevant JS
$('.editting').bind('click', function(event) {
var num = $(this).data('edit');
var user = $(this).data('user');
if ($(this).hasClass('done')) {
var newComment = $('#comment-' + num + ' .edit-area textarea').val();
var dataString = 'newComment='+ newComment + '&num=' + num;
if(newComment == '')
{
alert('Comment Cannot Be Empty!');
}
else
{
$.ajax({
type: "POST",
url: "edit.php",
data: dataString,
success: function(){}
});
$('#comment-' + num + ' .edit-area').slideDown('slow', function() {
$('#comment-' + num + ' .edit-area').addClass('invisible');
});
$('#comment-' + num + ' .comment-area').slideUp('slow', function() {
$('#comment-' + num + ' .comment-area').removeClass('invisible');
});
$(this).removeClass('done');
$(this).html('Edit');
}
}
else {
$('#comment-' + num + ' .comment-area').slideDown('slow', function() {
$('#comment-' + num + ' .comment-area').addClass('invisible');
});
$('#comment-' + num + ' .edit-area').slideUp('slow', function() {
$('#comment-' + num + ' .edit-area').removeClass('invisible');
});
$(this).html('Done');
$(this).addClass('done');
}
return false;
});
which works fine, but i'm having an issue. If the user finds a comment (not by them) and uses a plugin like firebug, they can replace the response->short with another, and edit ANY comment. Of course, within edit.php, I could check the short against the response table and see if the user checks out, but i'd like to find a way to not show the text area unless that response is for-sure by that user.
Is this possible?
Thanks in advance,
Will

Is this possible?
Sure...but it'll do nothing to stop the user/fix your security hole. To fix this check server-side, always double-check anything that should be secure server-side, never trust your input. The users trying to do something malicious won't be stopped by anything in JavaScript...sending data to your server that they shouldn't is exactly what they'll do first.

Like Nick said; never ever trust a JavaScript test!
It will/might work for "regular users", but when it comes down to avoiding hacks, you might as well ask the hacker to click a button to "prove" his input is valid!
Your validator script is running on someone else's computer, so he/she will be able to manipulate it (or even turn it of using NoScript etc. )

Related

Ajax: Getting a Post Error when trying to use Relative Path

Struggling to get the relative path of an Ajax post request to pickup the php file. I'm not getting an error just nothing happens.
Browsed this site, but cannot find a previous answer on Ajax relative paths that I understand. Still a novice at this. Would really appreciate it, if someone could explain it in layman terms.
I'm trying to access the php file 'search/search.php' from the root file 'index.php' (this file contains the Ajax request). This worked when both files were in the same directory.
File structure below:
JQuery code snippet:
$(function() {
$('form').on("submit", function(e) {
e.preventDefault();
$('#error').text(""); // reset
var name = $.trim($("#search").val());
if (name.match(/[^a-zA-Z0-9 ]/g)) {
$('#error').text('Please enter letters and spaces only');
return false;
}
if (name === '') {
$('#error').text('Please enter some text');
return false;
}
if (name.length > 0 && name.length < 3) {
$('#error').text('Please enter more letters');
return false;
}
$.ajax({
url: 'search/search.php',
method: 'POST',
data: {
msg: name
},
dataType: 'json',
success: function(response) {
$(".content").html("")
$(".total").html("")
if(response){
var total = response.length;
$('.total') .append(total + " Results");
}
$.each(response, function() {
$.each($(this), function(i, item) {
var mycss = (item.Type == 1) ? ' style="color: #ffa449;"' : '';
$('.content').append('<div class="post"><div class="post-text"> ' + item.MessageText + ' </div><div class="post-action"><input type="button" value="Like" id="like_' + item.ID + '_' + item.UserID + '" class="like" ' + mycss + ' /><span id="likes_' + item.ID + '_' + item.UserID + '">' + item.cntLikes + '</span></div></div>');
});
});
}
});
});
});
The leading forward slash simply means “begin at the document root”, which is where index.php lives. So /search/search.php should be correct. If the server is unable to find the file, it stands to reason that there must be some url rewriting happening.
You can test by simply pointing your browser to http://localhost:8000/search/search.php. If you get a 404, you know it has nothing to do with ajax

JavaScript popup opening external page

I am struggeling to implement a function to open a new window with an external link. I am creating dynamic content and would like to write a function that opens up a pop/up window with the given link. Please help. I like jquery dialog boxes, and lightwindo etc. But am unable to implement any of these, any help would be gerat, am stuck and frustrated with this supposingly small issue . . . No option has worked for em so far. here the code of how i display my results, and how i think I have to call the function to open a new window. So the second function here is the one I would need some help with, to open a nice pop-up window displaying the information..
// --------------------- display the course results -> structuring the returned array, to output all information into a table ----------------------
function displayCourses()
{
var str = ' <table border="0" width="530">' +
'<tr>' +
'<td width="150">Title / course code</td>' +
'<td>INFO</td>' +
'</tr>';
if(curCourseList == null)
{
str = str + '<tr><td colspan="2"><div id="msgDips"></div></td></tr>';
}
else
{
for (var i = 0; i < curCourseList.length; i++)
{
str = str + '<tr><td valign="top" width="150"><a style="cursor:pointer;" onclick="showCourse(\''+curCourseList[i][0]+'\')" >' + curCourseList[i][0] + ' <br /> </a>' + curCourseList[i][1] +'<br>'+ curCourseList[i][3] +'<br /><br />'+ curCourseList[i][4] +'</td><td>' + curCourseList[i][2] +'</td></tr>';
}
}
str = str + '</table>';
document.getElementById("courseContainer").innerHTML = str;
if(curCourseList == null)
{
getLangToken('99');
}
}
function showCourse(code)
{
//alert(1)
$.ajax({
async:false,
type: "POST",
url: 'formPostsUser.php?reqtype=getCourse',
data:'coursecode='+ code,
success: function(data)
{
newwindow=window.open(url,'name','height=200,width=150');
if (window.focus) {newwindow.focus()}
return false;
}
});
}
And seriously any help will be greatly ap[preciated. am in such deep shit atm
EDIT---------------
It is the window.open bit i would liek to replace to open a nice fancy pop-up, not new browser window or page
I do not know WHY you say a dialog does not work or specifically if jQuery UI dialog does not work for you, but just in case:
$(function() {
$("<div id='helpDialog' style='display:none' />").appendTo(document);
$("#helpDialog").dialog({
autoOpen: false
});
$("#helpDialog").dialog('option', 'buttons', {
"Close": function() {
$(this).dialog("close");
}
})
});
function helpPopUp(page, height, width) {
$("#helpDialog").dialog('option', 'height', height);
$("#helpDialog").dialog('option', 'width', width);
$('#helpDialog').load(page);
$('#helpDialog').dialog("open");
}
helpPopUp('#helpDialog', 'Help/Summary.html', 550, 750);
You could of course, modify the .load(page) to be custom IF needed referencing the page in your url.
Here is a simple sample of the above with a slight mod to load your table instead of the page: http://jsfiddle.net/MarkSchultheiss/ABqrD/1/
If your triggering the window opening via anything other than user interaction it will most likely be blocked. Have you checked for notices pertaining to this?
If you don't want to use a real popup, you could try to create a <div> which 'hovers' above the page with something like
.hoverwindow {
position:absolute;
width: ...px;
height:...px;
margin:auto;
z-index:10; /*ensure that it's displayed on top*/
}
You could do this with a small modification of your function:
function showCourse(code)
{
$.ajax({
async:false,
type: "POST",
url: 'formPostsUser.php?reqtype=getCourse',
data:'coursecode='+ code,
success: function(data)
{
var newwindow = $('<div class="hoverwindow" />');
newwindow.html(data).appendTo('body');
}
});
}
Although frankly this is pretty much what plugins for "popups" do so all of this should be readily available online if you search for it. Hence why I have not bothered to actually try and test this code - it is simply to give an idea of what you could do.

Can't get value of an element by AJAX call by using jQuery

I have some jQuery code like this:
// Called right away after someone clicks on the vote up link
$('.vote_up').click(function()
{
var problem_id = $(this).attr("data-problem_id");
var class_name = ".votes_"+problem_id;
alert ("class name: " + class_name);
var x = $(".votes_214").val();
alert ("x: " + x); // returns nothing at first, but correct values later.
vote(problem_id , 1);
//Return false to prevent page navigation
return false;
});
and here is the vote function:
// Global function
var vote = function(problem_id , vote)
{
var dataString = 'problem_id=' + problem_id + '&vote=' + vote;
// The person is actually logged in so lets have him vote
$.ajax({
type: "POST",
url: "/problems/vote.php",
data: dataString,
success: function(html)
{
alert("data: " + html);
var class_name = ".votes_"+problem_id;
alert ("class name: " + class_name);
var x = $(class_name).val();
alert ("curr val: " + x);
$(class_name).val(html);
},
error : function(html)
{
errorMessage = html;
if ( html == "not_logged_in" )
{
queue.login = false;
//set the current problem id to the one within the dialog
$problemId.val(problem_id);
// Try to create the popup that asks user to log in.
// $dialog.dialog('open');
$("#loginpopup").dialog();
errorMessage = "";
// prevent the default action, e.g., following a link
return false;
}
else
if ( errorMessage == "already_voted" )
{
// Display a dialog box saying that the user already voted
$('<div />').html('You already voted this way on this problem.').dialog();
}
else
if ( errorMessage == "error_getting_vote" )
{
$('<div />').html('Error getting existing votes.').dialog();
}
else
{
// ? :)
}
} // End of error case
}); // Closing AJAX call.
return false;
};
The AJAX call gets made and returns the correct values. The problem is that I can not get and set the value of the class votes_problem_id_value that I set to any real value of the problem id here in my PHP:
echo '<span class="half_text" style="color: #B77F37;">'.$problem_date.'</span> <span id="votes" class="votes_'.$problem_id.' half_text" style="padding-left: 10px;">'.$vote.'</span><strong> <a class="vote_up" style="font-size: 80.0%; color: #295B7B; font-weight:bold; text-decoration:none;" href="#" data-problem_id="'.$problem_id.'">Important</a></strong> | <strong><a class="vote_down" style="font-size: 80.0%; color: #295B7B; font-weight:bold; text-decoration:none;" href="#" data-problem_id="'.$problem_id.'">Not Important</a></strong>';
Any idea what I am doing wrong and how come I can not get the value or set the contents of that span class="votes_'.$problem_id.' half_text"
Thanks!!
.val() is for form elements, not spans. Use .text() (or maybe .html()) to get the text contained in a span.
var x = $(class_name).text();
Or, to set a custom attribute on a span, use .attr():
var x = $(class_name).attr("value");
...
$(class_name).attr("value", html);
Or, to associate custom data with a span, use .data():
var x = $(class_name).data("value");
...
$(class_name).data("value", html);
I see that your PHP is treating POST values like they are globals. If your register_globals setting is off, $vote and $problem_id will be unset, unless you explicitely set them. The best practice is to leave register_globals off, and use the superglobal $_POST instead.
So, try class="votes_'.$_POST['problem_id'].' half_text" instead.
Here's the PHP doc on register_globals:
http://www.php.net/manual/en/ini.core.php#ini.register-globals

Tabbed jQuery search results

I have a Google Instant style jQuery search script that queries a PHP file then parses the results into an HTML div. It uses tabs for the user to define which search type they want to use. When a user searches, a URL is created which is something like #type/query/.
My problem is, when the user searches for something and then selects a new search type (clicks on a tab) they have to go to the text box and press enter to submit their query again. How can I make it so when a search is active and a tab is clicked that it loads the results straight away instead?
I hope you can understand what I'm trying to describe. JSfiddle: http://jsfiddle.net/phWSR/
My current jQuery code is:
$(document).ready(function () {
$('[id^=type_]').click(function () {
type = this.id.replace('type_', '');
$('[id^=type_]').removeClass('selected');
$('#type_' + type).addClass('selected');
});
$('#type_search').click();
$('input').keyup(function () {
query = $(this).val();
url = '/' + type + '/' + query + '/';
window.location.hash = '' + type + '/' + query + '/';
document.title = $(this).val() + ' - My Search Script';
$('#results').show();
if (query == '') {
window.location.hash = '';
document.title = 'My Search Script';
$('#results').hide();
}
$.ajax({
type: 'GET',
url: url,
dataType: 'html',
success: function (results) {
$('#results').html(results);
}
});
});
});
My current HTML code is:
<div id='nav'>
<a id='type_search'>All</a>
<a id='type_images'>Images</a>
<a id='type_videos'>Videos</a>
<a id='type_news'>News</a>
<a id='type_social'>Social</a>
</div>
<input type='text' autocomplete='off'>
<div id='results'></div>
You could isolate the code for the ajax call (currently in $('input').keyup()) in a separate function, and bind it to both $('input').keyup() and $('#nav a').click().

Jquery tabify with form (Multiple Instances problem ?)

I'm using jquery tabify with 4 tabs and each content same form calling via ajax.(assume form.php)
1st tab everything works fine with the form.
2nd,3rd and 4th tab failed to get input type="text" value
tabify field with (4 tabs here actually I make it short as the code is long):
$(document).ready(function () {
$('#general_information_tab').tabify();
});
function recp(refer,id,plan){
if(plan == 0)
{
$('.stgcontent').load('stage/stage_procedure1.php?plan_id=' + id + '&T_REFERID=' + refer );
}else{
$('.stgcontent').load('stage/new_taskstg.php?plan_id=' + id + '&T_ID=' + refer);
}
<div id="general_tab_content">
<ul id="general_information_tab" class="general_information_tab">
<li class="active"><a href="#one" onClick="recp('1','<?php echo $plan_id; ?>','0')" >Immediate Response Steps</a></li>
<div id="one" class="content_gi">
<div class="stg1">
<img src="images/task/add.ico" height="10px" width="10px" /> Add Task
<div class="stgcontent">
<script type="text/javascript">
recp('1','<?php echo $plan_id; ?>','0');
</script>
</div>
</div>
</div>
in new_taskstg.php
$(function(){
$(".newTaskSubmitBtn").click(function(){
var T_CONTENT = $(".task_name").val();
var T_REFERID = $(".refer").val();
var SAVE_PLAN = $(".plan").val();
var V_ID = $(".vendor").val();
var dataString='T_CONTENT=' + T_CONTENT + '&T_REFERID=' + T_REFERID + '&SAVE_PLAN=' + SAVE_PLAN + '&V_ID=' + V_ID;
alert(T_CONTENT + T_REFERID + SAVE_PLAN + V_ID);
if(T_CONTENT=='' || T_REFERID=='' || SAVE_PLAN=='' || V_ID=='')
{
//ERROR MESSAGE
$(".fail").show();
$(".success").hide();
}
else
{
$.ajax({
type: "POST",
url: "stage/insert.php",
data: dataString,
success: function(data){
//SUCCESS MESSAGE
$(".success").show();
$(".fail").hide();
}
});
}
return false;
});
});
form field code:
<input type="text" name="task_name" class="form_input task_name" />
TEST I DID :
As above var T_CONTENT = $(".task_name").val(); and prompt like this alert(T_CONTENT); what it shows on 1st tab it able to capture it while the 2nd 3rd and 4th tab failed...
Was suspecting multiple instances problem...
Problem Solved. Mian point is to avoid from multiple instances since tabify couldn't differentiate which tab the form is and it takes 4 tabs together. So to solve my case I just use unique id in 4 forms.

Categories