我从文本区域得到了一些用户生成的html标记,我想在屏幕的另一部分上呈现它。标记将以字符串形式保存在组件的属性中。
由于明显的原因,我不想使用危险地设置HTML。是否有诸如标记为HTML 的解析器,以便它剥离脚本标记和其他无效的html。
使用sanitize-html模块对html进行清理,并使用危险地 SetInnerHTML呈现经过清理的字符串。
您可以创建一个简单的包装器组件:
const defaultOptions = { allowedTags: [ 'b', 'i', 'em', 'strong', 'a' ], allowedAttributes: { 'a': [ 'href' ] }, allowedIframeHostnames: ['www.youtube.com'] }; const sanitize = (dirty, options) => ({ __html: sanitizeHtml( dirty, options: { ...defaultOptions, ...options } ) }); const SanitizeHTML = ({ html, options }) => ( <div dangerouslySetInnerHTML={sanitize(html, options)} /> );
用法:
<SanitizeHTML html="<img src=x onerror=alert('img') />" />
您还可以使用react-sanitized-html的SanitizedHTML组件,该组件是react包装器sanitize-html:
sanitize-html
<SanitizedHTML allowedAttributes={{ 'a': ['href'] }} allowedTags={['a']} html={ `<a href="http://bing.com/">Bing</a>` } />