我一直在尝试建立基本的网站登录系统。现在，在将凭据发送到数据库之前，我一直坚持进行错误验证。我的问题是：我对网站体系结构的幼稚理解以及我对AJAX和JQuery的缺乏熟练程度。我将尝试使问题尽可能简洁，但我保证在这里的某个地方我会问一个愚蠢的问题：S。
我正在尝试建立一个非常简单的Web前端，该前端与我现有的SQL后端进行交互。我还试图将我与后端的大部分互动与我的public_html文件分开。因此混淆了所有真正重要的内容（数据库凭证，SQL交互等）。这使得邪恶的个人很难破坏我的后端框架。我想您可以说，通过使几乎所有我的文件（2，login.php和loginIn.php除外）完全无法被任何无法访问服务器的人读取，来表示我为Web“安全”而努力。
例如
我的网络目录：
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/MyWebsite/login.php
上面案例1和2 ^
都会把我们带到login.php
但是如果我们输入：
www.MyWebsite.com/MyWebsite/Jquery.js
案例1
将以纯文本格式将我们带到Jquery.js。几乎每个想要查看的人都可以看到100％。
案例2
将带我们进入404。问题已解决，所有JQuery对世界都是不可见的。
AJAX同样适用，但是AJAX只会产生调用结果。这样对Web安全没有不利影响，但仍然让人感到无聊吗？
所以。就目前而言，情况1对我来说很好，但我不知道为什么情况2不适合。再说一次，请原谅我，如果那真是愚蠢的话，我本人显然不是“职业选手”。但是我将尝试提供尽可能多的清理代码，以使我尽可能简单明了，而对Web体系结构的了解却很少：S。
案例1代码
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);
?>
这导致我的登录页面上填充了用户名文本字段和提交按钮，以及用于测试目的的帮助我按钮。
提交表单时，错误数据显示在字段下方，并且一切正常。我从^上面清除了一些对系统没有影响的无用代码，因此，如果某处缺少括号或分号，我可以保证您没有问题。因为我可以看到它在我眼前起作用。它一定是语法上的东西还是什么？还是我对“网站目录如何传输信息”一无所知。
案例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似乎工作得很好。如果出现问题，我可以测试输入数据并在下面显示错误消息。如果通过了，我可以将用户发送到loginin.php。
在第2种情况下，表单可以很好地工作，并且可以正常工作吗？但是，当我单击“提交”或“帮助我”按钮（“小测试”按钮）时，什么都没有发生？那么Jquery.js和Jquery1.js之间的通信中断了吗？
写完这篇文章后，我开始认为问题出在AJAX不在public_html之外吗？我记得读过某个地方，它必须与调用它的文件位于同一目录中？我不确定，这就是为什么我在这里。想知道是否有人对我在做错的事情有看法（在语法上还是逻辑上？）。但是我真的只是想找到一种方法来混淆最终用户的代码，同时让他们有能力在系统验证它们之后查看并与数据库中存储的所有数据进行交互？
我应该在根目录中有Ajax.php文件吗？我可以在Web根目录之外拥有AJAX / Jquery文件吗？为了达到迷惑？我可以将我的所有文件（除了login.php除外）存储在我的机密文件中，以保持一切锁定状态吗？我可以使用哪些文件？我不能？您是否知道有教程/推荐读物，这可能对我使用AJAX，JQuery，HTML，XML等建立网站的过程有帮助？
对不起，我有很多问题。这只是让我绞尽脑汁了一段时间。我相信这里可能有语法错误或2？我只是复制了大部分Web前端，然后从代码中删除了与该问题无关的其他功能。试图保持清洁。
因此可能缺少括号，分号等。但是我想我的问题更多在于对HTML Web目录系统的基本理解。我目前从secrets文件运行我的DB文件，并且可以与数据库进行交互。如果我从其他地方调用JQuery并用AJAX加载文件，我是否也可以将JQuery存储在那里？我可以将所有的JQuery和AJAX代码以及数据库配置等存储在/ Secrets中吗？
对一个问题的小说感到抱歉。如果这在任何地方都很难，我深表歉意。我试图使其尽可能地清理。
如果任何人都知道我可能能够实现从Web根目录外部运行JQuery和AJAX的预期目标。或者可以告诉我为什么这是不可能的，也许就我的文件而言，将文件放置在哪里以获得最佳（可能的）安全性。这将不胜感激。非常感谢您的宝贵时间！
TL; DR：
^以上2例。每个都有各自的Web目录设置。
情况1有效。情况2没有。
您能否找到案例2没有的原因？
答案 0 :(得分：0)
所有js / css / images都在客户端运行（节点除外），这意味着需要下载才能正常工作，因此它应该位于public_html文件夹中，因为最终用户浏览器需要检索它为了被执行。