在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称:apostrophecms/sanitize-html开源软件地址:https://github.com/apostrophecms/sanitize-html开源编程语言:JavaScript 100.0%开源软件介绍:sanitize-htmlsanitize-html provides a simple HTML sanitizer with a clear API. sanitize-html is tolerant. It is well suited for cleaning up HTML fragments such as those created by CKEditor and other rich text editors. It is especially handy for removing unwanted CSS when copying and pasting from Word. sanitize-html allows you to specify the tags you want to permit, and the permitted attributes for each of those tags. If a tag is not permitted, the contents of the tag are not discarded. There are some exceptions to this, discussed below in the "Discarding the entire contents of a disallowed tag" section. The syntax of poorly closed
Allowing particular urls as a HTML comments are not preserved.
Additionally, Requirementssanitize-html is intended for use with Node.js and supports Node 10+. All of its npm dependencies are pure JavaScript. sanitize-html is built on the excellent Regarding TypeScriptsanitize-html is not written in TypeScript and there is no plan to directly support it. There is a community supported typing definition, npm install -D @types/sanitize-html If import * as sanitizeHtml from 'sanitize-html'; Any questions or problems while using How to useBrowserThink first: why do you want to use it in the browser? Remember, servers must never trust browsers. You can't sanitize HTML for saving on the server anywhere else but on the server. But, perhaps you'd like to display sanitized HTML immediately in the browser for preview. Or ask the browser to do the sanitization work on every page load. You can if you want to!
npm install sanitize-html or
The primary change in the 2.x version of sanitize-html is that it no longer includes a build that is ready for browser use. Developers are expected to include sanitize-html in their project builds (e.g., webpack) as they would any other dependency. So while sanitize-html is no longer ready to link to directly in HTML, developers can now more easily process it according to their needs. Once built and linked in the browser with other project Javascript, it can be used to sanitize HTML strings in front end code: import sanitizeHtml from 'sanitize-html';
const html = "<strong>hello world</strong>";
console.log(sanitizeHtml(html));
console.log(sanitizeHtml("<img src=x onerror=alert('img') />"));
console.log(sanitizeHtml("console.log('hello world')"));
console.log(sanitizeHtml("<script>alert('hello world')</script>")); Node (Recommended)Install module from console: npm install sanitize-html Import the module: // In ES modules
import sanitizeHtml from 'sanitize-html';
// Or in CommonJS
const sanitizeHtml = require('sanitize-html'); Use it in your JavaScript app: const dirty = 'some really tacky HTML';
const clean = sanitizeHtml(dirty); That will allow our default list of allowed tags and attributes through. It's a nice set, but probably not quite what you want. So: // Allow only a super restricted set of tags and attributes
const clean = sanitizeHtml(dirty, {
allowedTags: [ 'b', 'i', 'em', 'strong', 'a' ],
allowedAttributes: {
'a': [ 'href' ]
},
allowedIframeHostnames: ['www.youtube.com']
}); Boom! Default optionsallowedTags: [
"address", "article", "aside", "footer", "header", "h1", "h2", "h3", "h4",
"h5", "h6", "hgroup", "main", "nav", "section", "blockquote", "dd", "div",
"dl", "dt", "figcaption", "figure", "hr", "li", "main", "ol", "p", "pre",
"ul", "a", "abbr", "b", "bdi", "bdo", "br", "cite", "code", "data", "dfn",
"em", "i", "kbd", "mark", "q", "rb", "rp", "rt", "rtc", "ruby", "s", "samp",
"small", "span", "strong", "sub", "sup", "time", "u", "var", "wbr", "caption",
"col", "colgroup", "table", "tbody", "td", "tfoot", "th", "thead", "tr"
],
disallowedTagsMode: 'discard',
allowedAttributes: {
a: [ 'href', 'name', 'target' ],
// We don't currently allow img itself by default, but
// these attributes would make sense if we did.
img: [ 'src', 'srcset', 'alt', 'title', 'width', 'height', 'loading' ]
},
// Lots of these won't come up by default because we don't allow them
selfClosing: [ 'img', 'br', 'hr', 'area', 'base', 'basefont', 'input', 'link', 'meta' ],
// URL schemes we permit
allowedSchemes: [ 'http', 'https', 'ftp', 'mailto', 'tel' ],
allowedSchemesByTag: {},
allowedSchemesAppliedToAttributes: [ 'href', 'src', 'cite' ],
allowProtocolRelative: true,
enforceHtmlBoundary: false Common use cases"I like your set but I want to add one more tag. Is there a convenient way?"Sure: const clean = sanitizeHtml(dirty, {
allowedTags: sanitizeHtml.defaults.allowedTags.concat([ 'img' ])
}); If you do not specify "What if I want to allow all tags or all attributes?"Simple! Instead of leaving allowedTags: false,
allowedAttributes: false "What if I don't want to allow any tags?"Also simple! Set allowedTags: [],
allowedAttributes: {} "What if I want disallowed tags to be escaped rather than discarded?"If you set If you set If you set "What if I want to allow only specific values on some attributes?"When configuring the attribute in allowedAttributes: {
iframe: [
{
name: 'sandbox',
multiple: true,
values: ['allow-popups', 'allow-same-origin', 'allow-scripts']
}
]
} With Wildcards for attributesYou can use the allowedAttributes: {
a: [ 'href', 'data-*' ]
} Also you can use the allowedAttributes: {
'*': [ 'href', 'align', 'alt', 'center', 'bgcolor' ]
} Additional optionsAllowed CSS ClassesIf you wish to allow specific CSS classes on a particular element, you can do so with the This implies that the // Allow only a restricted set of CSS classes and only on the p tag
const clean = sanitizeHtml(dirty, {
allowedTags: [ 'p', 'em', 'strong' ],
allowedClasses: {
'p': [ 'fancy', 'simple' ]
}
}); Similar to allowedClasses: {
'code': [ 'language-*', 'lang-*' ],
'*': [ 'fancy', 'simple' ]
} Furthermore, regular expressions are supported too: allowedClasses: {
p: [ /^regex\d{2}$/ ]
}
Allowed CSS StylesIf you wish to allow specific CSS styles on a particular element, you can do that with the You must also use When constructing regular expressions, don't forget URLs in inline styles are NOT filtered by any mechanism other than your regular expression. const clean = sanitizeHtml(dirty, {
allowedTags: ['p'],
allowedAttributes: {
'p': ["style"],
},
allowedStyles: {
'*': {
// Match HEX and RGB
'color': [/^#(0x)?[0-9a-f]+$/i, /^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/],
'text-align': [/^left$/, /^right$/, /^center$/],
// Match any number with px, em, or %
'font-size': [/^\d+(?:px|em|%)$/]
},
'p': {
'font-size': [/^\d+rem$/]
}
}
});
Discarding text outside of |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论