[Glitch] Add noopener and/or noreferrer

Port fccf83e1f2 to glitch-soc

Signed-off-by: Thibaut Girka <thib@sitedethib.com>
This commit is contained in:
BSKY 2019-10-25 05:44:42 +09:00 committed by Thibaut Girka
parent 4a0281d8c4
commit 59946f9231
14 changed files with 31 additions and 27 deletions

View file

@ -25,7 +25,7 @@ export default class AttachmentList extends ImmutablePureComponent {
return ( return (
<li key={attachment.get('id')}> <li key={attachment.get('id')}>
<a href={displayUrl} target='_blank' rel='noopener'><Icon id='link' /> {filename(displayUrl)}</a> <a href={displayUrl} target='_blank' rel='noopener noreferrer'><Icon id='link' /> {filename(displayUrl)}</a>
</li> </li>
); );
})} })}
@ -46,7 +46,7 @@ export default class AttachmentList extends ImmutablePureComponent {
return ( return (
<li key={attachment.get('id')}> <li key={attachment.get('id')}>
<a href={displayUrl} target='_blank' rel='noopener'>{filename(displayUrl)}</a> <a href={displayUrl} target='_blank' rel='noopener noreferrer'>{filename(displayUrl)}</a>
</li> </li>
); );
})} })}

View file

@ -78,6 +78,7 @@ export default class DisplayName extends React.PureComponent {
target='_blank' target='_blank'
onClick={(e) => onAccountClick(a.get('id'), e)} onClick={(e) => onAccountClick(a.get('id'), e)}
title={`@${a.get('acct')}`} title={`@${a.get('acct')}`}
rel='noopener noreferrer'
> >
<bdi key={a.get('id')}> <bdi key={a.get('id')}>
<strong className='display-name__html' dangerouslySetInnerHTML={{ __html: a.get('display_name_html') }} /> <strong className='display-name__html' dangerouslySetInnerHTML={{ __html: a.get('display_name_html') }} />
@ -90,7 +91,7 @@ export default class DisplayName extends React.PureComponent {
} }
suffix = ( suffix = (
<a href={account.get('url')} target='_blank' onClick={(e) => onAccountClick(account.get('id'), e)}> <a href={account.get('url')} target='_blank' onClick={(e) => onAccountClick(account.get('id'), e)} rel='noopener noreferrer'>
<span className='display-name__account'>@{acct}</span> <span className='display-name__account'>@{acct}</span>
</a> </a>
); );

View file

@ -143,7 +143,7 @@ class DropdownMenu extends React.PureComponent {
return ( return (
<li className='dropdown-menu__item' key={`${text}-${i}`}> <li className='dropdown-menu__item' key={`${text}-${i}`}>
<a href={href} target='_blank' rel='noopener' role='button' tabIndex='0' ref={i === 0 ? this.setFocusRef : null} onClick={this.handleClick} onKeyPress={this.handleItemKeyPress} data-index={i}> <a href={href} target='_blank' rel='noopener noreferrer' role='button' tabIndex='0' ref={i === 0 ? this.setFocusRef : null} onClick={this.handleClick} onKeyPress={this.handleItemKeyPress} data-index={i}>
{text} {text}
</a> </a>
</li> </li>

View file

@ -56,7 +56,7 @@ export default class ErrorBoundary extends React.PureComponent {
<FormattedMessage <FormattedMessage
id='web_app_crash.report_issue' id='web_app_crash.report_issue'
defaultMessage='Report a bug in the {issuetracker}' defaultMessage='Report a bug in the {issuetracker}'
values={{ issuetracker: <a href='https://github.com/glitch-soc/mastodon/issues' rel='noopener' target='_blank'><FormattedMessage id='web_app_crash.issue_tracker' defaultMessage='issue tracker' /></a> }} values={{ issuetracker: <a href='https://github.com/glitch-soc/mastodon/issues' rel='noopener noreferrer' target='_blank'><FormattedMessage id='web_app_crash.issue_tracker' defaultMessage='issue tracker' /></a> }}
/> />
{ debugInfo !== '' && ( { debugInfo !== '' && (
<details> <details>

View file

@ -179,7 +179,7 @@ class Item extends React.PureComponent {
if (attachment.get('type') === 'unknown') { if (attachment.get('type') === 'unknown') {
return ( return (
<div className={classNames('media-gallery__item', { standalone })} key={attachment.get('id')} style={{ left: left, top: top, right: right, bottom: bottom, width: `${width}%`, height: `${height}%` }}> <div className={classNames('media-gallery__item', { standalone })} key={attachment.get('id')} style={{ left: left, top: top, right: right, bottom: bottom, width: `${width}%`, height: `${height}%` }}>
<a className='media-gallery__item-thumbnail' href={attachment.get('remote_url') || attachment.get('url')} target='_blank' style={{ cursor: 'pointer' }} title={attachment.get('description')}> <a className='media-gallery__item-thumbnail' href={attachment.get('remote_url') || attachment.get('url')} style={{ cursor: 'pointer' }} title={attachment.get('description')} target='_blank' rel='noopener noreferrer'>
<canvas width={32} height={32} ref={this.setCanvasRef} className='media-gallery__preview' /> <canvas width={32} height={32} ref={this.setCanvasRef} className='media-gallery__preview' />
</a> </a>
</div> </div>
@ -207,6 +207,7 @@ class Item extends React.PureComponent {
href={attachment.get('remote_url') || originalUrl} href={attachment.get('remote_url') || originalUrl}
onClick={this.handleClick} onClick={this.handleClick}
target='_blank' target='_blank'
rel='noopener noreferrer'
> >
<img <img
className={letterbox ? 'letterbox' : null} className={letterbox ? 'letterbox' : null}

View file

@ -133,7 +133,7 @@ export default class StatusContent extends React.PureComponent {
} }
link.setAttribute('target', '_blank'); link.setAttribute('target', '_blank');
link.setAttribute('rel', 'noopener'); link.setAttribute('rel', 'noopener noreferrer');
} }
} }

View file

@ -56,6 +56,7 @@ export default class StatusHeader extends React.PureComponent {
target='_blank' target='_blank'
className='status__avatar' className='status__avatar'
onClick={this.handleAccountClick} onClick={this.handleAccountClick}
rel='noopener noreferrer'
> >
{statusAvatar} {statusAvatar}
</a> </a>
@ -64,6 +65,7 @@ export default class StatusHeader extends React.PureComponent {
target='_blank' target='_blank'
className='status__display-name' className='status__display-name'
onClick={this.handleAccountClick} onClick={this.handleAccountClick}
rel='noopener noreferrer'
> >
<DisplayName account={account} others={otherAccounts} /> <DisplayName account={account} others={otherAccounts} />
</a> </a>

View file

@ -247,7 +247,7 @@ class Header extends ImmutablePureComponent {
<div className='account__header__bar'> <div className='account__header__bar'>
<div className='account__header__tabs'> <div className='account__header__tabs'>
<a className='avatar' href={account.get('url')} rel='noopener' target='_blank'> <a className='avatar' href={account.get('url')} rel='noopener noreferrer' target='_blank'>
<Avatar account={account} size={90} /> <Avatar account={account} size={90} />
</a> </a>
@ -276,10 +276,10 @@ class Header extends ImmutablePureComponent {
<dt dangerouslySetInnerHTML={{ __html: proof.get('provider') }} /> <dt dangerouslySetInnerHTML={{ __html: proof.get('provider') }} />
<dd className='verified'> <dd className='verified'>
<a href={proof.get('proof_url')} target='_blank' rel='noopener'><span title={intl.formatMessage(messages.linkVerifiedOn, { date: intl.formatDate(proof.get('updated_at'), dateFormatOptions) })}> <a href={proof.get('proof_url')} target='_blank' rel='noopener noreferrer'><span title={intl.formatMessage(messages.linkVerifiedOn, { date: intl.formatDate(proof.get('updated_at'), dateFormatOptions) })}>
<Icon id='check' className='verified__mark' /> <Icon id='check' className='verified__mark' />
</span></a> </span></a>
<a href={proof.get('profile_url')} target='_blank' rel='noopener'><span dangerouslySetInnerHTML={{ __html: ' '+proof.get('provider_username') }} /></a> <a href={proof.get('profile_url')} target='_blank' rel='noopener noreferrer'><span dangerouslySetInnerHTML={{ __html: ' '+proof.get('provider_username') }} /></a>
</dd> </dd>
</dl> </dl>
))} ))}

View file

@ -1,12 +1,12 @@
import React from 'react'; import { decode } from 'blurhash';
import PropTypes from 'prop-types'; import classNames from 'classnames';
import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component';
import Icon from 'flavours/glitch/components/icon'; import Icon from 'flavours/glitch/components/icon';
import { autoPlayGif, displayMedia } from 'flavours/glitch/util/initial_state'; import { autoPlayGif, displayMedia } from 'flavours/glitch/util/initial_state';
import classNames from 'classnames';
import { decode } from 'blurhash';
import { isIOS } from 'flavours/glitch/util/is_mobile'; import { isIOS } from 'flavours/glitch/util/is_mobile';
import PropTypes from 'prop-types';
import React from 'react';
import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component';
export default class MediaItem extends ImmutablePureComponent { export default class MediaItem extends ImmutablePureComponent {
@ -148,7 +148,7 @@ export default class MediaItem extends ImmutablePureComponent {
return ( return (
<div className='account-gallery__item' style={{ width, height }}> <div className='account-gallery__item' style={{ width, height }}>
<a className='media-gallery__item-thumbnail' href={status.get('url')} target='_blank' onClick={this.handleClick} title={title}> <a className='media-gallery__item-thumbnail' href={status.get('url')} onClick={this.handleClick} title={title} target='_blank' rel='noopener noreferrer'>
<canvas width={32} height={32} ref={this.setCanvasRef} className={classNames('media-gallery__preview', { 'media-gallery__preview--hidden': visible && loaded })} /> <canvas width={32} height={32} ref={this.setCanvasRef} className={classNames('media-gallery__preview', { 'media-gallery__preview--hidden': visible && loaded })} />
{visible ? thumbnail : icon} {visible ? thumbnail : icon}
</a> </a>

View file

@ -140,7 +140,7 @@ export default class Card extends React.PureComponent {
const horizontal = (!compact && card.get('width') > card.get('height') && (card.get('width') + 100 >= width)) || card.get('type') !== 'link' || embedded; const horizontal = (!compact && card.get('width') > card.get('height') && (card.get('width') + 100 >= width)) || card.get('type') !== 'link' || embedded;
const interactive = card.get('type') !== 'link'; const interactive = card.get('type') !== 'link';
const className = classnames('status-card', { horizontal, compact, interactive }); const className = classnames('status-card', { horizontal, compact, interactive });
const title = interactive ? <a className='status-card__title' href={card.get('url')} title={card.get('title')} rel='noopener' target='_blank'><strong>{card.get('title')}</strong></a> : <strong className='status-card__title' title={card.get('title')}>{card.get('title')}</strong>; const title = interactive ? <a className='status-card__title' href={card.get('url')} title={card.get('title')} rel='noopener noreferrer' target='_blank'><strong>{card.get('title')}</strong></a> : <strong className='status-card__title' title={card.get('title')}>{card.get('title')}</strong>;
const ratio = card.get('width') / card.get('height'); const ratio = card.get('width') / card.get('height');
const height = (compact && !embedded) ? (width / (16 / 9)) : (width / ratio); const height = (compact && !embedded) ? (width / (16 / 9)) : (width / ratio);
@ -172,7 +172,7 @@ export default class Card extends React.PureComponent {
<div className='status-card__actions'> <div className='status-card__actions'>
<div> <div>
<button onClick={this.handleEmbedClick}><Icon id={iconVariant} /></button> <button onClick={this.handleEmbedClick}><Icon id={iconVariant} /></button>
{horizontal && <a href={card.get('url')} target='_blank' rel='noopener'><Icon id='external-link' /></a>} {horizontal && <a href={card.get('url')} target='_blank' rel='noopener noreferrer'><Icon id='external-link' /></a>}
</div> </div>
</div> </div>
</div> </div>
@ -200,7 +200,7 @@ export default class Card extends React.PureComponent {
} }
return ( return (
<a href={card.get('url')} className={className} target='_blank' rel='noopener' ref={this.setRef}> <a href={card.get('url')} className={className} target='_blank' rel='noopener noreferrer' ref={this.setRef}>
{embed} {embed}
{description} {description}
</a> </a>

View file

@ -188,7 +188,7 @@ export default class DetailedStatus extends ImmutablePureComponent {
} }
if (status.get('application')) { if (status.get('application')) {
applicationLink = <span> · <a className='detailed-status__application' href={status.getIn(['application', 'website'])} target='_blank' rel='noopener'>{status.getIn(['application', 'name'])}</a></span>; applicationLink = <span> · <a className='detailed-status__application' href={status.getIn(['application', 'website'])} target='_blank' rel='noopener noreferrer'>{status.getIn(['application', 'name'])}</a></span>;
} }
if (status.get('visibility') === 'direct') { if (status.get('visibility') === 'direct') {
@ -262,7 +262,7 @@ export default class DetailedStatus extends ImmutablePureComponent {
/> />
<div className='detailed-status__meta'> <div className='detailed-status__meta'>
<a className='detailed-status__datetime' href={status.get('url')} target='_blank' rel='noopener'> <a className='detailed-status__datetime' href={status.get('url')} target='_blank' rel='noopener noreferrer'>
<FormattedDate value={new Date(status.get('created_at'))} hour12={false} year='numeric' month='short' day='2-digit' hour='2-digit' minute='2-digit' /> <FormattedDate value={new Date(status.get('created_at'))} hour12={false} year='numeric' month='short' day='2-digit' hour='2-digit' minute='2-digit' />
</a>{applicationLink} · {reblogLink} · {favouriteLink} · <VisibilityIcon visibility={status.get('visibility')} /> </a>{applicationLink} · {reblogLink} · {favouriteLink} · <VisibilityIcon visibility={status.get('visibility')} />
</div> </div>

View file

@ -92,12 +92,12 @@ export default class ActionsModal extends ImmutablePureComponent {
<div className='status light'> <div className='status light'>
<div className='boost-modal__status-header'> <div className='boost-modal__status-header'>
<div className='boost-modal__status-time'> <div className='boost-modal__status-time'>
<a href={this.props.status.get('url')} className='status__relative-time' target='_blank' rel='noopener'> <a href={this.props.status.get('url')} className='status__relative-time' target='_blank' rel='noopener noreferrer'>
<RelativeTimestamp timestamp={this.props.status.get('created_at')} /> <RelativeTimestamp timestamp={this.props.status.get('created_at')} />
</a> </a>
</div> </div>
<a href={this.props.status.getIn(['account', 'url'])} className='status__display-name'> <a href={this.props.status.getIn(['account', 'url'])} className='status__display-name' rel='noopener noreferrer'>
<div className='status__avatar'> <div className='status__avatar'>
<Avatar account={this.props.status.get('account')} size={48} /> <Avatar account={this.props.status.get('account')} size={48} />
</div> </div>

View file

@ -64,7 +64,7 @@ class BoostModal extends ImmutablePureComponent {
<div className='status light'> <div className='status light'>
<div className='boost-modal__status-header'> <div className='boost-modal__status-header'>
<div className='boost-modal__status-time'> <div className='boost-modal__status-time'>
<a href={status.get('url')} className='status__relative-time' target='_blank' rel='noopener'><RelativeTimestamp timestamp={status.get('created_at')} /></a> <a href={status.get('url')} className='status__relative-time' target='_blank' rel='noopener noreferrer'><RelativeTimestamp timestamp={status.get('created_at')} /></a>
</div> </div>
<a onClick={this.handleAccountClick} href={status.getIn(['account', 'url'])} className='status__display-name'> <a onClick={this.handleAccountClick} href={status.getIn(['account', 'url'])} className='status__display-name'>

View file

@ -60,8 +60,8 @@ class LinkFooter extends React.PureComponent {
id='getting_started.open_source_notice' id='getting_started.open_source_notice'
defaultMessage='Glitchsoc is open source software, a friendly fork of {Mastodon}. You can contribute or report issues on GitHub at {github}.' defaultMessage='Glitchsoc is open source software, a friendly fork of {Mastodon}. You can contribute or report issues on GitHub at {github}.'
values={{ values={{
github: <span><a href='https://github.com/glitch-soc/mastodon' rel='noopener' target='_blank'>glitch-soc/mastodon</a> (v{version})</span>, github: <span><a href='https://github.com/glitch-soc/mastodon' rel='noopener noreferrer' target='_blank'>glitch-soc/mastodon</a> (v{version})</span>,
Mastodon: <a href='https://github.com/tootsuite/mastodon' rel='noopener' target='_blank'>Mastodon</a> }} Mastodon: <a href='https://github.com/tootsuite/mastodon' rel='noopener noreferrer' target='_blank'>Mastodon</a> }}
/> />
</p> </p>
</div> </div>