Hướng dịch trực tiếp vs bộ lọc: XSS có thể thực hiện được không?

Question

Tôi có một phím dịch thực sự là một mã HTML, cả hai đều được mã hóa cũng như không được mã hóa.

$scope.translations = { 
    "html_code" : "<script>alert('Alert!');</script>", 
    "html_code_full" : "<script>alert('Alert!');</script>", 
    "greeting" : "Welcome!" 
    } 

Khi tôi sử dụng những giá trị này để hiển thị văn bản dịch trong quan điểm, tôi sử dụng hai phương pháp:

1. Như chỉ <span translate>{{translations.html_code}}</span>
2. Như lọc {{translations.html_code|translate}}

tôi cố gắng cùng cho translations.html_code_full. Dưới đây là đoạn code để xem:

translations.html_code = {{translations.html_code|translate}} 
translations.html_code = <span translate>{{translations.html_code}}</span> 

translations.html_code_full = {{translations.html_code_full|translate}} 
translations.html_code_full = <span translate>{{translations.html_code_full}}</span> 

Đây là sản phẩm tôi nhận được:

translations.html_code = <script>alert('Alert!');</script> 
translations.html_code = <script>alert('Alert!');</script> 


translations.html_code_full = <script>alert('Alert!');</script> 
translations.html_code_full = 

Vì nó là rõ ràng rằng việc thực hiện chỉ thị được mã hóa khóa dịch sang HTML, nhưng bộ lọc không phải là. Tại sao sự khác biệt này trong đầu ra giữa triển khai chỉ thị vs bộ lọc? Và tại sao tôi không nhận được cảnh báo nếu nó hiển thị HTML?

Here is the plunk Tôi đã tạo bản trình diễn.

Answer 1

Công việc khung AngularJS đang bảo vệ ứng dụng của bạn khỏi các cuộc tấn công XSS.

Cross-site scripting thực hiện trên các trang web chiếm khoảng 84% của tất cả các lỗ hổng bảo mật tài liệu của Symantec như của 2007.

- Wikipedia - Cross-site scripting

Vì vậy, những gì bạn thực sự cố gắng làm? Có lẽ chúng tôi có thể chỉ cho bạn cách làm điều đó một cách an toàn.

Answer 2

Đối với tôi, thư viện dịch không bao gồm tất cả các phiên bản. Vì vậy, tôi cần phải bao gồm một cuộc tấn công kịch bản bình thường và một cuộc tấn công nhắm mục tiêu Angular. Chúng tôi đọc một phần của URL dưới dạng khóa và sau đó hiển thị dưới dạng tin nhắn để mở để tấn công trong URL.

2 URL mà tôi thử nghiệm chống lại:

/mypage.html#/{{{}.")));alert(1)//";}} 

mypage.html#/%3Cscript%3Ealert('foo')%20%3C/script%3E 

Đối với tôi là người đầu tiên sẽ được thoát một cách chính xác nếu sử dụng chỉ thị dịch trong trang nhưng không phải là bộ lọc. Thứ hai là một cuộc tấn công thành công khi sử dụng chỉ thị trong trang nhưng đã được thoát đúng cách khi sử dụng bộ lọc.

Cuối cùng, tôi đã thoát, dịch và kiểm tra trong bộ điều khiển trước khi gán giá trị cho biến phạm vi. Vì vậy, bây giờ không có chỉ thị dịch hoặc bộ lọc trong trang.

function translateParam(paramData, defaultKey){ 
     var deferred = $q.defer(); 
     var trusted = $sce.trustAsHtml(paramData); 
     $translate(trusted).then(
      function(translatedString){ 
       if(translatedString == trusted){ 
        //no key has been found so show a default 
        deferred.resolve($translate.instant(defaultKey)); 
       } 
       else{ 
        //the key has been found correclty 
        deferred.resolve(translatedString); 
       } 
      } 
     ); 
     return deferred.promise; 
    } 

//called like this 
    $scope.error = translateParam('keyFromURL','defaultKeyInTranslateFile'); 

Bạn cần phải tiêm $ q, $ sce và $ dịch. Đối với tôi, đây là giải pháp an toàn và đáng tin cậy nhất.