Should I use $_GET to dynamically load html?

Question

I am working on a social networking site using PHP, MySQL(PDO), JQuery, and HTML(CSS). I'm working on the profile page right now and I want to determine if the user is on their own page or another's to determine what inputs they'll have. I would like to keep a framework for the profile page and load the respective options rather than having 2 different pages (my profile vs other profile).

I'm learning JQuery and PHP as I go, so right now I am thinking, in JQuery, I can get the $_GET (?username= ) and compare it to the user id of who's logged in, then load the components I need based on that.

Or I determine the user in PHP then run a certain scrip to load the components.

Would on of these ways work, or is there a different/better way to do this?

Answer 1

I don't think you can use $_GET in JavaScript.

Instead, there is a URLSearchParams

const url = new URL('http://domain/path?username=someone');
const username = new URLSearchParams(url.search).get('username)'; // someone

Answer 2

在jquery中，您可以将$ .get（）与html数据类型一起使用

Answer 3

You can echo the PHP's GET value in JavaScript. But make sure, without makeItSafe (which you have to define yourself) this code can be exploited to perform cross site scripting attacks:

<script>
var myGlobalUserID = "<?php echo makeItSafe($_GET['userID']); ?>";
</script>

Answer 4

The best security practice is to not rely on anything happening in browser.

This means you should always figure out privileges on the server (on PHP side).

Variant 1 (Simple)

Let's assume you have authenticated the user and have the user as $currentUser and their id as $currentUser->id in PHP.

Now this user wants to view some profile by requesting url "profile?id=555"

So here's (basically) what you do on PHP side:

$requestedProfile = (int)$_GET['profile'];
if ($requestedProfile == $currentUser->id) {
    // they want own profile
    show_controls_for_own_profile();
} else {
    // they want someone else's profile
    show_controls_for_other_profile();
}

In this case, jQuery has nothing to do here.

Variant 2 (Separate requests)

Further, let's assume you want to cache the entire profile page to quickly load it into browser, and only after that, ajax-load additional controls associated with user's privileges.

then you have two controller methods (php scripts, whatever) each serving it's own part:

public function showProfile() {
    $requestedProfile = (int)$_GET['profile'];
    if (profile_exists($requestedProfile)) {
        show_the_profile($requestedProfile); // no check here
    }
}

The method above would return the generic profile page by its ID (with empty ".controls" element) and on that page, some jquery code would ask the server to return appropriate variant of user-dependent part.

$.ajax('/user-controls.php')
    .done(function(response) { $('.controls').html(response); });

Notice it does not tell the server any user ID - server should already know current authenticated user ID from the session!

The second function, same as in the beginning, will return just HTML for the controls:

// Example of getting current profile from server's headers
function get_viewed_profile_id()
{
    // url of previous profile page, e.g. http://example.com/profile?id=555
    $referer = $_SERVER['HTTP_REFERER']; 
    $query = parse_url($referer, PHP_URL_QUERY); // id=555
    parse_str($query, $params); // ['id' => '555']
    return $params['id']; // 555
}

// we should store the authenticated user in session, 
// not rely on anything user sends from their browser
$currentUserId = $_SESSION['user']->id; 
$requestedProfileId = get_viewed_profile_id();

// now that we know both viewed profile and current user,
// we can compare them
if ($requestedProfileId == $currentUserId) {
    // they want own profile
    show_controls_for_own_profile();
} else {
    // they want someone else's profile
    show_controls_for_other_profile();
}

Variant 3 (Passing PHP variable to javascript)

Same as above, but you don't rely on $_SERVER['HTTP_REFERER'] , and move some logic to Javascript instead:

Browser asks:

// look up currently browsed profile from current window url
var q = new URLSearchParams(window.location.search);
var controlsURL = '/user-controls.php?viewedProfile=' + q.get('id');
// ask for controls, specifying the currently browsed profile
$.ajax(controlsURL)
    .done(function(response) { $('.controls').html(response); });

And server responds with:

function get_viewed_profile_id()
{
    return (int)$_GET['viewedProfile'];
}

// we should store the authenticated user in session, 
// not rely on anyhting user sends from their browser
$currentUserId = $_SESSION['user']->id; 
$requestedProfileId = get_viewed_profile_id();

// now that we know both viewed profile and current user,
// we can compare them
if ($requestedProfileId == $currentUserId) {
    // they want own profile
    show_controls_for_own_profile();
} else {
    // they want someone else's profile
    show_controls_for_other_profile();
}

Answer 5

Simply declare one hidden field on page

<input type="hidden" id="username" value="<?php echo $_GET['username'];?>">

Get username value in it. Then simply fetch that value in jquery

<script>
$(document).ready(function(){
var username = $("#username").val();
if(username == "abc"){
$("#div_one").show();
$("#div_two").hide();
}
});
</script>

using if() condition and hide() , show() method load component which you want to show to user.