Helpex - Trao đổi & giúp đỡ Đăng nhập

AngularJS: Cách xử lý các tình huống dễ bị tổn thương XSS

Bài viết này trình bày các kịch bản khác nhau liên quan đến XSS (kịch bản chéo trang) và cách xử lý chúng một cách thích hợp bằng các tính năng AngularJS như SCE ($ sceProvider)dịch vụ vệ sinh ($ SanitizeProvider) . Xin vui lòng bình luận / đề nghị nếu tôi bỏ lỡ đề cập đến một hoặc nhiều điểm quan trọng. Ngoài ra, xin lỗi cho lỗi chính tả. Sau đây là các tình huống chính liên quan đến XSS được mô tả sau trong bài viết này:
  • Thoát HTML hoàn toàn
  • Chèn HTML theo cách bảo mật trong khi bỏ qua các phần tử, chẳng hạn như script script. Điều này cũng nguy hiểm và có thể làm mất trang web của bạn, nếu không được chăm sóc, đặc biệt là với thẻ img img.
  • Tin tưởng và chèn toàn bộ HTML; Điều này là nguy hiểm và có thể dễ dàng làm hỏng trang web của bạn

Thoát HTML bằng chỉ thị ng-bind

Trong trường hợp bạn muốn thoát toàn bộ HTML, bạn có thể muốn sử dụng lệnh ng-bind. Tất cả những gì nó làm là thoát khỏi các phần tử HTML và in nó như nó vốn có. Mã sau đây cho thấy việc sử dụng lệnh ng-bind.

<div>
<form>
<h1>AngularJS XSS Demo Test</h1>
<hr>
<div class="col-md-12">
<input type="text" ng-model="name" class="form-control col-md-12" ng-change="processHtmlCode()" placeholder="Enter Some HTML Text...">
</div>
</form>
</div>
<hr>
<div style="padding:20px">
<span><strong>ng-bind directive: Note that HTML text is entered as it is.</strong></span><br>
<span ng-bind="helloMessage"><span ng-non-bindable="">{{helloMessage}}</span></span>
</div>

Sơ đồ sau đây cho thấy ở trên. Hãy chú ý đến mã HTML được nhập vào trường văn bản. Nó được in như trên trang HTML.

Chèn HTML theo cách bảo mật, trong khi bỏ qua các thành phần, chẳng hạn như script script, sử dụng chỉ thị ng-bind-html

Đây là chìa khóa để giải quyết các cuộc tấn công XSS. Điều đó nói rằng, người ta vẫn nên quan tâm đến các yếu tố, ví dụ như img img  (bao gồm như một phần của danh sách trắng; các phần tử trống) vì nó có thể hiển thị bất kỳ hình ảnh nào (bao gồm cả hình ảnh bất hợp pháp) trên trang web của bạn, do đó,  làm mờ trang web của bạn. Sử dụng lệnh ng-bind-html, thẻ script javascript như Script script có thể bị bỏ qua ngay lập tức. Chỉ thị ng-bind-html đánh giá biểu thức và chèn HTML kết quả vào phần tử một cách an toàn. Đối với các trường hợp đầu vào của người dùng có thể bao gồm HTML (chẳng hạn như nhận xét), việc đưa vào lệnh ng-bind-html sẽ đảm bảo rằng văn bản được khử trùng đối với danh sách trắng các mã thông báo HTML an toàn. Danh sách trắng của các mã thông báo an toàn được mã hóa như một phần của mô đun $ sanitize và được đề cập dưới đây. Sau đây được bao gồm trong danh sách an toàn (lấy trực tiếp từ mã nguồn):

  • Các phần tử trống : diện tích, br, col, hr, img, wbr. Các chi tiết tương tự có thể được tìm thấy tại http://dev.w3.org/html5/spec/Overview.html#void-elements
  • Phần tử khối : địa chỉ, bài viết, sang một bên, blockquote, chú thích, trung tâm, del, dir, div, dl, hình, figcaption, footer, h1, h2, h3, h4, h5, h6, tiêu đề, hgroup, hr, in, map , menu, nav, ol, pre, script, phần, bảng, ul
  • Các phần tử nội tuyến : a, abbr, từ viết tắt, b, bdi, bdo, big, br, cite, code, del, dfn, em, font, i, img, in, kbd, nhãn, map, mark, q, ruby, rp , rt, s, samp, nhỏ, span, đình công, mạnh, phụ, sup, thời gian, tt, u, var
  • Các yếu tố thẻ kết thúc : colgroup, dd, dt, li, p, tbody, td, t feet, th, thead, tr, rp, rt. Các chi tiết tương tự có thể được tìm thấy tại http://dev.w3.org/html5/spec/Overview.html#optional-tags

Sau đây là hai yếu tố được thoát ra trong danh mục không đáng tin cậy . Trong trường hợp, bạn muốn hiển thị nó, bạn sẽ phải sử dụng dịch vụ $ sce và gọi phương thức trustAsHtml cho Angular để thực thi các phần tử được đề cập dưới đây.

  • kịch bản
  • Phong cách

Dưới đây đại diện cho mẫu mã biểu thị việc sử dụng lệnh ng-bind-html.

<div>
<form>
<h1>AngularJS XSS Demo Test</h1>
<hr>
<div class="col-md-12">
<input type="text" ng-model="name" class="form-control col-md-12" ng-change="processHtmlCode()" placeholder="Enter Some HTML Text...">
</div>
</form>
</div>
<hr>
<div style="padding:20px">
<span>ng-bind-html directive: Note that image is displayed appropriately as a result of text entered in the text field.</span>
<span ng-bind-html="helloMessage"></span>
</div>

Hình ảnh sau đây cho thấy nó trông như thế nào khi nhập mã HTML vào trường văn bản được chèn vào DOM một cách an toàn. Hãy chú ý đến phần tử của img img, một phần của các phần tử Void trong danh sách trên. Khi mã được nhập vào trường văn bản, hình ảnh xuất hiện dưới dạng Tên img Im trong danh sách đáng tin cậy (danh sách trắng)

Tin tưởng và chèn toàn bộ HTML

Cảnh báo: Điều này nguy hiểm và có thể dễ dàng làm hỏng trang web của bạn . Chỉ khi bạn biết và chắc chắn gấp đôi, bạn nên sử dụng trustAsHtml. Trong trường hợp, bạn tự tin rằng nội dung văn bản có thể được tin cậy, bạn có thể sử dụng dịch vụ $ sce và gọi phương thức trustAsHtml sau đó chèn toàn bộ HTML vào DOM. Hãy chú ý đến đoạn mã HTML và javascript trong đó dịch vụ $ sce được sử dụng để gọi phương thức trustAsHtml để tin tưởng mã HTML. Trong trường hợp đó, một mã như tên

3 hữu ích 0 bình luận 7.3k xem chia sẻ

Có thể bạn quan tâm

loading