@aegisjsproject/sanitizer
卫生剂 API 多填充配置( c)
AegisJS 卫生项目
这是一个库的多填充( M) 卫生剂 API。 。 。 .
它提供了最低限度的多填充量 Element.prototype.setHTML() 打开 Document.parseHTML(), (中文(简体) ),
以及HTML,SVG,和MathML的配置文件. 但请注意
在这些消毒方法中默认的消毒器配置 仅限 默认支持 HTML.
“ base” 配置( 不是默认使用的内容) 事实 添加对 <svg>, (中文(简体) ),
和“ 完整” 配置支持 <svg> 打开 <math>。 。 。 .
这有助于通过以下方式防止XSS:
- 剥离事件属性, 如
onclick - 删除不安全的 URL 属性
<a href="javascript:..."> - 防止添加
<script>s 和<style>编号 - 删除其他潜在危险元素属性( T)
示例
import '@aegijsproject/sanitizer/polyfill.js';
import { sanitizer } from '@aegisjsproject/sanitizer/config/base.js';
document.body.setHTML(`
<header id="header">
<h1 onclick="alert(location.href)" data-foo="bar">Hello, World!</h1>
</header>
<nav id="nav" class="flex row">
<button type="button" popovertarget="bacon" popovertargetaction="show" accesskey="b">Show Bacon Ipsum</button>
<a href="#foo">Normal Link</a>
<a href="javascript:alert('javascript:')"><code>javascript:</code> Link</a>
<a href="data:text/plain,Not%20Allowed" target="_blank"><code>data:</code> Link</a>
<a href="${URL.createObjectURL(file)}" target="_blank"><code>blob:</code> Link</a>
</nav>
<main id="main"></main>
<div popover="auto" id="bacon">
<div>
<b>Bacon Ipsum</b>
<button type="button" popovertarget="bacon" popovertargetaction="hide">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="16" viewBox="0 0 12 16" fill="currentColor" role="presentation" aria-label="Close Popover">
<path fill-rule="evenodd" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48L7.48 8z"/>
</svg>
</button>
</div>
<p>Bacon ipsum dolor amet pork belly frankfurter drumstick jowl brisket capicola
short ribs.Cow chislic ham hock t-bone shoulder salami rump corned beef spare
ribs prosciutto bresaola picanha drumstick. Swine tail pork belly ribeye beef
kielbasa. Beef cupim ball tip pastrami spare ribs strip steak tongue salam
venison. Venison cupim meatball strip steak meatloaf prosciutto buffalo
frankfurter hamburger flank boudin.</p>
</div>
`, sanitizer);
限制允许的内容(如评论)
const sanitizer = {
elements: ['span', 'div', 'p', 'code', 'pre', 'blockquote', 'img', 'a'],
attributes: ['href', 'src', 'loading', 'height', 'width', 'class', 'alt', 'target'],
};
fetch('https://api.example.com/comments')
.then(resp => resp.json())
.then(comments => {
document.querySelector('.comments').append(...comments.map(comment => {
const el = document.createElement('div');
el.setHTML(comment.body, sanitizer);
return el;
}));
});
添加到允许的元素/ 属性
import { elements, attributes } from '@aegisjsproject/sanitizer/config/html.js';
const sanitizer = {
elements: ['hello-world', ...elements],
attributes: ['foo', ...attributes],
};
document.querySelector('.container').setHTML(`
<hello-world foo="bar"></hello-world>
`, sanitizer);
默认强制化( 如 innerHTML,支持的地方)
if ('trustedTypes' in globalThis) {
trustedTypes.createPolicy('default', {
createHTML(input) {
const el = document.createElement('div');
el.setHTML(input);
return el.innerHTML;
}
});
}