إضافة XSRF لJavaScript (العربية (Arabic))

المقدمة

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

ما هو XSRF?

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 الخاص بك.