Скрыть конфиденциальные данные в столбце таблицы html

Question

У меня есть таблица html, а в первом столбце есть идентификатор. Этот столбец скрыт. Я прочитал сейчас, это плохой подход.

Но мне нужен этот скрытый идентификатор, когда пользователь выбирает строку и нажимает кнопку «Удалить», чтобы сделать запись ajax с этим идентификатором.

Где еще я должен поместить этот идентификатор в строку по-разному и почему этот подход плохой?

Answer 1

Добавить идентификатор в качестве атрибута в строках таблицы. Что-то вроде этого:

<tr data-id="1"> 
    <td><span class="delete">Delete</span></td> 
</tr> 

<tr data-id="2"> 
    <td><span class="delete">Delete</span></td> 
</tr> 

И когда пользователь нажимает на удаление или редактирование, получите его с помощью jquery.

$('.delete').bind('click', function (e) { 
    var $row = $(this).closest('tr'); 
    var id = $row.attr('data-id'); 

    // now you have `id` 
}); 

Answer 2

Независимо от того, где вы его размещаете, если конкретный фрагмент данных находится в HTML-передаваемом браузере, пользователь сможет его увидеть.

Вы можете сделать это непрямого, скрывая его и т.д., но делать это не будет каким-либо образом обеспечить его.

Мое предложение было бы реализовать на стороне сервера какой-то жесткий механизм контроля доступа, который гарантирует, что человек, пытающийся выполнить операцию удаления, обладает привилегией сделать это, - чем пытаться скрыть вещи на стороне клиента.

Возможно, вы также можете рассмотреть возможность применения какого-либо шифрования к идентификатору перед отправкой его клиенту, чтобы сделать его неопознанным.

Answer 3

Вы можете добавить атрибут данных для каждого элемента строки и прочитать его при нажатии на строку. Преимущество здесь в том, что значение атрибута данных не отображается на экране.

Answer 4

Чувствительные данные в качестве учетных данных не должны быть доступны на стороне клиента. Но поскольку я не знаю, что вы называете конфиденциальными данными, я предлагаю вам использовать объект данных jquery. Это имеет преимущество, чтобы сохранить DOM как можно более чистым:

//head or any DOM element 
$('head').data('key','myValue'); //set 
var value = $('head').data('key'); //get 

Answer 5

Если вы уже собираетесь иметь кнопку «Удалить» в строке, то нормальная конвенция будет поместить идентификатор прямо в скрытый вход поле внутри каждой формы, например:

<tr> 
    <td>John Smith</td> 
    <td>37</td> 
    <td> 
    <form action="/delete"> 
     <input type="hidden" name="id" value="id_for_this_row"> 
     <button type="submit">Delete</button> 
    </form> 
    </td> 
</tr> 

Этот код будет работать без каких-либо Javascript. Если вы хотите улучшить поведение, сделав сообщение формы в фоновом режиме с помощью AJAX и т. Д., Просто добавьте это сверху.

Если ваше приложение сильно AJAX уже, или вы не можете использовать отдельную форму на <tr>, то ответ Сампатх был бы мой идти к (добавление атрибута data-id к каждому <tr>.)