一. 导言导言导言导言导言导言一,导言导言导言导言导言导言

甜甜圈洞的缓存可以是一种有用的技术, 您可以在其中隐藏页面的某些元素, 但不是全部。然而,执行起来可能很困难。使用HTMX(HTMX)的简单甜甜圈洞缓存技术。

问题

我对这个网站有一个问题, 就是我想用我的表格来使用反伪造的标志。这是防止跨界请求伪造(CSRF)攻击的良好安全做法。然而,这却造成网页的封存问题。反伪造标记是每个页面请求所独有的, 所以如果您隐藏页面, 所有用户都会使用相同的标记。这意味着,如果用户提交表格,该符号将无效,而表格提交将失败。 ASP.NET核心防止了这种情况,它应请求,在使用反伪造标记时,停止了所有封存。这是一个良好的安全做法,但这意味着该页面不会被隐藏。对于像这样的网站来说,这不是理想的,因为其内容大多是静态的。

解决方案

一个常见的方法是“甜甜圈”缓存, 隐藏页面的大部分部分, 但有一些元素。在 ASP.NET Core 中,有一系列方法可以实现这一点, 使用部分视图框架, 但是它执行起来很复杂, 常常需要具体的软件包和配置。我想要一个更简单的解决方案

因为我已经用到极好的了 HTMX 在此工程中有一个极简单的方法, 通过动态装入 HTMX 部分, 来获得动态“ 甜甜圈” 功能。我已经在博客上写了使用带有 Javascript 的反伪造请求 Tokens 然而,问题仍然是,这实际上使页面的缓存功能被切断。

现在,我可以恢复这个功能当使用 HTMX 动态装入部分时。

<li class="group relative mb-1">
    <div  hx-trigger="load" hx-get="/typeahead">
    </div>
</li>

很简单吧? 所有这一切都是对控制器中返回部分视图的单行代码的调用。这意味着在服务器上生成了反伪造标记, 并且页面可以与正常一样缓存。部分视图是动态装入的, 所以符号仍然为每个请求所独有。

注意:你如果像我用HTMX一样使用“SPA”的方法,你需要确保 load 事件不会在后按钮上再次点火。我之所以能做到这一点是因为我设定了第一个载荷覆盖目标的型号

  <div id="typeaheadelement" hx-trigger="load" hx-get="/typeahead"  hx-target="this" hx-swap="outerHTML"></div>

这意味着,它第一次运行时,它会清除源的 div, 并用下面控制器归还的部分内容替换为新内容。由于从服务器上生成到伪造标记, 并存储在会话曲奇中, 仍然应该使用这个方法( 直到我重新配置应用程序为止 ) 。

我们设置了 hx-target 至 this 主要为了避免联署材料出错;因为HTMX在完成请求时需要一个有效目标。

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

在部分内,我们还有简单的形式与反伪造标志。

<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>

然后,它包罗了打印头搜索的所有代码, 当它提交时, 它会拉动标语并添加到请求中( 和以前完全一样 ) 。

        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
                }
            })

在结论结论中

这是用HTMX卡住"甜甜圈"的超级简单方法。这是一个伟大的方法获得利益收缩没有复杂的额外的包包。我希望你觉得这很有用。如果在下文的评论中有任何问题,请通知我。

简单“ 门洞” 与 HTMX 缓存

一. 导言 导言 导言 导言 导言 导言 一,导言 导言 导言 导言 导言 导言

问题

解决方案

在结论结论中

一. 导言导言导言导言导言导言一,导言导言导言导言导言导言