文章/答案/技术大牛

发布

来自专栏code秘密花园
React 的一些最佳安全实践
dangerouslySetInnerHTML React 会对默认的数据绑定({})进行自动转义来防止 XSS 攻击，所有数据都会认为是 textContent：但是为了保障开发的灵活性，它也给我们提供了一些直接渲染 HTML 的方法，比如 dangerouslySetInnerHTML：在把数据传入 dangerouslySetInnerHTML 之前，一定要确保数据是经过过滤或转义的，比如可以通过 dompurify.sanitize const code = "<input onfocus=alert(1) autofocus />"; return (
<div dangerouslySetInnerHTML ={{ __html: dompurify.sanitize(code) }} />
); } 避免直接操作 DOM 注入 HTML 除了 dangerouslySetInnerHTML 来插入 HTML：这两个操作都是相当危险的操作，推荐大家既然用了 React 就要尽量用 React 的编写方式来写代码，尽量不要直接操作 DOM，如果你确实要渲染富文本，还是推荐用上面提到的 dangerouslySetInnerHTML
1.5K20编辑于 2023-01-09
来自专栏h5
RLayer：基于React.js多功能弹层组件
='rlayer-msg__group'> { opt.title && <div className='rlayer-msg__title' dangerouslySetInnerHTML <div className='rlayer-msg__content' dangerouslySetInnerHTML={{__html: opt.content}}>
(<div className='rlayer__wrap-cnt' dangerouslySetInnerHTML={{__html: opt.content}}>
) <div className={domUtils.classNames('rlayer__toast-icon', 'rlayer__toast-'+opt.icon)} dangerouslySetInnerHTML (<div className='rlayer__wrap-cnt' dangerouslySetInnerHTML={{__html: opt.content}}>
)

2.9K60发布于 2020-12-07

来自专栏前端干货和生活感悟

React源码解析之updateHostComponent和updateHostText

=== 'object' && props.dangerouslySetInnerHTML ! == null && props.dangerouslySetInnerHTML.__html ! = null) ); } type应该表示html里的标签，如<textarea>、<option>、noscript props.children指节点里的内容是否是字符串还是数字 dangerouslySetInnerHTML 即innerHTML，里面内容也是字符串关于dangerouslySetInnerHTML的介绍与使用，请参考： https://zh-hans.reactjs.org/docs/dom-elements.html #dangerouslysetinnerhtml 也就是说，一旦shouldSetTextContent()判断为true，就确定该节点为文本节点 (4) 如果isDirectTextChild为true

1.3K10发布于 2020-02-24

来自专栏采云轩

浅谈 React 中的 XSS 攻击

在 React 中可引起漏洞的一些写法使用 dangerouslySetInnerHTML dangerouslySetInnerHTML 是 React 为浏览器 DOM 提供 innerHTML 通常来讲，使用代码直接设置 HTML 存在风险，因为很容易使用户暴露在 XSS 攻击下，因为当使用 dangerouslySetInnerHTML 时，React 将不会对输入进行任何处理并直接渲染到 HTML 中，如果攻击者在 dangerouslySetInnerHTML 传入了恶意代码，那么浏览器将会运行恶意代码。看下源码： function getNonChildrenInnerMarkup(props) { const innerHTML = props.dangerouslySetInnerHTML; // 有dangerouslySetInnerHTML属性，会不经转义就渲染__html的内容 if (innerHTML !

3.1K30发布于 2020-09-24

来自专栏全栈程序员必看

js换行符转换html换行

js换行符转换html换行在标签中加入： dangerouslySetInnerHTML={ { __html: 有换行符的数据?. div style={ { float: 'right', width: 316, fontSize: 14 }} dangerouslySetInnerHTML

12.7K10编辑于 2022-08-31

来自专栏前端干货和生活感悟

前端小知识10点（2019.5.18）

9、使用
代替回车符↵，并且使用dangerouslySetInnerHTML使 react 的 DOM 元素可以读取字符串中的标签 dangerouslySetInnerHTML相当于 innerHtml let str=comment.split(/\r\n|\r|\n/g).join('
') <div dangerouslySetInnerHTML={{__html:str}} />

42030编辑于 2022-03-28

来自专栏木头编程 - moTzxx

React 初学实现异步获取表格数据列表展示，点击事件（传参）实例

span className="span-list_order">{role.list_order} <div dangerouslySetInnerHTML role_id); } 官方文档—— 【React-传递函数给组件】【总结】鉴于点击事件的性能优化；建议使用文中的方式，也可参考后面的文章；对于富文本的转化显示，请注意 dangerouslySetInnerHTML 参考文章【React 点击事件的 bind(this) 传参问题】【react中 dangerouslySetInnerHTML 使用】

2.6K20编辑于 2022-01-06

来自专栏码艺坊

React中将HTML内容转换为图片和PDF的方法与实践

> { document.body.appendChild(canvas); }); }; return (

<div ref={canvasRef} dangerouslySetInnerHTML PNG', 0, 0); pdf.save('document.pdf'); }); }; return (

<div id="html-to-pdf" dangerouslySetInnerHTML htmlContent }) => { const componentRef = React.createRef(); return (

<div ref={componentRef} dangerouslySetInnerHTML

2K21编辑于 2024-08-13

来自专栏小生观察室

如何在bugcrowd批量捡洞

通过谷歌搜索react xss，发现如下文章 https://www.stackhawk.com/blog/react-xss-guide-examples-and-prevention/ 文章提到dangerouslySetInnerHTML 为危险的功能直接在js中里面搜索dangerouslySetInnerHTML，可以发现name以危险的方式直接输出到页面 image.png 继续搜索buildItem函数，需要确定具体被调用的位置 name进行结合在一起即可，最后搜索一下bugc即可显示最后效果 image.png 因预输入的原因，网站会将用户输入的东西进行联想并输出到页面，其中包括了名字，而某些的名字带有XSS荷载，正好是用dangerouslySetInnerHTML

3.4K20编辑于 2022-04-12

来自专栏地方网络工作室的专栏

React + webpack 开发单页面应用简明中文文档教程（八）Link 跳转以及编写内容页面

return (

{i.author.loginname} 说：

<article dangerouslySetInnerHTML dat.author.loginname}
日期：{dat.create_at}

<article dangerouslySetInnerHTML 其他补充 dangerouslySetInnerHTML={{__html: dat.content}} 是渲染 html 代码的方式。使用时一定要注意安全。

83720发布于 2019-05-26

来自专栏静心物语313的Coding

jsx语法

name}; || 比较运算符；左边的值真，返回左边的值，假返回右边的值；万能的函数表达式：如果不使用以上的四种表达式，可以使用（function(){}）(this) 非 DOM 属性介绍 dangerouslySetInnerHTML 、ref、key dangerouslySetInnerHTML写html代码：在jsx中直接插入html代码； ref:父组件引用子组件； key:提高渲染性能；（使用react diff算法

1.2K10发布于 2020-03-24

来自专栏前端干货和生活感悟

React源码解析之HostComponent的更新(上)

//https://zh-hans.reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml else if (propKey voidElementTags[tag]) { //不能包含子标签，报出 error invariant( props.children == null && props.dangerouslySetInnerHTML == null, '%s is a void element tag and must neither have `children` nor ' + 'use `dangerouslySetInnerHTML ', ); invariant( typeof props.dangerouslySetInnerHTML === 'object' && HTML in props.dangerouslySetInnerHTML , '`props.dangerouslySetInnerHTML` must be in the form `{__html: ...}`. ' + 'Please visit

6.5K30发布于 2020-03-04

来自专栏前端印象

手把手带你10分钟手撸一个简易的Markdown编辑器

html字符串解析成真正的html标签 />

) } 对于将 html字符串转化为真正的html标签的操作，我们借助了React提供的dangerouslySetInnerHTML write" ref={show} onScroll={(e) => handleScroll(2, e)} dangerouslySetInnerHTML write" ref={show} onScroll={(e) => handleScroll(2, e)} dangerouslySetInnerHTML write" ref={show} onScroll={(e) => handleScroll(2, e)} dangerouslySetInnerHTML write" ref={show} onScroll={(e) => handleScroll(2, e)} dangerouslySetInnerHTML

2.5K10发布于 2021-06-09

来自专栏洛竹早茶馆

React 面试必知必会 Day 6

dangerouslySetInnerHTML 属性是 React 在浏览器 DOM 中使用 innerHTML 的替代品。在这个例子中，MyComponent 使用 dangerouslySetInnerHTML 属性来设置 HTML 标记： function createMarkup() { return { __html : 'First · Second' }; } function MyComponent() { return <div dangerouslySetInnerHTML={createMarkup

6.1K30发布于 2021-07-09

来自专栏前端印象

手把手带你10分钟手撸一个简易的Markdown编辑器

html字符串解析成真正的html标签 />

1.8K20编辑于 2021-12-31

来自专栏陈纪庚

React 中无用但可以装逼的知识

当然，React也提供了另一种方式来将用户输入的内容当成html来渲染: <div dangerouslySetInnerHTML={{ __html: message }}>

前面说了这么多 extends React.Component { render() { const message = { type: "div", props: { dangerouslySetInnerHTML const message = { type: "div", props: { dangerouslySetInnerHTML: { __html: `

Arbitrary // 引入 $$typeof const message = { type: "div", props: { dangerouslySetInnerHTML: { __html

1.2K40发布于 2019-04-22

来自专栏海怪的编程小屋

造一个 react-contenteditable 轮子

为了可以插入 html，需要用到 dangerouslySetInnerHTML 这个属性来设置 innerHTML，并通过 onInput 来执行 onChange 回调。 <div ref={this.ref} contentEditable onInput={this.emitEvent} dangerouslySetInnerHTML this.props.onKeyUp || this.emitEvent} onKeyDown={this.props.onKeyDown || this.emitEvent} dangerouslySetInnerHTML this.props.onKeyUp || this.emitEvent, onKeyDown: this.props.onKeyDown || this.emitEvent, dangerouslySetInnerHTML

2.2K20编辑于 2022-03-29

来自专栏了不得的专栏

react中添加html内容

render () { return ( <div className='editor-wrapper' dangerouslySetInnerHTML

6.3K10发布于 2021-06-15

来自专栏前端从进阶到入院

React 核心 Dan 面试的时候，差点没写出来居中……？

dangerouslySetInnerHTML 接下来，主持人对 dangerouslySetInnerHTML 这个 API 的使用时机提出了疑问。最后，主持人说他决定雇佣 Dan 了，当他在回答 let vs const、redux、dangerouslySetInnerHTML 的问题时，展现出的思考过程就已经足够打动他了。

38120编辑于 2023-10-14

来自专栏前端从进阶到入院

Web 现代应用程序架构下的性能优化，渐进式的极致艺术。

React.Component { render() { return (

(this.root = c)} dangerouslySetInnerHTML ={{ __html: '' }} suppressHydrationWarning /> ); } } 首先 render 部分，利用 dangerouslySetInnerHTML 而利用 dangerouslySetInnerHTML 的特性，会让 React 不再进一步 hydrate 遍历 children 而是直接沿用服务端渲染返回的 HTML，保证在注水前渲染的样式也是 this.root); } render() { return (

(this.root = c)} dangerouslySetInnerHTML

1.2K11编辑于 2022-03-09

React 的一些最佳安全实践

RLayer：基于React.js多功能弹层组件

React源码解析之updateHostComponent和updateHostText

浅谈 React 中的 XSS 攻击

js换行符转换html换行

前端小知识10点（2019.5.18）

React 初学实现异步获取表格数据列表展示，点击事件（传参）实例

React中将HTML内容转换为图片和PDF的方法与实践

如何在bugcrowd批量捡洞

React + webpack 开发单页面应用简明中文文档教程（八）Link 跳转以及编写内容页面

{i.author.loginname} 说：

jsx语法

React源码解析之HostComponent的更新(上)

手把手带你10分钟手撸一个简易的Markdown编辑器

React 面试必知必会 Day 6

手把手带你10分钟手撸一个简易的Markdown编辑器

React 中无用但可以装逼的知识

Arbitrary // 引入 $$typeof const message = { type: "div", props: { dangerouslySetInnerHTML: { __html

造一个 react-contenteditable 轮子

react中添加html内容

React 核心 Dan 面试的时候，差点没写出来居中……？

Web 现代应用程序架构下的性能优化，渐进式的极致艺术。

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

React 的一些最佳安全实践

RLayer：基于React.js多功能弹层组件

React源码解析之updateHostComponent和updateHostText

浅谈 React 中的 XSS 攻击

js换行符转换html换行

前端小知识10点（2019.5.18）

React 初学实现 异步获取表格数据列表展示，点击事件（传参）实例

React中将HTML内容转换为图片和PDF的方法与实践

如何在bugcrowd批量捡洞

React + webpack 开发单页面应用简明中文文档教程（八）Link 跳转以及编写内容页面

{i.author.loginname} 说：

jsx语法

React源码解析之HostComponent的更新(上)

手把手带你10分钟手撸一个简易的Markdown编辑器

React 面试必知必会 Day 6

手把手带你10分钟手撸一个简易的Markdown编辑器

React 中无用但可以装逼的知识

Arbitrary // 引入 $$typeof const message = { type: "div", props: { dangerouslySetInnerHTML: { __html

造一个 react-contenteditable 轮子

react中添加html内容

React 核心 Dan 面试的时候，差点没写出来居中……？

Web 现代应用程序架构下的性能优化，渐进式的极致艺术。

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

React 初学实现异步获取表格数据列表展示，点击事件（传参）实例