时间戳

首页 > 解决方案 > 我可以使用 jquery 在我的网站公共目录上方调用 ajax 函数吗？

jquery - 我可以使用 jquery 在我的网站公共目录上方调用 ajax 函数吗？

问题描述

我一直在尝试建立一个基本的网站登录系统。现在，在将凭据发送到数据库之前，我陷入了错误验证。我的问题是：我对网站架构的幼稚理解以及我对 AJAX 和 JQuery 的不熟练。我会尽量让我的问题尽可能简洁，但我保证在这里的某个地方我会问一个愚蠢的问题：S。

我的范围：

我正在尝试设置一个非常简单的 Web 前端，它与我预先存在的 SQL 后端交互。我还试图将我与后端的大部分交互与我的 public_html 文件分开。从而混淆了所有真正重要的东西（数据库凭证、SQL 交互等）。这使得不法分子很难破坏我的后端框架。我想你可以说我要通过使几乎所有文件（除了 2、login.php 和loggedIn.php）对任何无法直接访问服务器的人完全不可读来实现网络“安全”。

例如

我的网站目录：

secrets
public_html
-MyWebsite

如果：

我将我的 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 只会产生调用的结果。所以不会对网络安全有害，但还是有点可惜？

所以。就目前而言，案例 1 对我来说很好，但我无法弄清楚为什么案例 2 不会。再一次，如果这真的很愚蠢，请原谅我，我本身显然不是“专业人士”。但是我会尝试提供尽可能多的清理代码，以使这在我对 Web 架构知之甚少的情况下尽可能简单：S。

案例 1 代码

登录.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 的代码

登录.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 似乎工作得很好。如果出现问题，我可以测试输入数据并在下方显示错误消息。如果它通过了，我可以将用户发送到 login.php。

在案例 2 中，表单自己创建得很好，并且工作正常吗？但是，当我单击提交或帮助我按钮（小测试按钮）时没有任何反应？那么在 Jquery.js 和 Jquery1.js 之间的某处通信中断了吗？

写完这篇文章后，我开始认为问题在于 AJAX 在 public_html 之外？我记得在某处读到它必须与调用它的文件位于同一目录中？我不确定，这就是我在这里的原因。想知道是否有人对我做错了什么有意见（语法上或逻辑上？）。但我真的只是想找到一种方法来混淆最终用户的代码，同时在我的系统验证它们后，他们仍然有能力查看存储在我的数据库中的所有数据并与之交互？

我应该在根目录中有 Ajax.php 文件吗？我可以在 web 根目录之外拥有 AJAX/Jquery 文件吗？为了达到混淆目的？我可以将除 login.php 之外的所有文件存储在我的秘密文件中以将所有内容锁定吗？我可以使用哪些文件？哪个不能？是否有您知道的教程/首选读物可以帮助我使用 AJAX、JQuery、HTML、XML 等构建网站？

对不起，我有很多问题。这已经让我绞尽脑汁一段时间了。我相信这里可能有语法错误或2？我只是复制了大部分 Web 前端，然后从代码中删除了与此问题无关的其他功能。试图保持清洁。

所以可能缺少括号、分号等。但我想我的问题更多在于对 HTML Web 目录系统的基本理解。我目前从秘密文件运行我的数据库文件并与数据库进行交互。如果我从其他地方调用它并使用 AJAX 加载文件，我是否也可以在那里存储我的 JQuery？我可以将我的所有 JQuery 和 AJAX 代码连同我的数据库配置等存储在 /Secrets 中吗？

抱歉小说的问题。如果这对任何地方的眼睛都很难，我深表歉意。我试图让它尽可能地清理干净。

如果有人知道任何方式，我可能能够实现我想要的从 Web 根目录之外运行 JQuery 和 AJAX 的目标。或者可以告诉我为什么这是不可能的，也许就我的文件而言，为了最好的（可能的）安全性将我的文件放在哪里。这将不胜感激。非常感谢大家的时间！

TL；DR：
以上 2 例 ^。每个都有自己的 Web 目录设置。案例 1 有效。案例2没有。你能找到案例 2 没有的原因吗？

标签： jqueryhtmlajax

解决方案

所有 js/css/images 都在客户端工作（节点除外），这意味着它需要下载才能工作，因此它应该位于 public_html 文件夹中，因为它需要由最终用户浏览器检索以便被执行。

推荐阅读