fix(ui5-link): noreferrer for cross-origin links (#202)

a-z-ivanov · ilhan007 · commit 5902704f0588 · 2019-04-05T14:23:46.000+03:00
diff --git a/packages/main/src/Link.hbs b/packages/main/src/Link.hbs
@@ -3,6 +3,7 @@
 	role="link"
 	href="{{ctr.href}}"
 	target="{{ctr.target}}"
+	rel="{{ctr._rel}}"
 	tabindex="{{tabIndex}}"
 	?disabled="{{ctr.disabled}}"
 	aria-disabled="{{ariaDisabled}}">
diff --git a/packages/main/src/Link.js b/packages/main/src/Link.js
@@ -92,6 +92,10 @@ const metadata = {
 		wrap: {
 			type: Boolean,
 		},
+
+		_rel: {
+			type: String,
+		},
 	},
 	events: /** @lends sap.ui.webcomponents.main.Link.prototype */ {
 
@@ -149,6 +153,11 @@ const metadata = {
  * @public
  */
 class Link extends WebComponent {
+	constructor() {
+		super();
+		this._dummyAnchor = document.createElement("a");
+	}
+
 	static get metadata() {
 		return metadata;
 	}
@@ -157,6 +166,15 @@ class Link extends WebComponent {
 		return LinkRederer;
 	}
 
+
+	onBeforeRendering() {
+		const needsNoReferrer = this.target === "_blank"
+			&& this.href
+			&& this._isCrossOrigin();
+
+		this._rel = needsNoReferrer ? "noreferrer" : undefined;
+	}
+
 	onclick(event) {
 		if (this.disabled) {
 			return;
@@ -198,6 +216,16 @@ class Link extends WebComponent {
 		}
 	}
 
+	_isCrossOrigin() {
+		const loc = window.location;
+
+		this._dummyAnchor.href = this.href;
+
+		return !(this._dummyAnchor.hostname === loc.hostname
+			&& this._dummyAnchor.port === loc.port
+			&& this._dummyAnchor.protocol === loc.protocol);
+	}
+
 	static get calculateTemplateContext() {
 		return LinkTemplateContext.calculate;
 	}
diff --git a/packages/main/test/sap/ui/webcomponents/main/pages/Link.html b/packages/main/test/sap/ui/webcomponents/main/pages/Link.html
@@ -35,13 +35,13 @@
 
 <body>
 	<section class="group">
-		<h2>link</h2>
-		<ui5-link href="#" id="link">link</ui5-link><span>native span</span>
+		<h2>cross-origin</h2>
+		<ui5-link href="https://www.google.com" target="_blank" id="link">link</ui5-link><span>native span</span>
 	</section>
 
 	<section class="group">
 		<h2>Disabled link</h2>
-		<ui5-link id="disabled-link" disabled>Disabled link</ui5-link>
+		<ui5-link href="/a.html" id="disabled-link" disabled>Disabled link</ui5-link>
 	</section>
 
 	<section class="group">
