177 <div
178 ref={this.setRef}
179 className='status-card__image status-card-video'
180 dangerouslySetInnerHTML={content}181 style={{ height }}
182 />
183 );
35 <div className='account__moved-note'>
36 <div className='account__moved-note__message'>
37 <div className='account__moved-note__icon-wrapper'><Icon id='suitcase' className='account__moved-note__icon' fixedWidth /></div>
38 <FormattedMessage id='account.moved_to' defaultMessage='{name} has moved to:' values={{ name: <bdi><strong dangerouslySetInnerHTML={displayNameHtml} /></bdi> }} />39 </div>
40
41 <a href={to.get('url')} onClick={this.handleAccountClick} className='detailed-status__display-name'>
245 } else {
246 return (
247 <div className={classNames} ref={this.setRef} tabIndex='0' onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
248 <div className='status__content__text status__content__text--visible translate' dangerouslySetInnerHTML={content} />249
250 {!!status.get('poll') && <PollContainer pollId={status.get('poll')} />}
251
229 } else if (this.props.onClick) {
230 const output = [
231 <div className={classNames} ref={this.setRef} tabIndex='0' onMouseDown={this.handleMouseDown} onMouseUp={this.handleMouseUp} key='status-content' onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
232 <div className='status__content__text status__content__text--visible translate' dangerouslySetInnerHTML={content} />233
234 {!!status.get('poll') && <PollContainer pollId={status.get('poll')} />}
235
219
220 {mentionsPlaceholder}
221
222 <div tabIndex={!hidden ? 0 : null} className={`status__content__text ${!hidden ? 'status__content__text--visible' : ''} translate`} dangerouslySetInnerHTML={content} />223
224 {!hidden && !!status.get('poll') && <PollContainer pollId={status.get('poll')} />}
225
Dangerous properties in React are those whose behavior is known to be a common source of application vulnerabilities. The properties names clearly indicate they are dangerous and should be avoided unless great care is taken.
dangerouslySetInnerHTML
is React's replacement for using innerHTML in the browser DOM.
In general, setting HTML from code is risky because it's easy to inadvertently expose your users to a cross-site scripting (XSS) attack.
So, you can set HTML directly from React, but you have to type out dangerouslySetInnerHTML
and pass an object with a __html
key, to remind yourself that it’s dangerous.
If you want to have dynamic HTML content that is not possible to achieve using regular React code, add a skipcq comment to prevent DeepSource from flagging this issue, along with an explanation.
import React from 'react';
const Hello = <div dangerouslySetInnerHTML={{ __html: "Hello World" }}></div>;
import React from 'react';
const Hello = <div>Hello World</div>;