这更像是“您能否确认这是正确的”类型的问题,因为我认为我在编写问题的过程中解决了它,但希望它对其他有点犹豫的人有所帮助实施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	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>
所以这很好。
问题
官方 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 开头:
<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
)将任何 markdown 呈现为 html(链接、图像、类、跨度等)。
05)
新值被添加到一个新span
元素(用 渲染markdown-it
)和data
替换该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 之前)对输入进行消毒。