如何在块编辑器中显示发布内容

时间：2021-07-05 作者：leemon

我正在构建一个块来显示一组自定义帖子类型的帖子。这是打印它们的循环：

{ customposts.map( ( custompost, index ) => {
    return <div key={ index } className="custom-post">
        <h2 id={ custompost.id } className="custom-post-title">{ custompost.title.raw }</h2>
            <div className="custom-post-content">{ custompost.content.rendered }</div>
        </div>;
} ) }
但是，使用custompost.content.raw 或custompost.content.rendered 显示未解释的HTML代码。在第一种情况下，它打印块标记（带有HTML注释），在第二种情况下打印HTML标记，但在这两种情况下，代码都是逐字显示的。

如果我用RawHTML 组件，内容显示正确，但根据文档，这是不鼓励的，因为这容易发生跨站点脚本。

// This is discouraged
<div className="custom-post-content"><RawHTML>{ custompost.content.rendered }</RawHTML></div>
在块编辑器中显示帖子内容的最佳做法是什么？

1 个回复
最合适的回答,由SO网友:Sally CJ 整理而成

确实，使用RawHTML （或dangerouslySetInnerHTML) 感到气馁，而且确实容易XSS 攻击方式如下<img src=x onerror=alert(1)//> 和<p>abc<iframe//src=jAva&Tab;script:alert(3)>def</p>.

但如果需要直接从React设置HTML，则必须使用dangerouslySetInnerHTML, 直接（例如。<div dangerouslySetInnerHTML={ ({ __html: \'foo <b>bar</b>\' }) } />) 或通过RawHTML 在古腾堡（例如。<RawHTML>{ \'foo <b>bar</b>\' }</RawHTML>).

然而，无论是React、jQuery还是vanilla JS（直接访问innerHTML), 建议的做法始终是在将HTML传递给浏览器之前，对其进行清理，或确保其安全。

因此，尽管WordPress在JS中还没有HTML清理功能，但实际上有一些库，如DOMPurify 我们可以使用它来确保HTML是安全的。

还有其他的图书馆，你可以从中选择，但我想DOMPurify 太棒了，下面是一个示例，假设您已经安装了该软件包：

// At the top in your file:
import DOMPurify from \'dompurify\';
// or you can use wp_enqueue_script() to "normally" load the src/purify.js or
// dist/purify.min.js file, and a global window variable named DOMPurify will
// be available on the page.

// Then somewhere in your code, use DOMPurify.sanitize() to sanitize the HTML:
<div className="custom-post-content">
    <RawHTML>{ DOMPurify.sanitize( custompost.content.rendered ) }</RawHTML>
</div>
因此，我希望这有助于&；快乐编码！：）

标签： javascript   block-editor   html   小码农  

相关推荐

轻松地在主容器之外添加自定义HTML？

我的主题设置了max-width 我正在寻找一种方法来覆盖它，以便添加全屏视频背景。有没有一种相对简单的方法可以做到这一点，而不需要太过技术化？