Εισαγωγή

Το Donut hole caching μπορεί να είναι μια χρήσιμη τεχνική όπου θέλετε να κρυπτογραφήσετε ορισμένα στοιχεία μιας σελίδας, αλλά όχι όλα τα. Ωστόσο, μπορεί να γίνει περίεργο για την εφαρμογή.Σε αυτό το άρθρο θα σας δείξω πώς να εφαρμόσετε μια απλή τεχνική του donut hule caching χρησιμοποιώντας HTMXM SK2

Το πρόβλημα

Ένα πρόβλημα που είχα με αυτόν τον ιστότοπο είναι ότι ήθελα να χρησιμοποιήσω το Anti-forgery tokens με τα φόρματά μου.Αυτό είναι μια καλή πρακτική ασφάλειας για την πρόληψη του CrossM SK2Site Request Forgery MK3CSRF) επιθέσεις.Μαζί με το , προκάλεσε ένα πρόβλημα με την κάθαρση των σελίδωνM Sk7Το AntiΜSK8Forgery token είναι μοναδικό σε κάθε αίτηση σελίδαςMesk9 έτσι ώστε αν κρυπτογραφείτε τη σελίδαMosk10 το token θα είναι το ίδιο για όλους τους χρήστεςMask11 Αυτό σημαίνει ότι εάν ένας χρήστης υποβάλλει ένα έντυποMzk12το το tok

Η λύση

Ένας κοινός τρόπος γύρω από αυτό είναι 'donut τρύπα' caching όπου κρυπτογραφείτε την πλειοψηφία της σελίδας αλλά ορισμένα στοιχείαM SK2 ΥπάρχουνMK3 μια σειρά από τρόπους για να επιτύχει αυτό στο ASP.NET Core χρησιμοποιώντας το μερικό πλαίσιο προβολής ωστόσοΜSK5 περίπλοκο να εφαρμοστεί και συχνά απαιτεί ειδικά πακέτα και διαμόρφωσηMSKA6 θέλω μια απλούστερη λύσηMKA7

Επειδή ήδη χρησιμοποιώ το εξαιρετικό HTMX Σε αυτό το έργο, η ' επιτυγχάνει έναν πολύ απλό τρόπο για να αποκτήσει δυναμική ' επιτύχει την τρύπα και τη λειτουργικότητα της ' μέσω του δυναμικού φόρτισης των Μερικών με HTMX επιτύχουν τις επιχειρήσεις .. Έχω ήδη μπλογκ για Χρησιμοποιώντας το AntiForgeryRequest Tokens με Javascript Ωστόσο, πάλι το πρόβλημα ήταν ότι αυτό αποτελεσματικά απενεργοποιήθηκε η κάρτα για τη σελίδα.

Τώρα μπορώ να επαναφέρω αυτή τη λειτουργικότητα όταν χρησιμοποιώ το HTMX για δυναμική φόρτιση μερών.

  <li class="group relative mb-1 hidden lg:block ml-2" id="typeaheadelement">
    <div  hx-trigger="load" hx-get="/typeahead" hx-target="#typeaheadelement" hx-swap="innerHTML"></div>
</li>

Dead simple, δεξιά? Όλα αυτά καλούνται στην ενιαία γραμμή κώδικα στον ελεγκτή που επιστρέφει την μερική προβολήM SK2 Αυτό σημαίνει ότι ο κωδικός AntiMK3forgery παράγεται στον διακομιστή και η σελίδα μπορεί να αποθηκευτεί ως φυσιολογικόΜSK4 Η μερική εμφάνιση φορτίζεται δυναμικά έτσι ώστε το κωδικό εξακολουθεί να είναι μοναδικό σε κάθε αίτηση

ΣΗΜΕΙΩΣΗ: Εάν χρησιμοποιείτε μια 'SPAM SK2 όπως η προσέγγιση που κάνω με HTMX πρέπει να βεβαιωθείτε ότι το load Η εκδήλωση δεν θαυμάζει το ' θα πυροβολήσει ξανά στο πίσω κουμπί του . ίσως κάνω αυτό να συμβεί με τη ρύθμιση της γραμματοσειράς για να υπεγράψετε τον στόχο στην πρώτη φόρτιση.

Αυτό σημαίνει ότι την πρώτη φορά που τρέχει καθαρίζει το αρχικό div και το αντικαθιστά με το νέο περιεχόμενο από το εν μέρει επιστρέφεται από τον ελεγκτή κάτω. Καθώς ο Anto-forgery token παράγεται στον διακομιστή και αποθηκεύεται σε ένα cookie συνεδρίας θα πρέπει ακόμα να λειτουργεί με αυτή τη προσέγγιση M SK2μέχρι να επαναφέρω την εφαρμογήMK3

Εμείς θέτουμε το hx-target στο εξωτερικό στοιχείο κυρίως για να αποφευχθεί ένα σφάλμα JS; καθώς η HTMX χρειάζεται έναν έγκυρο στόχο κατά την ολοκλήρωση της αίτησης. Έτσι μπορείτε να βρείτε το ' αφαιρέσει το στοιχείο που προκάλεσε την αίτηση HTMx

    [ResponseCache(Duration = 0, Location = ResponseCacheLocation.None, NoStore = true)]
    [HttpGet("typeahead")]
    public IActionResult TypeAhead()
    {
        return PartialView("_TypeAhead");
    }

Μέσα στο κομμάτι έχουμε ακόμα την απλή μορφή με το αντι-forgery token.

<div x-data="window.mostlylucid.typeahead()" class="relative" id="searchelement"  x-on:click.outside="results = []">
    @Html.AntiForgeryToken()
    <label class="input input-sm dark:bg-custom-dark-bg bg-white input-bordered flex items-center gap-2">
        <input
            type="text"
            x-model="query"
            x-on:input.debounce.300ms="search"
            x-on:keydown.down.prevent="moveDown"
            x-on:keydown.up.prevent="moveUp"
            x-on:keydown.enter.prevent="selectHighlighted"
            placeholder="Search..."
            class="border-0 grow  input-sm text-black dark:text-white bg-transparent w-full"/>
        <i class="bx bx-search"></i>
    </label>
    <!-- Dropdown -->
    <ul x-show="results.length > 0"
        class="absolute z-10 my-2 w-full bg-white dark:bg-custom-dark-bg border border-1 text-black dark:text-white border-b-neutral-600 dark:border-gray-300   rounded-lg shadow-lg">
        <template x-for="(result, index) in results" :key="result.slug">
            <li
                x-on:click="selectResult(result)"
                :class="{
                    'dark:bg-blue-dark bg-blue-light': index === highlightedIndex,
                    'dark:hover:bg-blue-dark hover:bg-blue-light': true
                }"
                class="cursor-pointer text-sm p-2 m-2"
                x-text="result.title"
            ></li>
        </template>
    </ul>
</div>

Αυτό στη συνέχεια ενσωματώνει ολόκληρο τον κώδικα για την αναζήτηση tipahead και όταν ενημερώνεται' υποβάλλεται αποστέλλει το token και προσθέτει στο αίτημα ( ακριβώς όπως πριν ενημερώθηκε).

        let token = document.querySelector('#searchelement input[name="__RequestVerificationToken"]').value;
            console.log(token);
            fetch(`/api/search/${encodeURIComponent(this.query)}`, { // Fixed the backtick and closing bracket
                method: 'GET', // or 'POST' depending on your needs
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': token // Attach the AntiForgery token in the headers
                }
            })

Στο συμπέρασμα

Αυτό είναι ένας πολύ απλός τρόπος για να πάρετε 'donut τρύπα' caching με HTMXM SK2 ΤοMK3 έχει έναν εξαιρετικό τρόπο για να πάρει τα οφέλη του caching χωρίς την πολυπλοκότητα ενός επιπλέον πακέτουMST4 ελπίζω ότι θα βρείτε αυτό χρήσιμοMSC5 Πείτε μου αν έχετε οποιαδήποτε ερωτήσεις στα σχόλια παρακάτωMSM6