Merge pull request #6977 from nextcloud-libraries/backport/6966/stable8

[stable8] feat(NcRichText): filter links based on protocol

Author: susnux

cypress/component/richtext.cy.ts

@@ -393,6 +393,39 @@ describe('NcRichText', () => {
 			})
 		})
 
+		describe('links', () => {
+
+			const testLink = (key: string, { text, href = text, name = text }) => {
+				it(key, () => {
+					mount(NcRichText, {
+						propsData: {
+							text,
+							useMarkdown: true,
+						},
+					})
+					cy.get('a').should('have.text', name)
+					cy.get('a').invoke('attr', 'href').should('eq', href)
+				})
+			}
+
+			testLink('autolink', { text: 'https://autolink.me' })
+			testLink('relative link', { text: '[hello](world)', href: 'world', name: 'hello' })
+			testLink('absolute link', { text: '[hello](https://nextcloud.com)', href: 'https://nextcloud.com', name: 'hello' })
+			testLink('tel link', { text: '[hello](tel:+49123456789)', href: 'tel:+49123456789', name: 'hello' })
+
+			it('no link to unknown protocols', () => {
+				mount(NcRichText, {
+					propsData: {
+						text: '[link](other:proto)',
+						useMarkdown: true,
+					},
+				})
+				cy.get('body').should('contain', name)
+				cy.get('a').should('not.exist')
+			})
+
+		})
+
 		describe('multiline code', () => {
 			it('multiline code (with triple backticks syntax)', () => {
 				mount(NcRichText, {

jest.config.js

@@ -17,7 +17,7 @@ const ignorePatterns = [
 	'longest-streak', // ESM dependency of remark-gfm
 	'lowlight', // ESM dependency of rehype-highlight
 	'markdown-table', // ESM dependency of remark-gfm
-	'mdast-util-*',
+	'mdast-*',
 	'micromark',
 	'p-queue',
 	'p-timeout',

package-lock.json

@@ -114,6 +114,7 @@
     "remark-breaks": "^4.0.0",
     "remark-parse": "^11.0.0",
     "remark-rehype": "^11.0.0",
+    "remark-unlink-protocols": "^1.0.0",
     "splitpanes": "^2.4.1",
     "string-length": "^5.0.1",
     "striptags": "^3.2.0",

package.json

@@ -314,11 +314,17 @@ import { unified } from 'unified'
 import remarkParse from 'remark-parse'
 import remarkGfm from 'remark-gfm'
 import breaks from 'remark-breaks'
+import remarkUnlinkProtocols from 'remark-unlink-protocols'
 import remark2rehype from 'remark-rehype'
 import rehype2react from 'rehype-react'
 import rehypeExternalLinks from 'rehype-external-links'
 import { RouterLink } from 'vue-router'
 
+/**
+ * Protocols allowed in links.
+ */
+const LINK_PROTOCOLS = ['http', 'https', 'mailto', 'tel']
+
 /**
  * Heavy libraries should be loaded on demand to reduce component size
  */
@@ -443,6 +449,7 @@ export default {
 				.use(remarkUnescape)
 				.use(this.useExtendedMarkdown ? remarkGfm : undefined)
 				.use(breaks)
+				.use(remarkUnlinkProtocols, { except: LINK_PROTOCOLS })
 				.use(remark2rehype, {
 					handlers: {
 						component(toHast, node) {