Merge pull request #482 from opencollective/fix/target-blank

Add rel="noopener noreferrer" with target="_blank"

src/apps/expenses/components/ExpenseDetails.js

@@ -171,7 +171,7 @@ class ExpenseDetails extends React.Component {
                 />
             }
             { !editMode && expense.attachment &&
-              <a href={expense.attachment} target="_blank" title="Open receipt in a new window">
+              <a href={expense.attachment} target="_blank" rel="noopener noreferrer" title="Open receipt in a new window">
                 <img src={previewAttachmentImage} />
               </a>
             }

src/apps/expenses/components/TransactionDetails.js

@@ -96,7 +96,7 @@ class TransactionDetails extends React.Component {
         {type === 'debit' &&
           <div className="frame">
             {transaction.attachment &&
-              <a href={transaction.attachment} target="_blank" title="Open receipt in a new window">
+              <a href={transaction.attachment} target="_blank" rel="noopener noreferrer" title="Open receipt in a new window">
                 <img src={imagePreview(transaction.attachment)} />
               </a>
             }

src/components/CollectiveCover.js

@@ -280,8 +280,8 @@ ${description}`
                   <div className="contact">
                     { collective.host && collective.isActive && <div className="host"><label><FormattedMessage id="collective.cover.hostedBy" defaultMessage="Hosted by" /></label><Link route={`/${collective.host.slug}`}>{collective.host.name} </Link></div> }
                     { collective.host && !collective.isActive && <div className="host"><label><FormattedMessage id="collective.cover.pendingApprovalFrom" defaultMessage="Pending approval from" /></label><Link route={`/${collective.host.slug}`}>{collective.host.name} </Link></div> }
-                    { twitterHandle && <div className="twitterHandle"><a href={`https://twitter.com/${twitterHandle}`} target="_blank">@{twitterHandle}</a></div> }
-                    { website && <div className="website"><a href={website} target="_blank">{prettyUrl(website) }</a></div> }
+                    { twitterHandle && <div className="twitterHandle"><a href={`https://twitter.com/${twitterHandle}`} target="_blank" rel="noopener noreferrer">@{twitterHandle}</a></div> }
+                    { website && <div className="website"><a href={website} target="_blank" rel="noopener noreferrer">{prettyUrl(website) }</a></div> }
                   </div>
                 }
                 { collective.type === 'EVENT' &&

src/components/CreateCollectiveForm.js

@@ -332,12 +332,12 @@ class CreateCollectiveForm extends React.Component {
               <label>{intl.formatMessage(this.messages['tos.label'])}</label>
               <div>
                 <input type="checkbox" name="tos" onChange={(value) => this.handleChange("tos", value)} />
-                <span>I agree with the <a href="/tos" target="_blank">terms of service of Open Collective</a></span>
+                <span>I agree with the <a href="/tos" target="_blank" rel="noopener noreferrer">terms of service of Open Collective</a></span>
               </div>
               { (get(host, 'settings.tos')) &&
                 <div>
                   <input type="checkbox" name="hostTos" onChange={(value) => this.handleChange("hostTos", value)} />
-                  <span>I agree with the <a href={get(host, 'settings.tos')} target="_blank">terms of service of the host</a> (<a href={`/${host.slug}`} target="_blank">{host.name}</a>) that will collect money on behalf of our collective</span>
+                  <span>I agree with the <a href={get(host, 'settings.tos')} target="_blank" rel="noopener noreferrer">terms of service of the host</a> (<a href={`/${host.slug}`} target="_blank">{host.name}</a>) that will collect money on behalf of our collective</span>
                 </div>
               }
             </div>

src/components/EventsWithData.js

@@ -118,7 +118,7 @@ class EventsWithData extends React.Component {
               <div className="title">
                 <h2><FormattedMessage id="events.title.futureEvents" values={{n: futureEvents.length}} defaultMessage={`Next {n, plural, one {event} other {events}}`} /></h2>
                 { this.isIframe &&
-                  <div className="action"><a href={`/${this.props.collectiveSlug}/events/new`} onClick={this.createEvent} target="_blank"><FormattedMessage id="events.widget.createEvent" defaultMessage={`Create an Event`} /></a></div>
+                  <div className="action"><a href={`/${this.props.collectiveSlug}/events/new`} onClick={this.createEvent} target="_blank" rel="noopener noreferrer"><FormattedMessage id="events.widget.createEvent" defaultMessage={`Create an Event`} /></a></div>
                 }
               </div>
               <ul>

src/components/ExportImages.js

@@ -139,7 +139,7 @@ class ExportImages extends React.Component {
                     __html: image.code
                   }}
                   />
-                <div className="url"><a href={image.url} target="_blank">{image.url}</a></div>
+                <div className="url"><a href={image.url} target="_blank" rel="noopener noreferrer">{image.url}</a></div>
                 <div className="code">{image.code}</div>
                 <div>
                   <label>Options:</label>

src/components/Location.js

@@ -44,7 +44,7 @@ class Location extends React.Component {
         <div className="description">
           {this.props.showTitle && <h1>Location</h1>}
           <div className="name">{name}</div>
-          <div className="address" style={{color: colors.darkgray}}><a href={`http://maps.apple.com/?q=${lat},${long}`} target="_blank">{address}</a></div>
+          <div className="address" style={{color: colors.darkgray}}><a href={`http://maps.apple.com/?q=${lat},${long}`} target="_blank" rel="noopener noreferrer">{address}</a></div>
         </div>
         { lat && long &&
           <div className="map">

src/components/Map.js

@@ -37,7 +37,7 @@ class Map extends React.Component {
             draggable={false}
             />
         </Gmaps>
-        <a className="map-overlay" href={`http://maps.apple.com/?q=${lat},${long}`} target="_blank"></a>
+        <a className="map-overlay" href={`http://maps.apple.com/?q=${lat},${long}`} target="_blank" rel="noopener noreferrer"></a>
       </div>
     );
   }

src/pages/banner-iframe.js

@@ -170,10 +170,11 @@ class Banner extends React.Component {
         .btn.hover {
           background-position: 0 -100px;
         }
-        `}</style>
+        `}
+        </style>
 
         { backers.organizations + backers.users === 0 &&
-          <a type="button" className="btn blue contribute" target="_blank" href={`https://opencollective.com/${collectiveSlug}`} />
+          <a type="button" className="btn blue contribute" target="_blank" rel="noopener noreferrer" href={`https://opencollective.com/${collectiveSlug}`} />
         }
 
 
@@ -187,7 +188,7 @@ class Banner extends React.Component {
                 />
             </h2>
             <div className="actions">
-              <a href={`https://opencollective.com/${collectiveSlug}`} target="_blank" style={style.a}><FormattedMessage id="widget.becomeSponsor" defaultMessage="Become a sponsor" /></a>
+              <a href={`https://opencollective.com/${collectiveSlug}`} target="_blank" rel="noopener noreferrer" style={style.a}><FormattedMessage id="widget.becomeSponsor" defaultMessage="Become a sponsor" /></a>
             </div>
             <MembersWithData
               collective={collective}
@@ -210,7 +211,7 @@ class Banner extends React.Component {
             </h2>
 
             <div className="actions">
-              <a href={`https://opencollective.com/${collectiveSlug}`} target="_blank" style={style.a}><FormattedMessage id="widget.becomeBacker" defaultMessage="Become a backer" /></a>
+              <a href={`https://opencollective.com/${collectiveSlug}`} target="_blank" rel="noopener noreferrer" style={style.a}><FormattedMessage id="widget.becomeBacker" defaultMessage="Become a backer" /></a>
             </div>
             <MembersWithData
               collective={collective}

src/pages/button.js

@@ -62,7 +62,7 @@ class ButtonPage extends React.Component {
               background-position: 0 -100px;
             }
           `}</style>
-        <a type="button" className={`btn ${color} ${verb}`} target="_blank" href={`https://opencollective.com/${collectiveSlug}/${verb}`} />
+        <a type="button" className={`btn ${color} ${verb}`} target="_blank" rel="noopener noreferrer" href={`https://opencollective.com/${collectiveSlug}/${verb}`} />
       </div>
     );
   }