Ok, this is a problem I have been dealing with for some time.
My page loads with some li elements. All of them have their own id, which is their primary_key id in the database. Each element can be removed from the database. The process of removing is done by jQuery's $.POST method, getting the id of that element and passing it to a PHP file which gets the id and removes the corresponding record from the database.
In Google or Firefox's inspector, if I change the id value of an element, then press the remove button of that element, a different element with that id is removed.
Example: We want to remove "Mohsen" with id 45 from database.
<script>
$('li').click(function(){
var id = $(this).attr(id);
$.post('delete.php',
{r_id: id}
);
});
</script>
HTML:
<li id="45">mohsen</li>
<li id="35">vahid</li>
<li id="25">neda</li>
The code above is as originally loaded. When i click on "mohsen", "mohsen" gets removed from the database, since he has the id of 45. But, if I use the inspector and change the id values to:
<li id="25">mohsen</li>
<li id="35">vahid</li>
<li id="45">neda</li>
Now, when "mohsen" is clicked, "neda" which had primary_key id value of 25 in the database is deleted instead, which we did not mean to allow.
Is there any way to stop a user from manipulating the markup data with an inspector? In another words, how do I remove "Mohsen" from the database properly, even if its id value is tampered with?
Note: mohsen was an example, and each of li can be removed.
One way to reduce manipulation attempts would be not to delete by ID, but some unique random hash. You can either take that random hash as your primary key, or you create an extra column in your database.
data_tbl(id (pk), hash, value)
If your hash looks like: a89x1uAp3 for example, it'll be very very hard to figure out the hashes for other records based on that hash.
Just don't pass your ID via post, but your hash and the problem is restrained pretty much.
You cannot prevent the users to use inspectors to see the page, the only thing you can do is to implement your own server side validation if you wish to prevent deleting of some records.
Also, if possible, try to not expose your primary keys, only some derived information, like an hash as #Thomas David Plat suggests.
You cannot Prevent user from viewing/ changing data from inspector. The only thing you can do is to make server side validation e.g from client side send text which in your case can be "Neda","Mohsen" etc and 1st validate if that specific ID belong to that text/name. But this is purely server side thing, but AFA client side is concerned you cannot do it.
Related
I have this problem: I use Yii2 and, when I go to an index page, I select a view for an element (Example, I go to the page 4, because I want to enter in the view of the element with ID 41, which is at the page 4 because I have the pagination set to 10). This is ok for me but, when I enter in the view, I have this link to come back to the index:
<?= Html::a ( "Back", ['codici/index/','CodiciSearch[IDCodice]='=>$model['IDCodice']], ['class' => 'btn btn-primary']) ?>
Actually, this return to the index, but it show me only the record with the ID that I pass to the link. So, in this case, only the record 41. I want, instead, that the Back button turn to the previous page checking the pagination in which I was, and not only the ID. So, the link must checking the pagination of an ID. I hope to be clear. I don't need a solution like "window.history.go(-1)" because this create a problem if I came to the view by another way. I would to have a specific option: the link must to return to the index and get the pagination of an ID (so, in this ex. case, to the page 4).
I hope to be clear. Thank you in advance!!!!
Here are the solutions I use:
most times I just open the target page in a new tab. That is the simplest solution. If this is acceptable then simply add a parameter to the Html::a options as follows:
Html::a(“text”,[url],[‘target’=>’_blank’]);
Note: if the link is within a Gridview you need to set the format to raw (“format”=>”raw”)
on the index page, pass the pagination number to the new page.
Html::a(“text”,[url, ‘index_pagination’=>5]);
You can then use this in your button
instead of passing the pagination, you can capture the referring page and send the user back:
$url = Yii::$app->request->referrer
This is easy but it can cause challenges if the user reloads the page in which case the referring page is the current page.
I created a user and logged in, using <firebase-auth> (with code snippet below) in the main element, but I can only retrieve the user's information in that main element (and not a child element).
<firebase-auth
id="auth"
app-name="Carecollector"
provider="google"
signed-in="{{signedIn}}"
user="{{user}}">
</firebase-auth>
How do I retrieve information about the current user in a child element?
Should I create a <firebase-auth> element inside every other element that needs the current user information?
Just drop another firebase-auth anywhere you need to access the current user
Just as others have said, drop a <firebase-auth> in the child element you want to retrieve the user's information. Also add a property to the child element and use Polymer's data binding system to expose the property to your element. Suppose you want to access user data in a child element,
HTML:
drop <firebase-auth> in your element like this;
<firebase-auth user="{{currentuser}}"></firebase-auth>
SCRIPT:
<script>
Polymer({
is: 'your-element-name',
properties:{
currentuser: Object
});
</script>
Then you can get, for example, the user's displayName like this:
<div>[[currentuser.displayName]]</div>
That's it.
Ryan Tyler says "Just drop another firebase-auth anywhere you need to access the current user" and I voted it down because it just wasn't true!
I had proved that you DON'T have access to the user, through frequent bouts of testing and debugging to figure this one out. Undefined, null, anything but a user there!
Except he was right... and you'd never know it unless you set an observer on that property or something similar. Because the user value is populated when it is populated, and for a javascript newbie like me I never thought about that, and kept trying to access this before it was populated. Sometimes it takes a second or two.
I have a script that sends a POST to a php file, and gets a new integer (primary key). Then the script creates 3 new divs, with that ID included in them as an attribute.
Now, I need to be able to grab the ID and give it back to PHP when the user updates it. (It's currently a div, but later it will be an editable form.)
I was going to do this by creating a button in the same script that I use to create the divs, bearing the same integer and calling a function. The problem with this concept, is that I have no idea how to create a Unique variable to pass along to the function, so it knows which number to look at. Obviously, if I have only one variable that gets overwritten with each new entry - after all of the rows load, only the last row will have a variable that matches its id.
Another option is to find the value of all attributes that bear the name data-integer-question and pass its number/integer to a function, when the user does something like keyup enter. However, I have no idea how to do that.
obj.returnIntJson holds the integer that I've been talking about, which changes for each row.
rowNumberObj.qarowcontainer is just a reference for the parent div, which doesn't get edited by the user - you can ignore it.
The script gives a result like this: <div id="questioncolumn" class="questionColumnCSS" data-integer-question="701"></div>
Suggestions on how to proceed? Here's the code for one of the divs,
Thanks.
qaRowQuestion = document.createElement('div');
qaRowQuestion.setAttribute('id', "questioncolumn");
qaRowQuestion.setAttribute('data-integer-question', obj.returnIntJson);
qaRowQuestion.setAttribute('class',"questionColumnCSS");
qaRowQuestionParent = document.getElementById(rowNumberObj.qarowcontainer);
qaRowQuestionParent.appendChild(qaRowQuestion);
This script worked:
$(document).on("click", ".questionColumnCSS",function() {
var questionUpdate = ($(this).data('integer-question'));
});
I’m developing a simple CRUD based application for upskilling purposes.
Currently, the application outputs the result of a select query to a HTML table using JSTL. The last column of this table has a Delete link for each record which sends the parameters action=delete&id=1 to the server. The id param value part of the href of these links are obviously dynamically generated with JSTL based on the database record key that is passed into the JSP with the database results.
Instead of having this Delete column, I want the user to “select” a row and click a Delete button at the bottom of the table, which will send the above parameters to the server.
I am unsure how to accomplish the following to achieve this:
(1) In Javascript, how can I allow the user to “select” a table row. I don’t want the table to have radio buttons. The behaviour should be that the user clicks the row, the entire row colour changes and JS retains the index of the selected row. Only one row can be selected at a time. If the user clicks the row again, it becomes deselected, i.e. the colour is returned to its original colour and JS no longer identifies that row index as being highlighted.
(2) If I don’t have a Delete link specific to each db record, how can I identify the key of the db record to be deleted and return this to the server when the Delete button is clicked. For example, currently if the record in the db has an PK of 123456, my JSTL will generate a href action=delete&id=123456 for that specific Delete link. So, how can I link that id to the selected table row without having to actually display that id in the HTML table.
1) There are plenty of ways to do it. I suppose all of them will involve the use of something like var rows = document.getElementsByTagName("tr"); or its jquery (or other framework) equivalent. Or some other selector, maybe by CSS classname, could be used. Followed by a loop in which you deselect all the rows that were not clicked and select only the one that was recently clicked. Changing the color equals just changing the css class assigned to the DOM element basically.
2) You will use Javascript either to append to the DOM an html form with hidden inputs (<input type='hidden'.../>) and then submit it via Javascript (if you're Ok with moving to a different page and back). Or you can use Javascript to send an Ajax request to the delete servlet, and then remove the particular tr from the page when you receive a success response back.
(note: edited since I've just realized the question are somehow correlated, at least in my mind!)
I want to create a multi-filter page in which the result will be animated...
I'm trying with 2 different plugin (quicksand and Isotope) and with both solution I'm having problems...
---ISOTOPE--- (original)
With Isotope I need to filter data based on active class, or based on IDs of filters, which I've already stored in JS, does anyone know how can I do that?
I set up a page with 2 different filter like 'color' (red, blue, orange...) and 'type' (square, round...)
I already have a Javascript that assign class active to the 2 filtering lu based on selection, if all color are selected shift the 'active' class to 'all', and more than one sub-filter can be activated. And this also save the list of the id of the active li items in a string for color filter and another string for shape filter
I also already set up the page like the combination filter Isotope demo at this link: http://isotope.metafizzy.co/demos/combination-filters.html and it is working fine but doesn't allow to select more than one sub-filter at the same time.
I saw the demo at this link http://fiddle.jshell.net/desandro/JB45z/ with filtering combination, but it is based on radio button that I'd like to avoid.
I'm not sure if what I'm trying to do is easy or not... is like, how to tell to Isotope to filter based on the sub-filter that have active class or based on the sum of the li with the ID saved in my two string?
Thanks for any help, as you can easily understand I'm not skilled in js at all and english is not my first language!
--- QUICKSAND --- (edited)
I've just realized that I didn't explain why I stored the IDs of the selected items in the js string. And this is also about the different js question.
I was trying to set up the same system with Quicksand instead of Isotope.
But since quicksand need to have a starting li and a destination li to display the animation I set up the js to pass an array to a different temporary php page that use the array to display a destination li.
All until here is working fine but I'm not able to get back the li data in the original page to let Quicksand perform the animation. The last part of my js appear to have problems that I'm not able to fix (too many days trying with no success), the last part of the js is:
$.post( 'destination_li_filtered.php', {
colorString,
shapeString,
$('#ids').attr('val')
},
function(data) { // should contains the resulting data from the request (?)
$('.list').quicksand( $(data).find('li'),
{ adjustHeight: 'auto' },
function() {
callbackCode();
}
);
e.preventDefault();
});
the external page destination-li-filtered is displaying the results but the original page is not able to take back the data...
Obviously I need to set op the page with isotope or quicksand, not both.
but I'm also wondering witch is the best plugin to display 100's of results with about 20 filters (without considering the combinations). And of course, which is the easiest to use!
You should see the radio button and the change in view as separate things.
It's a common misconception that you should store all your state in the DOM (ie. which checkbox is checked). The DOM is a view, you don't keep state in a view.
You should have a state that lives in your JavaScript.
Like:
var state = "all_selected"; // green, red, blue
Then, when you check the radio button, it will set the appropriate state and update the list (show/hide elements based on state).
This allows you to make any control you want, be it a radio button, a checkbox or something completely custom.