Как установить, импортировать и использовать DOMPurify во внешнем js-файле? - PullRequest
Новая
       81

Как установить, импортировать и использовать DOMPurify во внешнем js-файле?

0 голосов
/ 10 октября 2018

Это скорее вопрос типа «можете ли вы подтвердить, что это правильно?», Так как я думаю, что решил его в процессе написания вопроса, но, надеюсь, он поможет другим людям, которые немного колеблются, когдаречь идет о реализации DOMPurify .

Короткая версия

Безопасно / допустимо ли импортировать и использовать DOMPurify как это в файле js внешнего интерфейса: 

npm install dompurify --save

import DOMPurify from 'dompurify'; 

var clean = DOMPurify.sanitize('<img src=x onerror=alert(1)//>', {SAFE_FOR_JQUERY: true});

Подробная версия

В настоящее время мой основной файл js импортируется с использованием следующих соглашений: 

import ClipboardJS from 'clipboard';

// date-fns functions
import getYear from 'date-fns/get_year';
import getMonth from 'date-fns/get_month';
import getDaysInMonth from 'date-fns/get_days_in_month';
import startOfMonth from 'date-fns/start_of_month';
import getDay from 'date-fns/get_day';
import format from 'date-fns/format';

import Cookies from './js.cookie';

Я попробовал следующее: 

npm install dompurify --save

import DOMPurify from 'dompurify';

console.log(DOMPurify.sanitize('<img src=x onerror=alert(1)//>', {SAFE_FOR_JQUERY: true}));
console.log(DOMPurify.sanitize('<svg><g/onload=alert(2)//<p>', {SAFE_FOR_JQUERY: true}));
console.log(DOMPurify.sanitize('<p>abc<iframe/\/src=jAva&Tab;script:alert(3)>def', {SAFE_FOR_JQUERY: true}));
console.log(DOMPurify.sanitize('<math><mi//xlink:href="data:x,<script>alert(4)</script>">', {SAFE_FOR_JQUERY: true})); 
console.log(DOMPurify.sanitize('<TABLE><tr><td>HELLO</tr></TABL>', {SAFE_FOR_JQUERY: true}));
console.log(DOMPurify.sanitize('<UL><li><A HREF=//google.com>click</UL>', {SAFE_FOR_JQUERY: true}));

Примеры строк:отсюда:

https://github.com/cure53/DOMPurify#some-purification-samples-please

И используйте флаг SAFE_FOR_JQUERY, упомянутый здесь:

https://github.com/cure53/DOMPurify#can-i-configure-it

Все регистрируется как ожидалось, т.е.: 

<img src="x">
<svg><g></g></svg>
<p>abcdef</p>
<math><mi></mi></math>
<table><tbody><tr><td>HELLO</td></tr></tbody></table>
<ul><li><a href="//google.com">click</a></li></ul>

Так что это хорошо.

Вопрос

В официальном файле Readme DOMPurify показаны следующие способы импорта и использования: 

// method 01
<script type="text/javascript" src="dist/purify.min.js"></script>
var clean = DOMPurify.sanitize(dirty);

// method 02
require(['dompurify'], function(DOMPurify) {
    var clean = DOMPurify.sanitize(dirty);
});

// method 03
npm install dompurify
const createDOMPurify = require('dompurify');
const { JSDOM } = require('jsdom');

const window = (new JSDOM('')).window;
const DOMPurify = createDOMPurify(window);

const clean = DOMPurify.sanitize(dirty);

// method 04
const createDOMPurify = require('dompurify');
const jsdom = require('jsdom').jsdom;

const window = jsdom('').defaultView;
const DOMPurify = createDOMPurify(window);

const clean = DOMPurify.sanitize(dirty);

Даже еслиспособ, которым я реализовал это не перечислено, это все еще безопасный / допустимый способ сделать это: 

npm install dompurify --save

import DOMPurify from 'dompurify';

PS, если требуется для контекста ...

Сценарий реализации:

01) Пользователь начинает с диапазона: 

<span class="editable" data-previous_value="here is previously saved value">here is previously saved value</span>

02) При нажатии на диапазон значение data-previous_value добавляется кэлемент input, который заменяет span.

03) Пользователь изменяет текст в элементе input и нажимает кнопку Сохранить.

04) Я использую markdown-it с параметром html, установленным на false и markdown-it-attrs (для добавления стилей CSS) и markdown-it-span (для определения spans) для отображения любой уценки в виде html (ссылки, изображения, классы, промежутки и т. Д.).

05) Новое значение добавляется к новому элементу span (отображается с markdown-it) и атрибуту data (unrendered), который заменяет элемент input.

06) Новое, не обработанное значение сохраняется в базе данных MongoDB через Node/Express.

Например, следующий код: 

![img](/img/my_thumb.jpg){.video_thumb} [Video](https://www.youtube.com/watch?v=dQw4w9WgXcQ)

преобразуется в этот html: 

<span class="editable" data-previous_value="![img](/img/my_thumb.jpg){.video_thumb} [Video](https://www.youtube.com/watch?v=dQw4w9WgXcQ)">
<img src="/img/my_thumb.jpg" alt="img" class="video_thumb"> 
<a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">Video</a>
</span>

Я думаю о санации ввода с помощью DOMPurify передон достигает markdown-it (до шага 04).

...