热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

如何在前端js文件中安装,导入和使用DOMPurify?

如何解决《如何在前端js文件中安装,导入和使用DOMPurify?》经验,请帮忙看看怎么搞?

这更像是一种“您能确认这是正确的”问题吗,因为我认为我在编写问题的过程中已解决了该问题,但希望对其他有些犹豫的人有所帮助实施DOMPurify。

简洁版本

DOMPurify在前端js文件中像这样导入和使用是否安全/有效:

npm install dompurify --save

import DOMPurify from 'dompurify'; 

var clean = DOMPurify.sanitize('', {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('', {SAFE_FOR_JQUERY: true}));
console.log(DOMPurify.sanitize('', {SAFE_FOR_JQUERY: true}));
console.log(DOMPurify.sanitize('

abcdef', {SAFE_FOR_JQUERY: true})); console.log(DOMPurify.sanitize('', {SAFE_FOR_JQUERY: true})); console.log(DOMPurify.sanitize('', {SAFE_FOR_JQUERY: true})); console.log(DOMPurify.sanitize('', {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

一切都按预期方式记录,即:



abcdef

HELLO
HELLO

这样很好。

该官员DOMPurify自述显示以下方式来进口和使用:

// method 01

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) 用户以范围开始:

here is previously saved value

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:


img 
Video

我正在考虑在输入DOMPurify到达markdown-it之前(步骤04之前)对输入进行消毒。


推荐阅读
  • Iwouldliketobeabletohaveasidebarthatcanbetoggledinandoutonabuttonpress.However ... [详细]
  • IjustinheritedsomewebpageswhichusesMooTools.IneverusedMooTools.NowIneedtoaddsomef ... [详细]
  • sklearn数据集库中的常用数据集类型介绍
    本文介绍了sklearn数据集库中常用的数据集类型,包括玩具数据集和样本生成器。其中详细介绍了波士顿房价数据集,包含了波士顿506处房屋的13种不同特征以及房屋价格,适用于回归任务。 ... [详细]
  • Python正则表达式学习记录及常用方法
    本文记录了学习Python正则表达式的过程,介绍了re模块的常用方法re.search,并解释了rawstring的作用。正则表达式是一种方便检查字符串匹配模式的工具,通过本文的学习可以掌握Python中使用正则表达式的基本方法。 ... [详细]
  • 关键词:Golang, Cookie, 跟踪位置, net/http/cookiejar, package main, golang.org/x/net/publicsuffix, io/ioutil, log, net/http, net/http/cookiejar ... [详细]
  • Ihavethefollowingonhtml我在html上有以下内容<html><head><scriptsrc..3003_Tes ... [详细]
  • Python SQLAlchemy库的使用方法详解
    本文详细介绍了Python中使用SQLAlchemy库的方法。首先对SQLAlchemy进行了简介,包括其定义、适用的数据库类型等。然后讨论了SQLAlchemy提供的两种主要使用模式,即SQL表达式语言和ORM。针对不同的需求,给出了选择哪种模式的建议。最后,介绍了连接数据库的方法,包括创建SQLAlchemy引擎和执行SQL语句的接口。 ... [详细]
  • Android实战——jsoup实现网络爬虫,糗事百科项目的起步
    本文介绍了Android实战中使用jsoup实现网络爬虫的方法,以糗事百科项目为例。对于初学者来说,数据源的缺乏是做项目的最大烦恼之一。本文讲述了如何使用网络爬虫获取数据,并以糗事百科作为练手项目。同时,提到了使用jsoup需要结合前端基础知识,以及如果学过JS的话可以更轻松地使用该框架。 ... [详细]
  • 本文介绍了DataTables插件的官方网站以及其基本特点和使用方法,包括分页处理、数据过滤、数据排序、数据类型检测、列宽度自动适应、CSS定制样式、隐藏列等功能。同时还介绍了其易用性、可扩展性和灵活性,以及国际化和动态创建表格的功能。此外,还提供了参数初始化和延迟加载的示例代码。 ... [详细]
  • 本文详细介绍了在Linux虚拟化部署中进行VLAN配置的方法。首先要确认Linux系统内核是否已经支持VLAN功能,然后配置物理网卡、子网卡和虚拟VLAN网卡的关系。接着介绍了在Linux配置VLAN Trunk的步骤,包括将物理网卡添加到VLAN、检查添加的VLAN虚拟网卡信息以及重启网络服务等。最后,通过验证连通性来确认配置是否成功。 ... [详细]
  • 我正在尝试使用scrapycrallsingle运行完美运行的scrapy蜘蛛,但我无法在python脚本中运行它.主要问题是从不执行SingleBlogSpider.parse方 ... [详细]
  • 本文介绍了在满足特定条件时如何在输入字段中使用默认值的方法和相应的代码。当输入字段填充100或更多的金额时,使用50作为默认值;当输入字段填充有-20或更多(负数)时,使用-10作为默认值。文章还提供了相关的JavaScript和Jquery代码,用于动态地根据条件使用默认值。 ... [详细]
  • 如何压缩网站页面以减少页面加载时间
    本文介绍了影响网站打开时间的两个因素,即网页加载速度和网站页面大小。重点讲解了如何通过压缩网站页面来减少页面加载时间。具体包括图片压缩、Javascript压缩、CSS压缩和HTML压缩等方法,并推荐了相应的压缩工具。此外,还提到了一款Google Chrome插件——网页加载速度分析工具Speed Tracer。 ... [详细]
  • Ihaveaforminadirectivetemplate:我在指令模板中有一个表单:<formn ... [详细]
  • 开发笔记:python之Bottle框架
    篇首语:本文由编程笔记#小编为大家整理,主要介绍了python之Bottle框架相关的知识,希望对你有一定的参考价值。一、简单的Bottle框架1)bott ... [详细]
author-avatar
死神邀请我
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有