Cách tạo bộ lọc CSS dựa trên danh sách trắng trong PHP

Question

Tôi đang làm việc trên một trang web và tôi muốn làm cho người dùng có thể nhập CSS tùy chỉnh vào đó sẽ được hiển thị công khai. Tuy nhiên, nhìn thấy như là một thỏa thuận tốt của các cuộc tấn công XSS có thể được preformed thông qua CSS, tôi muốn để có thể tìm thấy một cách để "làm sạch" đầu ra CSS, tương tự như cách HTML Purifier hoạt động, bằng cách phân tích CSS, chạy CSS được phân tích cú pháp dựa vào danh sách trắng và sau đó xuất ra một biểu định kiểu mới dựa trên CSS được phân tích cú pháp và danh sách trắng.

Đã có thư viện như thế này chưa? Nếu không, có thư viện phân tích cú pháp CSS có thể được sử dụng để tạo triển khai tùy chỉnh không?

Answer 1

Tôi đoán bạn đang đi để viết phân tích cú pháp CSS của riêng bạn và bộ lọc, vì vậy đây là những gì tôi muốn xem xét, mặc dù tôi chưa bao giờ làm một điều như vậy:

• Thực hiện một (trắng) danh sách các các thuộc tính CSS được chấp nhận mà người dùng của bạn có thể sử dụng. Giống như: color, font-family.
• Tôi tin rằng có thể tốt hơn là không cho phép các biểu mẫu ngắn như background, ít nhất là ở đầu, để bạn có thể dễ dàng phân tích cú pháp các giá trị. Yêu cầu họ viết rõ ràng background-color, background-image.
• Nếu bạn muốn URL, chỉ cho phép các URL tương đối và loại bỏ mọi thứ thậm chí không giống như một URL. Vẫn đăng nhập các vấn đề này để bạn có thể cải thiện trình phân tích cú pháp và trình xác thực của mình.
• Hãy rất nghiêm ngặt trong phân tích cú pháp của bạn, loại bỏ mọi thứ mà trình phân tích cú pháp của bạn không hiểu ngay cả khi đó là CSS hợp lệ. Nói cách khác, tạo tập con CSS của riêng bạn.

Khi phân tích cú pháp, phần khó nhất sẽ là phân tích cú pháp complex CSS selectors. Nhưng bạn cũng có thể áp đặt tập hợp con của riêng bạn ở đây.

Dưới đây là một số (giả) mã, có lẽ nó sẽ giúp bạn bằng cách nào đó:

<?php 

function tokenizeCSS() { 
    return array(
     array(
      'selector' => '#foo .bar', 
      'properties' => array(
       'background-color' => 'transparent', 
       'color'   => '#fff', 
      ), 
     ); 
    ); 
} 

function colorValidator($color) 
{} 

/** 
* This is basically the white list. Keys are accepted CSS properties 
* and values are the validator callbacks. 
*/ 
$propertyValidators = array(
    'background-color' => 'colorValidator', 
    'color'   => 'colorValidator', 
); 

$filteredRules = array(); 

foreach (tokenizeCSS() as $rule) { 
    if (! validSelector($rule['selector'])) { 
     continue; 
    } 

    foreach ($rule['properties'] as $property => $value) { 
     /** 
     * Check property is in white list 
     */ 
     if (! isset($propertyValidators[$property]) { 
      continue; 
     } 

     /** 
     * Check property is valid 
     */ 
     if (! $propertyValidators[$property]($value)) { 
      continue; 
     } 

     /** 
     * Valid rule 
     */ 
     $filteredRules[$rule['selector']][$property] = $value; 
    } 
}