Я пытался настроить базовую систему входа на сайт. И сейчас я застрял на проверке ошибок перед отправкой учетных данных в базу данных. Мои проблемы: мое наивное понимание архитектуры сайта и отсутствие у меня знаний в AJAX и JQuery. Я постараюсь сделать свой вопрос максимально сжатым, но я гарантирую, что где-то здесь я задам глупый вопрос: S.
Мой объем:
Я пытаюсь настроить очень простой веб-интерфейс, который взаимодействует с моим ранее существующим SQL-интерфейсом. Я также пытаюсь отделить большую часть моего взаимодействия с моим бэкэндом от моего файла public_html. Таким образом запутывает все действительно жизненно важные вещи (учетные данные БД, взаимодействия SQL и т. Д.). Это делает невероятно трудным для отвратительных людей повредить мою структуру бэкэнда. Я полагаю, вы могли бы сказать, что я собираюсь добиться «безопасности» в Интернете, сделав почти все мои файлы (кроме 2, login.php и loggedIn.php) полностью нечитаемыми для всех, кто не имеет прямого доступа к серверу.
Например
Мой веб-каталог:
secrets
public_html
-MyWebsite
IF:
Я помещаю свой login.php, мой Jquery.js и мой файл Ajax.php ВСЕ в "public_html / MyWebsite", он работает нормально.
Мой веб-каталог:
secrets
public_html
I
-MyWebsite
I
--login.php
--Jquery.js
--Ajax.php
НО
Если я меняю расположение файлов, вещи начинают ломаться. Я представляю, что это происходит из-за чего-то в моем коде, что я просто не могу видеть. Опять наверное супер наивная ошибка в моей архитектуре / логике?
Это архитектура, которую я пытаюсь достичь:
secrets
I
--Jquery1.js
--Ajax.php
*************
public_html
I
-MyWebsite
I
--login.php (with a few Jquery/Ajax calls)
--loggedIn.php ( interspersed referencing my core files ^)
--Jquery.js
Причина, по которой я пытаюсь достичь этого, состоит в том, что на практике, если у нас есть эти 2 вживую в сети. если мы перейдем к:
www.MyWebsite.com / МойВебСайт / login.php
Варианты 1 и 2 сверху ^
приведут нас к login.php
Однако, если мы введем:
www.MyWebsite.com / МойВебСайт / jquery.js
Дело 1
Приведет нас к Jquery.js в виде простого текста. 100% виден буквально всем, кто хочет просто проверить это.
Случай 2
Приведет нас к 404. Проблема решена, весь JQuery невидим для мира.
То же самое относится и к AJAX, однако AJAX будет всегда давать только результат вызова. так что не так ли это вредно для веб-безопасности, но все еще что-то вроде обмана?
Итак. В настоящее время дело 1 работает хорошо для меня, но я не могу понять, почему дело 2 не будет. Опять же, пожалуйста, прости меня, если это действительно глупо, я явно не "профессионал" как таковой. Но я постараюсь предоставить как можно больше очищенного кода, чтобы сделать его как можно более простым, с очень небольшим пониманием веб-архитектуры: S.
CASE 1 CODE
login.php
<?php
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script src="Jquery.js" type="text/javascript"></script> <!-- load our javascript file -->
<title>Login</title>
</head>
<body onload="formBuild()">
</body>
</html>
jquery.js
$(document).ready(function()
{
$('#logForm').submit(function(event)
{
$('.form-group').removeClass('has-error');
$('.help-block').remove();
var logData = {
'userName': $('input[name=txtUserName]').val()
}
$.ajax({
type : 'POST', //Form Type
url : 'Ajax.php',
data : logData,
dataType : 'json', // Return Expectation,
encode : true
})
.done(function(data)
{
if(!data.success)
{
if (data.errors.userName)
{
$('#userName-group').addClass('has-error');
$('#userName-group').append('<div class="help-block">' + data.errors.userName+ '</div>');
}
}
else
{
//INITIATE DO DATABASE STUFF
}
})
.fail(function(data)
{
});
event.preventDefault();
});
});
function formBuild() {
$('body').append('<div class="container" id="MainBody"></div>');
$("#MainBody").append('<form class="form-horizontal" role="form" id="logForm" name="" method="POST" action=""></form>');
$("#logForm").append('<div id="userName-group" class="form-group"</div>');
$("#userName-group").append('<label for="txtUserName" class="col-sm-2 control-label">Username:</label>');
$("#logForm").append('<div class="form-group" id="btnSubby"></div>');
$("#btnSubby").append('<div class="col-sm-10 col-sm-offset-2"><button type="submit" class="btn btn-success">Submit <span class="fa fa-arrow-right"></span></button></div>');
$("#MainBody").append('<div class="form-group" id="btnNeggy"></div>');
$("#MainBody").append('<div class="container text-right "><button class="btn btn-warning" onclick="checkError()">Help Me<span class="fa fa-arrow-right"></span></button></div>');
}
function checkError()
{
//TEST FLAG TO SEE IF AJAX AND JQUERY ARE TALKING
$("#logForm").hide();
}
ajax.php
<?php
$inputUser= $_POST['userName'];
if (empty($inputUser))
{
$errors['userName'] = 'Username is required';
}
if (!empty($inputUser))
{
$errors['userName'] = 'You have to enter a Username';
}
if (!empty($errors))
{
//RETURN ERROR DATA
$data['success'] = false;
$data['errors'] = $errors;
$_SESSION['Fail'] = "True";
}
else
{
//ALL ERRORS PASSED
//DO DB STUFF
}
//Return Data to form. - Errors
echo json_encode($data);
?>
Это приводит к тому, что моя страница входа в систему заполняется текстовым полем с именем пользователя и кнопкой отправки, а также кнопкой help me для тестирования.
Когда я отправляю форму, у меня под полями отображаются данные об ошибках, и все работает как надо. Я очистил некоторые из бесполезного кода, который не имел никакого влияния на систему сверху ^ так что, если где-то пропущена скобка или точка с запятой, я могу гарантировать, что это не проблема. Потому что я вижу, как это работает передо мной. Это должно быть что-то в синтаксисе или что-то? Или, опять же, мое невежество относительно того, «как каталог веб-сайта передает информацию».
КОД ДЛЯ СЛУЧАЯ 2
login.php
<?php
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script src="Jquery1.js" type="text/javascript"></script>
<title>Login</title>
</head>
<body onload="populatePage()">
</body>
</html>
jquery.js
$(document).ready(function()
{
});
function formBuild() {
$('body').append('<div class="container" id="MainBody"></div>');
$("#MainBody").append('<form class="form-horizontal" role="form" id="logForm" name="" method="POST" action=""></form>');
$("#logForm").append('<div id="userName-group" class="form-group"</div>');
$("#userName-group").append('<label for="txtUserName" class="col-sm-2 control-label">Username:</label>');
$("#logForm").append('<div class="form-group" id="btnSubby"></div>');
$("#btnSubby").append('<div class="col-sm-10 col-sm-offset-2"><button type="submit" class="btn btn-success">Submit <span class="fa fa-arrow-right"></span></button></div>');
$("#MainBody").append('<div class="form-group" id="btnNeggy"></div>');
$("#MainBody").append('<div class="container text-right "><button class="btn btn-warning" onclick="checkError()">Help Me<span class="fa fa-arrow-right"></span></button></div>');
}
function checkError()
{
// CALL JQuery FILE FROM OUTSIDE WEB DIRECTORY*******
$.ajax({url: "config/Jquery1.js", dataType: "script", success: function(TestLogin){}});
//*******PROBABLY WHERE THINGS ARE GOING WRONG?******
}
ajax.php
<?php
function Login()
{
$inputUser = $_POST['userName'];
if (!empty($inputUser))
{
}
else
{
$errors['userName'] = 'Username is required';
}
if (!empty($errors))
{
//RETURN ERROR DATA
$data['success'] = false;
$data['errors'] = $errors;
$_SESSION['Fail'] = "True";
}
}
//RETURN VABIABLE DECLARATION
echo json_encode($data);
?>
Jquery1.js
function TestLogin()
{
$('.form-group').removeClass('has-error');
$('.help-block').remove();
var logData = {
'userName': $('input[name=txtUserName]').val()
}
$.ajax({
type : 'POST', //Form Type
url : 'Ajax.php',
data : logData,
dataType : 'json', // Return Expectation,
encode : true,
success : function(Login){
//SUCCEED AND MESS WITH DB
//IT NEVER SEEMS TO MAKE IT HERE?
}
})
.done(function(data)
{
if(!data.success)
{
if (data.errors.userName)
{
$('#userName-group').addClass('has-error');
$('#userName-group').append('<div class="help-block">' + data.errors.userName+ '</div>');
}
}
else
{
//FAILURE CONDITIONS
}
})
.fail(function(data)
{
});
event.preventDefault();
}
function checkError()
{
//AGAIN, TEST BUTTON TO HIDE FORM AND SEE IF COMMUNICATION IS TAKING PLACE
$("#logForm").hide();
}
Случай 1, кажется, работает отлично. Я могу проверить входные данные и показать сообщения об ошибках, если что-то не так. И если он пройдет, я могу отправить пользователя на loggedin.php.
В случае 2 форма создает себя нормально, и работает? Однако ничего не происходит, когда я нажимаю кнопку «Отправить» или «Помочь мне» (маленькая кнопка тестирования)? Итак, где-то между Jquery.js и Jquery1.js нарушается связь?
После написания этого я начинаю думать, что проблема заключается в том, что AJAX находится вне public_html? Я помню, где-то читал, что он должен быть в том же каталоге, что и файл, который его вызывает? Я не был уверен, и именно поэтому я здесь. Хотите знать, если у кого-то есть мнение о том, что я делаю неправильно (синтаксически или логически?). Но я на самом деле просто хочу найти способ обфусцировать мой код от конечных пользователей, сохраняя при этом возможность просматривать и взаимодействовать со всеми данными, хранящимися в моей базе данных, как только моя система их проверит?
Должен ли я иметь файл Ajax.php в корневом каталоге? Могу ли я иметь файлы AJAX / Jquery ВНЕ от веб-корня? Для того, чтобы достичь запутывания? Могу ли я сохранить все мои файлы, кроме файла login.php, в моем файле секретов, чтобы все было заблокировано? С какими файлами я могу это сделать? Что я не могу? Известно ли вам учебное / предпочтительное чтение, которое может помочь мне в моем путешествии по созданию веб-сайта с использованием AJAX, JQuery, HTML, XML и т. Д.?
Извините, у меня так много вопросов. Это только что ломало мне голову какое-то время. Я полагаю, что здесь может быть синтаксическая ошибка или 2? Я просто скопировал большую часть своего веб-интерфейса, а затем удалил другие функции из кода, которые не имели ничего общего с этой проблемой. Пытаюсь держать его в чистоте.
Так что, возможно, пропущена скобка, точка с запятой и т. Д. Но я полагаю, что мой вопрос заключается больше в фундаментальном понимании системы веб-каталогов HTML. Я в настоящее время запускаю файлы БД из файла секретов и прекрасно взаимодействую с базой данных. Могу ли я хранить там мой JQuery, если я вызываю его откуда-то еще и загружаю файл с помощью AJAX? Могу ли я хранить весь свой код JQuery и AJAX в / Secrets вместе с конфигурацией моей БД и т. Д.
Извините за роман вопроса. Я прошу прощения, если это трудно на глазах. Я постарался сделать его максимально чистым.
Если кто-нибудь знает о каком-либо способе, я мог бы достичь желаемой цели - запустить JQuery и AJAX вне корневого веб-каталога. Или мог бы сказать мне, почему это невозможно и, возможно, куда поместить мои файлы для лучшей (возможной) безопасности, насколько мои файлы идут. Это будет с благодарностью. Спасибо всем большое за ваше время!
TL; DR:
2 случая выше ^. у каждого своя собственная настройка веб-каталога.
Дело 1 работает. Случай 2 нет.
Можете ли вы найти причину, по которой дело 2 не подходит?