Javascript 如何在前端js文件中安装、导入和使用DOMPrify？

这更像是一个“你能确认这是正确的”类型的问题，因为我认为我在写问题的过程中解决了它，但希望它能帮助其他在实施时有点犹豫的人

短版

在前端js文件中这样导入和使用

domprify

是否安全/有效：

npm install dompurify --save

import DOMPurify from 'dompurify'; 

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

我尝试了以下方法：

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}));

所以这很好

问题

显示了以下导入和使用方法：

// 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);

PS，如果上下文需要…

实施方案是：

01）

用户从一个跨度开始：

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

已转换为此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>

我正在考虑在输入到

标记它之前（在步骤04之前），使用
domprify
对其进行消毒
 对于React：

import DOMPurify from "dompurify";
<div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(dirtyContent) }} />

从“domprify”导入domprify；

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

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

<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>

import DOMPurify from "dompurify";
<div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(dirtyContent) }} />