react如何显示HTML之dangerouslySetInnerHTML

本文介绍在React中如何使用dangerouslySetInnerHTML属性来显示富文本内容,解释其工作原理,包括如何避免XSS攻击及正确使用此属性的方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在react中,通过富文本编辑器进行操作后的内容,会保留原有的标签样式,并不能正确展示。

在显示时,将内容写入__html对象中即可。具体如下:

 

<div dangerouslySetInnerHTML = {{ __html: checkMessages.details }} />

如果是直接调用接口中的值,则是以上的写法,如果是单纯的显示固定的内容,用如下的写法:

<div dangerouslySetInnerHTML={{ __html: '<div>123</div>' }} />

原理:

1.dangerouslySetInnerHTMl 是React标签的一个属性,类似于angular的ng-bind;

2.有2个{{}},第一{}代表jsx语法开始,第二个是代表dangerouslySetInnerHTML接收的是一个对象键值对;

3.既可以插入DOM,又可以插入字符串;

4.不合时宜的使用 innerHTML 可能会导致 cross-site scripting (XSS) 攻击。 净化用户的输入来显示的时候,经常会出现错误,不合适的净化也是导致网页攻击的原因之一。dangerouslySetInnerHTML 这个 prop 的命名是故意这么设计的,以此来警告,它的 prop 值( 一个对象而不是字符串 )应该被用来表明净化后的数据。

### Vue.js 中 `dangerouslyUseHTMLString` 的使用方法及注意事项 在 Vue.js 结合 Element UI 组件库时,有时需要渲染带有 HTML 标签的内容。为了安全起见,默认情况下,Vue.js 会转义任何插入到模板中的字符串内容,防止 XSS 攻击。然而,在某些特定场景下,确实有需求显示富文本或 HTML 片段。 Element UI 提供了一个名为 `dangerouslyUseHTMLString` 属性来支持这种功能[^1]。当设置此属性为 true 时,允许组件解析并展示传入的 message 或其他指定字段内的 HTML 字符串而不是将其作为纯文本处理。 #### 使用示例: 假设有一个消息提示框需要显示包含链接的消息,则可以这样做: ```html <template> <el-alert :title="message" type="info" show-icon :description="formattedDescription"></el-alert> </template> <script> export default { data() { return { description: '<a href="https://example.com">点击这里访问网站</a>' }; }, computed: { formattedDescription() { return { message: this.description, dangerouslyUseHTMLString: true } } } }; </script> ``` 上述代码片段展示了如何通过计算属性返回一个对象给 `el-alert` 组件,其中不仅包含了要显示的信息还指定了 `dangerouslyUseHTMLString` 参数为真值,从而实现了预期效果。 #### 注意事项: - **安全性风险**:启用该选项意味着开发者需自行确保所提供的 HTML 内容是可信且经过适当过滤后的数据源;否则可能会引入跨站脚本攻击 (XSS) 风险。 - **仅限必要情况使用**:除非绝对必需,一般不建议开启这个特性,因为大多数时候简单的文本呈现已经足够满足业务逻辑的需求了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值