fix(ui5-link): add noopener to rel attribute (#4533)

- The "noopener" text is added to the rel value attribute alongside "noreferrer" text for compatibility reasons with the openui5's sap.m.Link implementation. - Explicit specification of rel "noopener" helps protect users from tabnabbing in legacy browsers including Edge Legacy and Internet Explorer.
SAP · Jan 17, 2022 · 3f2c3cd · 3f2c3cd
1 parent 2294cb2
commit 3f2c3cd
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 3 deletions.
diff --git a/packages/main/src/Link.js b/packages/main/src/Link.js
@@ -246,11 +246,11 @@ class Link extends UI5Element {
 	}
 
 	onBeforeRendering() {
-		const needsNoReferrer = this.target === "_blank"
+		const needsNoReferrer = this.target !== "_self"
 			&& this.href
 			&& this._isCrossOrigin();
 
-		this._rel = needsNoReferrer ? "noreferrer" : undefined;
+		this._rel = needsNoReferrer ? "noreferrer noopener" : undefined;
 	}
 
 	_isCrossOrigin() {

diff --git a/packages/main/test/pages/Link.html b/packages/main/test/pages/Link.html
@@ -27,7 +27,7 @@
 
 <body class="link1auto">
 	<div class="group">
-		<ui5-link class="samples-big-margin-right" href="https://www.sap.com" target="_blank">Standard Link</ui5-link>
+		<ui5-link id="target-blank-link" class="samples-big-margin-right" href="https://www.sap.com" target="_blank">Standard Link</ui5-link>
 		<ui5-link class="samples-big-margin-right" href="https://www.sap.com" target="_blank" design="Subtle">Subtle link</ui5-link>
 		<ui5-link class="samples-big-margin-right" href="https://www.sap.com" target="_blank" disabled>Disabled</ui5-link>
 		<ui5-link class="samples-big-margin-right" href="https://www.sap.com" target="_blank" design="Emphasized">Emphasized</ui5-link>

diff --git a/packages/main/test/specs/Link.spec.js b/packages/main/test/specs/Link.spec.js
@@ -22,6 +22,12 @@ describe("General API", () => {
 		assert.strictEqual(await link.getAttribute("href"), HREF_ATTRIBUTE, "The href attribute is changed.");
 	});
 
+	it("tests rel attribute", async () => {
+		const anchor = await browser.$("#target-blank-link");
+
+		assert.strictEqual(await anchor.shadow$("a").getAttribute("rel"), "noreferrer noopener", "The rel attribute is properly set.");
+	});
+
 	it("tests target attributes", async () => {
 		const link = await browser.$("#empty-link-2");
 		const TARGET_ATTRIBUTE = "_blank";