Create a cookie with the secure and httonly flags to display a banner

I premise I am fairly inexperienced in php and javacript, but I am trying to create a small website for myself.

In this website, I want to display a small banner with some text inside when a new user enters my website (whichever the webpage is) for the first time. The banner has the following characteristics:

When displayed for the first time, it remains on the screen for 7 seconds (so the user can read it)
After its disappearance, the user can continue to browse the website and pages without seeing the banner anymore.

To do so, I thought to create a plugin (for WORDPRESS) that creates a cookie, let’s call it banner_read. After the banner disappers, the cookie is created and the presence of the cookie does not cause the banner to be created. The cookie is only valid for the session (session cookie).

The first time I created the banner and the cookie via javascript code, also setting the ‘secure’ flag. The javascript code checks for the existence of the cookie and if it does not exist it creates the banner (with its settings). If I limit myself to this, the code works. In particular, the banner is displayed for seven seconds and the cookie is created after its disappearance, whichever is the first webpage displayed by the user.

Then, to be on the safe side and also out of curiosity, I wanted to set the ‘httponly’ flag as well, but from what I understand, it has to be done through php code, since the javascript code (to check the existence of the cookie) does not work if the httponly flag is set.

I have tried to create some php code to check the existence of the cookie and create it and javascript code to display the banner, but the code does not seem to work. In particular, the banner is not displayed and the cookie is created immediately.

Maybe for this simple cookie I don’t need both the flags, but not knowing the subject in depth, I would like to play it safe.

First code – I report here the javascript code that works (the CSS file for styling is external):

<?php
/*
Plugin Name: Custom Cookie Manager
*/

if (!defined('ABSPATH')) {
    exit;
}


// Enqueue styles and scripts
function custom_cookie_manager_enqueue_styles() {
    wp_enqueue_style('custom-cookie-manager-style', plugins_url('css/custom-cookie-manager.css', __FILE__));
}
add_action('wp_enqueue_scripts', 'custom_cookie_manager_enqueue_styles');

// Add the cookie banner
function custom_cookie_manager_banner() {
    ?>
    <script type="text/javascript">
        document.addEventListener('DOMContentLoaded', function() {
            if (!document.cookie.split('; ').find(row => row.trim().startsWith('banner_read='))) {
                var banner = document.createElement('div');
                banner.id = 'cookie-banner';
                banner.className = 'cookie-banner';
                banner.innerHTML = '<p>TEXT HERE</p>';
                document.body.appendChild(banner);
                
                setTimeout(function() {
                    banner.classList.add('hide');
                    document.cookie = "banner_read=true; path=/; Secure; SameSite=Strict";
                }, 7000); // 7 seconds
            }
        });
    </script>
    <?php
}
add_action('wp_footer', 'custom_cookie_manager_banner');
?>

Second code – Here the PHP and Javascript code that does not work:

<?php
/*
Plugin Name: Custom Cookie Manager
*/

if (!defined('ABSPATH')) {
    exit;
}

// Enqueue styles and scripts
function custom_cookie_manager_enqueue_styles() {
    wp_enqueue_style('custom-cookie-manager-style', plugins_url('css/custom-cookie-manager.css', __FILE__));
}
add_action('wp_enqueue_scripts', 'custom_cookie_manager_enqueue_styles');

// Add the cookie banner
function custom_cookie_manager_banner() {
    if (!isset($_COOKIE['banner_read'])) {
        ?>
        <script type="text/javascript">
            document.addEventListener('DOMContentLoaded', function() {
                var banner = document.createElement('div');
                banner.id = 'cookie-banner';
                banner.className = 'cookie-banner';
                banner.innerHTML = '<p>TEXT HERE</p>';
                document.body.appendChild(banner);
                
                setTimeout(function() {
                    banner.classList.add('hide');
                }, 7000); // 7 seconds
            });
        </script>
        <?php

        // Set cookie with HttpOnly and Secure flags
        setcookie('banner_read', 'true', 0, "/", "", true, true); // session cookie
    }
}
add_action('wp_footer', 'custom_cookie_manager_banner');
?>

Here is the CSS fyle:

/* css/custom-cookie-manager.css */
.cookie-banner {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #000;
    color: #fff;
    text-align: center;
    height: auto;
    z-index: 1000;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 20px 0 20px;
    box-sizing: border-box;
}

.cookie-banner.hide {
    visibility: hidden;
}

I expect the second to work as well as the first one.