Bảo vệ chống lại các cuộc tấn công CSRF ở Aurelia

Question

Trong Aurelia, dường như không có bất kỳ hỗ trợ nào đối với việc bảo vệ CSRF, trái ngược với tiêu đề XSRF-TOKEN của AngularJS được đặt tự động trên tất cả các yêu cầu XHR bởi khung công tác AngularJS.

Tôi nên bảo vệ ứng dụng Aurelia khỏi các cuộc tấn công CSRF bằng cách nào? Tôi có nên cuộn hỗ trợ của riêng tôi dựa trên OWASP CSRF Prevention Cheat Sheet hoặc có bất kỳ lựa chọn thay thế nào cho Aurelia?

Answer 1

Bạn có thể tự làm điều này khá dễ dàng bằng cách sử dụng số HTTP interceptors của Aurelia (xem examples in the docs). Trước mỗi yêu cầu, bạn có thể gửi mã thông báo của mình. Điều này có thể được thực hiện với cả thông thường aurelia-http-client và tiêu chuẩn mới aurelia-fetch-client.

Mã của bạn có thể trông như thế này:

export class MyRestAPI { 
    static inject() { return [HttpClient]; } // This could easily be fetch-client 

    constructor (http) { 
     this.http = http.configure(x => { 
      x.withBaseUrl(myBaseUrl); 
      x.useStandardConfiguration(); 
      x.withInterceptor({ 
       request: function (request) { 
        request.headers.set('XSRF-TOKEN', myAwesomeToken); 
        return request; 
       } 
      }); 
     }); 
    } 

    ... 

} 

On mọi yêu cầu, token của bạn sẽ được gửi đi. Bạn sẽ phải xử lý xác nhận ở phía máy chủ. Bạn có thể dễ dàng thiết lập mã để yêu cầu ban đầu của bạn có thể lấy mã thông báo hoặc bạn có thể chuyển mã thông báo trở lại như một phần của trọng tải xác thực hoặc nếu bạn muốn thậm chí lưu trữ mã thông báo trong bộ nhớ cục bộ của trình duyệt và sử dụng nó đường.

Bạn thậm chí có thể tiến thêm một bước và triển khai xác thực JWT. Nếu bạn đang sử dụng node.js, tôi có một số blog post nhỏ mô tả cách tôi đã triển khai JWT trong Express. Có một plugin trên Github được gọi là aurelia-auth xử lý JWT và có blog post on its implementation on the Aurelia blog as well.

Answer 2

Đây là trình chặn mẫu đọc mã thông báo từ tiêu đề phản hồi nếu nó tồn tại và đặt tự động trên mọi yêu cầu cần.

import {Interceptor, HttpResponseMessage, RequestMessage} from "aurelia-http-client"; 

class CsrfHeaderInterceptor implements Interceptor { 
    private static readonly TOKEN_HEADER = 'X-CSRF-Token'; 

    private latestCsrfToken: string; 

    response(response: HttpResponseMessage): HttpResponseMessage { 
    if (response.headers.has(CsrfHeaderInterceptor.TOKEN_HEADER)) { 
     this.latestCsrfToken = response.headers.get(CsrfHeaderInterceptor.TOKEN_HEADER); 
    } 
    return response; 
    } 

    request(request: RequestMessage): RequestMessage { 
    if (this.latestCsrfToken) { 
     if (['POST', 'PUT', 'PATCH'].indexOf(request.method) >= 0) { 
     request.headers.add(CsrfHeaderInterceptor.TOKEN_HEADER, this.latestCsrfToken); 
     } 
    } 
    return request; 
    } 
} 

Bạn đăng ký nó trong http của bạn/lấy khách hàng với ví dụ:

httpClient.configure((config) => { 
    config 
    .withBaseUrl("/api/") // adjust to your needs 
    .withHeader('Accept', 'application/json') // adjust to your needs 
    .withHeader('X-Requested-With', 'XMLHttpRequest') // adjust to your needs 
    .withInterceptor(new CsrfHeaderInterceptor()); 
});