react解析html的dangerouslySetInnerHTML
不合时宜的使用 innerHTML
可能会导致 cross-site scripting (XSS) 攻击。 净化用户的输入来显示的时候,经常会出现错误,不合适的净化也是导致网页攻击 的原因之一。
我们的设计哲学是让确保安全应该是简单的,开发者在执行“不安全”的操作的时候应该清楚地知道他们自己的意图。 dangerouslySetInnerHTML
这个 prop 的命名是故意这么设计的,以此来警告,它的 prop 值( 一个对象而不是字符串 )应该被用来表明净化后的数据。
在彻底的理解安全问题后果并正确地净化数据之后,生成只包含唯一 key __html
的对象,并且对象的值是净化后的数据。下面是一个使用 JSX 语法的栗子:
function createMarkup() { return {__html: 'First · Second'}; }; <div dangerouslySetInnerHTML={createMarkup()} />
这么做的意义在于,当你不是有意地使用 <div dangerouslySetInnerHTML={getUsername()} />
时候,它并不会被渲染,因为 getUsername()
返回的格式是 字符串
而不是一个 {__html: ''}
对象。{__html:...}
背后的目的是表明它会被当成 "type/taint" 类型处理。 这种包裹对象,可以通过方法调用返回净化后的数据,随后这种标记过的数据可以被传递给 dangerouslySetInnerHTML
。 基于这种原因,我们不推荐写这种形式的代码:<div dangerouslySetInnerHTML={{'{{'}}__html: getMarkup()}} />
.
这个功能主要被用来与 DOM 字符串操作类库一起使用,所以提供的 HTML 必须要格式清晰(例如:传递 XML 校验 )
原文地址:https://www.cnblogs.com/ygunoil/p/12426001.html
- WCF技术剖析之八:ClientBase<T>中对ChannelFactory<T>的缓存机制
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(48)-工作流设计-起草新申请
- 把windows2003“搬”到手机上。
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(53)-工作流设计-我的批阅
- ASP.NET MVC5+EF6+EasyUI 后台管理系统--任务调度系统解析
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(52)-美化EasyUI皮肤和图标
- ASP.NET MVC5+EF6+EasyUI 后台管理系统--系统权限全套完整图
- 互联网时代的产品升级和用户反馈故事
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(50)-Easyui 扁平化皮肤
- 微信终于做了它最擅长的业务,市场已经轰动
- Bootstrap Metronic 学习记录(二)菜单栏
- WCF技术剖析之十一:异步操作在WCF中的应用(上篇)
- Bootstrap Metronic 学习记录(一)简介
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(49)-工作流设计-我的申请
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Docker如何搭建私有registry镜像仓库
- Harbor介绍与企业级私有Docker镜像仓库搭建
- 如何查看docker run启动参数命令
- YAML 语言教程与使用案例
- 计算等压面要素场的基本检验指标
- Kubernetes K8S之SSL证书有效期修改
- Kubernetes K8S之通过yaml文件创建Pod与Pod常用字段详解
- Kubernetes K8S之kubectl命令详解及常用示例
- Kubernetes K8S之Pod 生命周期与init container初始化容器详解
- Kubernetes K8S之Pod生命周期与探针检测
- Kubernetes K8S之Pod 生命周期与postStart、preStop事件
- Kubernetes K8S之资源控制器RC、RS、Deployment详解
- python教程 | 最标准的地图调用方式(国家测绘局提供数据)
- Kubernetes K8S之资源控制器StatefulSets详解
- Kubernetes K8S之资源控制器Daemonset详解