Removing XSS, fixes #355

src/js/components/Notifications.js

@@ -59,10 +59,10 @@ export default class Notifications extends React.Component{
 							case 'share-configuration-received':
 								return (
 									<div className={"notification notification--info"} key={notification.key} data-key={notification.key} data-duration={notification.duration}>
-										<Icon name="close" className="close-button" onClick={ e => this.props.uiActions.removeNotification(notification.key, true) } />
+										<Icon name="close" className="notification__close-button" onClick={ e => this.props.uiActions.removeNotification(notification.key, true) } />
 										
-										<h4>Configuration shared</h4>
-										<div className="content">
+										<h4 className="notification__title">Configuration shared</h4>
+										<div className="notification__content">
 											<p>Another user has shared their configuration with you. This includes:</p>
 											<ul>
 												{notification.configuration.ui ? <li>User interface</li> : null}
@@ -72,18 +72,22 @@ export default class Notifications extends React.Component{
 											</ul>
 											<p>Do you want to import this?</p>
 										</div>
-										<br />
-										<a className="button button--default" onClick={e => this.importConfiguration(notification.key, notification.configuration)}>Import</a>
+										<div className="notification__actions">
+											<a className="notification__actions__item button button--secondary" onClick={e => this.importConfiguration(notification.key, notification.configuration)}>Import</a>
+										</div>
 									</div>
 								)
 
 							default:
 								return (
 									<div className={"notification notification--"+notification.type+(notification.closing ? ' closing' : '')} key={notification.key} data-key={notification.key} data-duration={notification.duration}>
-										<Icon name="close" className="close-button" onClick={ e => this.props.uiActions.removeNotification(notification.key, true) } />
-										{notification.title ? <h4>{notification.title}</h4> : null}
-										{notification.content ? <p className="content" dangerouslySetInnerHTML={{__html: notification.content}}></p> : null}
-										{notification.description ? <p className="description" dangerouslySetInnerHTML={{__html: notification.description}}></p> : null }
+										<Icon name="close" className="notification__close-button" onClick={ e => this.props.uiActions.removeNotification(notification.key, true) } />
+										{notification.title ? <h4 className="notification__title">{notification.title}</h4> : null}
+										{notification.content ? <div className="notification__content">{notification.content}</div> : null}
+										{notification.description ? <div className="notification__description">{notification.description}</div> : null }
+										{notification.links ? <div className="notification__actions">{notification.links.map((link, i) => {
+											return <a className="notification__actions__item button button--secondary" href={link.url} target={link.new_window ? "_blank" : "self"} key={i}>{link.text}</a>
+										})}</div> : null }
 									</div>
 								)
 						}

src/js/services/ui/middleware.js

@@ -180,23 +180,11 @@ const UIMiddleware = (function(){
 
                     if (!suppressed_broadcasts.includes(broadcast.key)){
                         if (broadcast.message){
-                        	var content = broadcast.message;
-
-                        	// Digest raw content and drop in links where appropriate
-                        	if (broadcast.links){
-                        		for (var link_name in broadcast.links){
-        							if (broadcast.links.hasOwnProperty(link_name)){
-        								var link = broadcast.links[link_name];
-        								var link_markup = '<a href="'+link.url+'"'+(link.new_window ? ' target="_blank" ' : '')+'>'+link.text+'</a>';
-	                        			content = content.replace('$'+link_name, link_markup);
-	                        		}
-                        		}
-                        	}
-
                             var data = {
                                 key: (broadcast.key ? broadcast.key : null),
                                 title: (broadcast.title ? broadcast.title : null),
-                                content: content,
+                                content: (broadcast.message ? broadcast.message : null),
+                                links: (broadcast.links ? broadcast.links : null),
                                 type: 'broadcast',
                                 sticky: true
                             }

src/scss/components/_notifications.scss

@@ -20,16 +20,16 @@
 		border-radius: 3px;
 		font-size: 15px;
 		
-		h4 {
+		&__title {
 			padding-top: 0;
 		}
 
-		p a {
-			text-decoration: none;
+		&__actions {
+			padding-top: 5px;
 			
-			&:not(.button) {
-				color: inherit;
-				border-bottom: 1px dotted colour(black);
+			&__item {
+				margin-bottom: 0;
+				margin-top: 5px;
 			}
 		}
 
@@ -37,14 +37,14 @@
 			padding: 4px 0 4px 20px;
 		}
 
-		p.description {
+		&__description {
 			font-size: 14px;
 			opacity: 0.5;
 			padding-top: 5px;
 			line-height: 1.1em;
 		}
 
-		.close-button {
+		&__close-button {
 			position: absolute;
 			top: 4px;
 			right: 0;

src/scss/global/_forms.scss

@@ -205,6 +205,7 @@ select {
 	cursor: pointer;
 	letter-spacing: -0.01rem;
 	text-align: center;
+	text-decoration: none;
 
 	.icon {
 		padding-right: 8px;