المقدمة

عند إضافة صندوق البحث في [المقال السابق], تركنا جانب خاصية أمنية حرجة: حماية XSRFM SK2この記事 سيقوم بشرح كيفية إضافة الحماية XSRF إلى صندوق البحث

ما هو XSRF?

XSRF تعني "Cross" -استغراق طلب الموقع . إنه نوع من الهجمات حيث يقوم موقع مخادع بإخدع المستخدم في القيام بأعمال على موقع آخر | . | على سبيل المثال |, | يمكن لموقع مخادف إخدع مستخدماً في إرسال سؤال بحث على موقعنا |

sequenceDiagram
    participant User as User
    participant Browser as Browser (JS)
    participant Server as ASP.NET Core Server
    participant Db as Database
    
    User->>Browser: Submit form or AJAX request
    Browser->>Server: Send HTTP request with XSRF token
    Server->>Server: Validate XSRF token
    alt Token Valid
        Server->>Db: Process request (e.g., Return search result)
        Db->>Server: Send response
        Server->>Browser: Return success response
        Browser->>User: Display success message
    else Token Invalid or Missing
        Server->>Browser: Return error response (400 Bad Request)
        Browser->>User: Display error message
    end

الإعداد

لإضافة Javascript XSRF نحتاج أن نضيف وضعية config إلى Program.cs التي تقول للتطبيق أن يقبل اسم م თავი لرمز XSRF. هذا يتم عن طريق إضافة الرمز التالي في Program.cs:

services.AddAntiforgery(options =>
{
    options.HeaderName = "X-CSRF-TOKEN";
});

هذا يخبر التطبيق أن يبحث عن X-CSRF-TOKEN عنوان عندما ي Validate the XSRF token.

إضافة رمز XSRF لAPI البحث

نحتاج أيضاً إلى إضافة خاصية على الAPI [ValidateAntiForgeryToken] هذا يفرض استخدام هذه الرموز

إضافة رمز XSRF إلى صندوق البحث

في صندوق البحث, نحتاج أن نضيف الرموز XSRF إلى الបឋមក. نضيف أولاً العلامة لإنتاج الرموز

<div x-data="window.mostlylucid.typeahead()" class="relative" id="searchelement"  x-on:click.outside="results = []">
    @Html.AntiForgeryToken()

ثم نضيف الرموز إلى العناوين في JavaScript:

    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
                }
            })
                .then(response => response.json())
                .then(data => {
                    this.results = data;
                    this.highlightedIndex = -1; // Reset index on new search
                });

كما ترون هذا يحصل على قيمة الرموز من حقل الإدخال ويضيفها إلى الرؤوس

في الختام

إنه بسيط نسبياً لإضافة حماية XSRF إلى JavaScript الخاص بك.