@zimbra/eslint-plugin-preact-i18n 2.0.0 → 2.1.0

package/README.md

@@ -16,6 +16,7 @@ npm i -D eslint-plugin-preact-i18n
 * **[preact-i18n/no-text-as-children](docs/rules/no-text-as-children.md)**: Verify that you have no text node children in your preact code.
 * **[preact-i18n/no-text-as-attribute](docs/rules/no-text-as-attribute.md)**: Verify that you have no text in some attributes in your react components. List of attributes provided in the config.
 * **[preact-i18n/no-unknown-key](docs/rules/no-unknown-key.md)**: Verify that all translation keys you use are present in your defined translation files.
+* **[preact-i18n/no-unsafe-template](docs/rules/no-unsafe-template.md)**: Report unsafe dynamic markup in JSON translation templates.
 
 ## Config
 

package/docs/rules/no-unsafe-template.md

@@ -0,0 +1,62 @@
+# Disallow unsafe translation templates (preact-i18n/no-unsafe-template)
+
+This rule reports markup in JSON translation values that could allow script injection:
+
+- Dynamic event handler attributes
+- Unquoted dynamic attributes
+- Dynamic style attributes
+- `javascript:` links
+- `data:text/html` URIs
+- Dynamic SVG attributes
+
+The rule checks decoded JSON values, so attributes containing escaped double quotes are also validated.
+
+## Configuration
+
+Use the included processor for translation JSON files:
+
+```js
+import preactI18n from '@zimbra/eslint-plugin-preact-i18n';
+
+export default [
+	{
+		files: ['**/intl/**/*.json', '**/i18n/**/*.json', '**/translations/**/*.json'],
+		plugins: {
+			'preact-i18n': preactI18n
+		},
+		processor: 'preact-i18n/translation-json',
+		rules: {
+			'preact-i18n/no-unsafe-template': 'error'
+		}
+	}
+];
+```
+
+If the JSON files already use the `eslint-plugin-i18n-json` processor, keep that processor and enable this rule in the same configuration. The rule supports both processors.
+
+## Examples
+
+Examples of **incorrect** translations:
+
+```json
+{
+	"event": "<button onclick=\"{{handler}}\">Open</button>",
+	"link": "<a href={{url}}>Open</a>",
+	"style": "<span style=\"color: {{color}}\">Text</span>",
+	"protocol": "<a href=\"javascript:alert(1)\">Open</a>"
+}
+```
+
+Examples of **correct** translations:
+
+```json
+{
+	"text": "Hello {{name}}",
+	"link": "<a href=\"{{url}}\">Open</a>",
+	"image": "<img src=\"/images/logo.svg\">"
+}
+```
+
+## Options
+
+This rule has no options.

package/lib/index.js

@@ -1,10 +1,14 @@
 "use strict";
 
 module.exports = {
+  processors: {
+    'translation-json': require('./processors/translation-json')
+  },
   rules: {
     'no-unknown-key': require('./rules/no-unknown-key'),
     'no-text-as-attribute': require('./rules/no-text-as-attribute'),
     'no-text-as-children': require('./rules/no-text-as-children'),
-    'no-missing-template-field': require('./rules/no-missing-template-field')
+    'no-missing-template-field': require('./rules/no-missing-template-field'),
+    'no-unsafe-template': require('./rules/no-unsafe-template')
   }
 };

package/lib/processors/translation-json.js

@@ -0,0 +1,16 @@
+"use strict";
+
+const SOURCE_PREFIX = 'preact-i18n-json:';
+module.exports = {
+  meta: {
+    name: 'translation-json'
+  },
+  preprocess(source) {
+    const encodedSource = Buffer.from(source, 'utf8').toString('base64');
+    return [`/* ${SOURCE_PREFIX}${encodedSource} */\n`];
+  },
+  postprocess(messageLists) {
+    return messageLists[0] || [];
+  },
+  supportsAutofix: false
+};

package/lib/rules/no-unsafe-template.js

@@ -0,0 +1,191 @@
+"use strict";
+
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+const path = require('node:path');
+const SOURCE_PREFIX = 'preact-i18n-json:';
+const UNSAFE_PATTERNS = [{
+  pattern: /\bon[a-z]+\s*=\s*(?:["'][^"']*)?\{\{/gi,
+  risk: 'HIGH',
+  description: 'Event handler with a dynamic value detected',
+  fix: 'Avoid dynamic event handlers. Use class-based event delegation instead.'
+}, {
+  pattern: /style\s*=\s*["'][^"']*\{\{[^}]+\}\}[^"']*["']/gi,
+  risk: 'HIGH',
+  description: 'Dynamic CSS in a style attribute detected',
+  fix: 'Use class-based styling instead of dynamic style attributes.'
+}, {
+  pattern: /(?:^|[\s<])(href|src|action)\s*=\s*["']?\s*javascript:/gi,
+  risk: 'HIGH',
+  description: 'JavaScript protocol in a URL attribute detected',
+  fix: 'Never use the javascript: protocol. Use a valid URL instead.'
+}, {
+  pattern: /(?:^|[\s<])(href|src|action)\s*=\s*["']?\s*data:text\/html/gi,
+  risk: 'HIGH',
+  description: 'Data URI with HTML content detected',
+  fix: 'Avoid data:text/html URIs. Use a safe, allowlisted protocol.'
+}, {
+  pattern: /<svg(?:[^>]*=\s*[^{<]*\{\{[^>]*\/?>|[\s\S]*?<[^>]*=\s*[^{<]*\{\{[^>]*>[\s\S]*?<\/svg>)/gi,
+  risk: 'MEDIUM',
+  description: 'SVG element with dynamic attributes detected',
+  fix: 'Avoid dynamic SVG attributes.'
+}, {
+  pattern: /(href|src|action)\s*=\s*\{\{/gi,
+  risk: 'HIGH',
+  description: 'URL attribute with an unquoted dynamic value detected',
+  fix: 'Always quote URL attributes, for example href="{{url}}".'
+}, {
+  pattern: /([a-z-]+)\s*=\s*\{\{[^}]+\}\}(?!\s*["'])/gi,
+  risk: 'HIGH',
+  description: 'Unquoted attribute with a dynamic value detected',
+  fix: 'Always quote dynamic attributes, for example title="{{title}}".'
+}];
+function getJsonSource(context, node) {
+  const filename = context.physicalFilename || context.filename;
+  if (path.extname(filename).toLowerCase() !== '.json') {
+    return null;
+  }
+  const comments = node.comments || [];
+  const encodedComment = comments.find(comment => comment.value.trim().startsWith(SOURCE_PREFIX));
+  if (encodedComment) {
+    const encodedSource = encodedComment.value.trim().slice(SOURCE_PREFIX.length);
+    return Buffer.from(encodedSource, 'base64').toString('utf8');
+  }
+  if (comments.length >= 2) {
+    return comments[0].value.trim();
+  }
+  const source = context.sourceCode.text;
+  return source.trim().startsWith('{') || source.trim().startsWith('[') ? source : null;
+}
+function getLocation(source, index) {
+  const precedingSource = source.slice(0, index);
+  const line = precedingSource.split('\n').length;
+  const lastNewline = precedingSource.lastIndexOf('\n');
+  return {
+    line,
+    column: index - lastNewline - 1
+  };
+}
+function readJsonString(source, start) {
+  let escaped = false;
+  for (let index = start + 1; index < source.length; index++) {
+    const character = source[index];
+    if (escaped) {
+      escaped = false;
+    } else if (character === '\\') {
+      escaped = true;
+    } else if (character === '"') {
+      const rawValue = source.slice(start, index + 1);
+      try {
+        return {
+          end: index + 1,
+          value: JSON.parse(rawValue)
+        };
+      } catch (error) {
+        return null;
+      }
+    }
+  }
+  return null;
+}
+function getTranslationStrings(source) {
+  const strings = [];
+  for (let index = 0; index < source.length; index++) {
+    if (source[index] !== '"') {
+      continue;
+    }
+    const parsedString = readJsonString(source, index);
+    if (!parsedString) {
+      return [];
+    }
+    let nextIndex = parsedString.end;
+    while (/\s/.test(source[nextIndex])) {
+      nextIndex++;
+    }
+    if (source[nextIndex] !== ':') {
+      strings.push({
+        index,
+        value: parsedString.value
+      });
+    }
+    index = parsedString.end - 1;
+  }
+  return strings;
+}
+function findIssues(value) {
+  const issues = [];
+  UNSAFE_PATTERNS.forEach(patternDefinition => {
+    const regex = new RegExp(patternDefinition.pattern.source, patternDefinition.pattern.flags);
+    let match;
+    while ((match = regex.exec(value)) !== null) {
+      const end = match.index + match[0].length;
+      const overlapsExistingIssue = issues.some(issue => {
+        const overlaps = match.index < issue.end && end > issue.index;
+        if (!overlaps) return false;
+
+        // Only deduplicate the URL-specific pattern with the generic unquoted attribute pattern
+        const isURLPattern = patternDefinition.description === 'URL attribute with an unquoted dynamic value detected';
+        const isGenericPattern = patternDefinition.description === 'Unquoted attribute with a dynamic value detected';
+        const issueIsURLPattern = issue.description === 'URL attribute with an unquoted dynamic value detected';
+        const issueIsGenericPattern = issue.description === 'Unquoted attribute with a dynamic value detected';
+        return (isURLPattern || isGenericPattern) && (issueIsURLPattern || issueIsGenericPattern);
+      });
+      if (!overlapsExistingIssue) {
+        issues.push(_objectSpread(_objectSpread({}, patternDefinition), {}, {
+          index: match.index,
+          end
+        }));
+      }
+    }
+  });
+  return issues;
+}
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'disallows unsafe dynamic markup in translation templates',
+      category: 'Possible errors'
+    },
+    schema: [],
+    messages: {
+      unsafeTemplate: '{{risk}} risk: {{description}}. {{fix}}'
+    }
+  },
+  create(context) {
+    return {
+      Program(node) {
+        const source = getJsonSource(context, node);
+        if (!source) {
+          return;
+        }
+        try {
+          JSON.parse(source);
+        } catch (error) {
+          return;
+        }
+        getTranslationStrings(source).forEach(translation => {
+          findIssues(translation.value).forEach(issue => {
+            const start = getLocation(source, translation.index);
+            context.report({
+              loc: {
+                start
+              },
+              messageId: 'unsafeTemplate',
+              data: {
+                risk: issue.risk,
+                description: issue.description,
+                fix: issue.fix
+              }
+            });
+          });
+        });
+      }
+    };
+  }
+};
+module.exports.findIssues = findIssues;
+module.exports.getTranslationStrings = getTranslationStrings;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zimbra/eslint-plugin-preact-i18n",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "eslint plugin for users of the preact-i18n library",
   "keywords": [
     "eslint",
@@ -46,6 +46,7 @@
     "@babel/register": "^7.0.0",
     "@zimbra/eslint-config": "2.3.1-PREAPPS-9700.f1b2ff0.0",
     "eslint": "^9.39.3",
+    "eslint-plugin-i18n-json": "^4.0.1",
     "husky": "^9.1.7",
     "mocha": "^11.7.6",
     "rimraf": "^5.0.10",

package/src/index.js

@@ -1,8 +1,12 @@
 module.exports = {
+	processors: {
+		'translation-json': require('./processors/translation-json')
+	},
 	rules: {
 		'no-unknown-key': require('./rules/no-unknown-key'),
 		'no-text-as-attribute': require('./rules/no-text-as-attribute'),
 		'no-text-as-children': require('./rules/no-text-as-children'),
-		'no-missing-template-field': require('./rules/no-missing-template-field')
+		'no-missing-template-field': require('./rules/no-missing-template-field'),
+		'no-unsafe-template': require('./rules/no-unsafe-template')
 	}
 };

package/src/processors/translation-json.js

@@ -0,0 +1,15 @@
+const SOURCE_PREFIX = 'preact-i18n-json:';
+
+module.exports = {
+	meta: {
+		name: 'translation-json'
+	},
+	preprocess(source) {
+		const encodedSource = Buffer.from(source, 'utf8').toString('base64');
+		return [`/* ${SOURCE_PREFIX}${encodedSource} */\n`];
+	},
+	postprocess(messageLists) {
+		return messageLists[0] || [];
+	},
+	supportsAutofix: false
+};

package/src/rules/no-unsafe-template.js

@@ -0,0 +1,229 @@
+const path = require('node:path');
+
+const SOURCE_PREFIX = 'preact-i18n-json:';
+const UNSAFE_PATTERNS = [
+	{
+		pattern: /\bon[a-z]+\s*=\s*(?:["'][^"']*)?\{\{/gi,
+		risk: 'HIGH',
+		description: 'Event handler with a dynamic value detected',
+		fix: 'Avoid dynamic event handlers. Use class-based event delegation instead.'
+	},
+	{
+		pattern: /style\s*=\s*["'][^"']*\{\{[^}]+\}\}[^"']*["']/gi,
+		risk: 'HIGH',
+		description: 'Dynamic CSS in a style attribute detected',
+		fix: 'Use class-based styling instead of dynamic style attributes.'
+	},
+	{
+		pattern: /(?:^|[\s<])(href|src|action)\s*=\s*["']?\s*javascript:/gi,
+		risk: 'HIGH',
+		description: 'JavaScript protocol in a URL attribute detected',
+		fix: 'Never use the javascript: protocol. Use a valid URL instead.'
+	},
+	{
+		pattern: /(?:^|[\s<])(href|src|action)\s*=\s*["']?\s*data:text\/html/gi,
+		risk: 'HIGH',
+		description: 'Data URI with HTML content detected',
+		fix: 'Avoid data:text/html URIs. Use a safe, allowlisted protocol.'
+	},
+	{
+		pattern:
+			/<svg(?:[^>]*=\s*[^{<]*\{\{[^>]*\/?>|[\s\S]*?<[^>]*=\s*[^{<]*\{\{[^>]*>[\s\S]*?<\/svg>)/gi,
+		risk: 'MEDIUM',
+		description: 'SVG element with dynamic attributes detected',
+		fix: 'Avoid dynamic SVG attributes.'
+	},
+	{
+		pattern: /(href|src|action)\s*=\s*\{\{/gi,
+		risk: 'HIGH',
+		description: 'URL attribute with an unquoted dynamic value detected',
+		fix: 'Always quote URL attributes, for example href="{{url}}".'
+	},
+	{
+		pattern: /([a-z-]+)\s*=\s*\{\{[^}]+\}\}(?!\s*["'])/gi,
+		risk: 'HIGH',
+		description: 'Unquoted attribute with a dynamic value detected',
+		fix: 'Always quote dynamic attributes, for example title="{{title}}".'
+	}
+];
+
+function getJsonSource(context, node) {
+	const filename = context.physicalFilename || context.filename;
+	if (path.extname(filename).toLowerCase() !== '.json') {
+		return null;
+	}
+
+	const comments = node.comments || [];
+	const encodedComment = comments.find(comment => comment.value.trim().startsWith(SOURCE_PREFIX));
+
+	if (encodedComment) {
+		const encodedSource = encodedComment.value.trim().slice(SOURCE_PREFIX.length);
+		return Buffer.from(encodedSource, 'base64').toString('utf8');
+	}
+
+	if (comments.length >= 2) {
+		return comments[0].value.trim();
+	}
+
+	const source = context.sourceCode.text;
+	return source.trim().startsWith('{') || source.trim().startsWith('[') ? source : null;
+}
+
+function getLocation(source, index) {
+	const precedingSource = source.slice(0, index);
+	const line = precedingSource.split('\n').length;
+	const lastNewline = precedingSource.lastIndexOf('\n');
+
+	return {
+		line,
+		column: index - lastNewline - 1
+	};
+}
+
+function readJsonString(source, start) {
+	let escaped = false;
+
+	for (let index = start + 1; index < source.length; index++) {
+		const character = source[index];
+
+		if (escaped) {
+			escaped = false;
+		} else if (character === '\\') {
+			escaped = true;
+		} else if (character === '"') {
+			const rawValue = source.slice(start, index + 1);
+
+			try {
+				return {
+					end: index + 1,
+					value: JSON.parse(rawValue)
+				};
+			} catch (error) {
+				return null;
+			}
+		}
+	}
+
+	return null;
+}
+
+function getTranslationStrings(source) {
+	const strings = [];
+
+	for (let index = 0; index < source.length; index++) {
+		if (source[index] !== '"') {
+			continue;
+		}
+
+		const parsedString = readJsonString(source, index);
+		if (!parsedString) {
+			return [];
+		}
+
+		let nextIndex = parsedString.end;
+		while (/\s/.test(source[nextIndex])) {
+			nextIndex++;
+		}
+
+		if (source[nextIndex] !== ':') {
+			strings.push({
+				index,
+				value: parsedString.value
+			});
+		}
+
+		index = parsedString.end - 1;
+	}
+
+	return strings;
+}
+
+function findIssues(value) {
+	const issues = [];
+
+	UNSAFE_PATTERNS.forEach(patternDefinition => {
+		const regex = new RegExp(patternDefinition.pattern.source, patternDefinition.pattern.flags);
+		let match;
+
+		while ((match = regex.exec(value)) !== null) {
+			const end = match.index + match[0].length;
+			const overlapsExistingIssue = issues.some(issue => {
+				const overlaps = match.index < issue.end && end > issue.index;
+				if (!overlaps) return false;
+
+				// Only deduplicate the URL-specific pattern with the generic unquoted attribute pattern
+				const isURLPattern =
+					patternDefinition.description === 'URL attribute with an unquoted dynamic value detected';
+				const isGenericPattern =
+					patternDefinition.description === 'Unquoted attribute with a dynamic value detected';
+				const issueIsURLPattern =
+					issue.description === 'URL attribute with an unquoted dynamic value detected';
+				const issueIsGenericPattern =
+					issue.description === 'Unquoted attribute with a dynamic value detected';
+
+				return (isURLPattern || isGenericPattern) && (issueIsURLPattern || issueIsGenericPattern);
+			});
+
+			if (!overlapsExistingIssue) {
+				issues.push({
+					...patternDefinition,
+					index: match.index,
+					end
+				});
+			}
+		}
+	});
+
+	return issues;
+}
+
+module.exports = {
+	meta: {
+		type: 'problem',
+		docs: {
+			description: 'disallows unsafe dynamic markup in translation templates',
+			category: 'Possible errors'
+		},
+		schema: [],
+		messages: {
+			unsafeTemplate: '{{risk}} risk: {{description}}. {{fix}}'
+		}
+	},
+	create(context) {
+		return {
+			Program(node) {
+				const source = getJsonSource(context, node);
+				if (!source) {
+					return;
+				}
+
+				try {
+					JSON.parse(source);
+				} catch (error) {
+					return;
+				}
+
+				getTranslationStrings(source).forEach(translation => {
+					findIssues(translation.value).forEach(issue => {
+						const start = getLocation(source, translation.index);
+
+						context.report({
+							loc: {
+								start
+							},
+							messageId: 'unsafeTemplate',
+							data: {
+								risk: issue.risk,
+								description: issue.description,
+								fix: issue.fix
+							}
+						});
+					});
+				});
+			}
+		};
+	}
+};
+
+module.exports.findIssues = findIssues;
+module.exports.getTranslationStrings = getTranslationStrings;

package/test/src/index.spec.js

@@ -2,11 +2,13 @@ import assert from 'node:assert';
 import api from '../../src';
 
 describe('module exports', () => {
-	it('should have exactly 4 rules defined', () => {
-		assert.deepEqual(Object.keys(api), ['rules']);
+	it('should expose the rules and JSON processor', () => {
+		assert.deepEqual(Object.keys(api), ['processors', 'rules']);
+		assert.ok(api.processors['translation-json']);
 		assert.ok(api.rules['no-unknown-key']);
 		assert.ok(api.rules['no-text-as-children']);
 		assert.ok(api.rules['no-text-as-attribute']);
 		assert.ok(api.rules['no-missing-template-field']);
+		assert.ok(api.rules['no-unsafe-template']);
 	});
 });

package/test/src/rules/no-unsafe-template.spec.js

@@ -0,0 +1,190 @@
+import assert from 'node:assert';
+import { Linter } from 'eslint';
+import i18nJsonPlugin from 'eslint-plugin-i18n-json';
+import plugin from '../../../src';
+import rule from '../../../src/rules/no-unsafe-template';
+
+const lintJson = code => {
+	const linter = new Linter();
+
+	return linter.verify(
+		code,
+		{
+			files: ['**/*.json'],
+			plugins: {
+				'preact-i18n': plugin
+			},
+			processor: 'preact-i18n/translation-json',
+			rules: {
+				'preact-i18n/no-unsafe-template': 'error'
+			}
+		},
+		{
+			filename: 'intl/en.json'
+		}
+	);
+};
+
+describe('no-unsafe-template', () => {
+	it('accepts safe translation templates', () => {
+		const messages = lintJson(
+			JSON.stringify({
+				plain: 'Hello {{name}}',
+				link: '<a href="{{url}}">{{label}}</a>',
+				image: '<img src="/images/logo.svg">'
+			})
+		);
+
+		assert.deepEqual(messages, []);
+	});
+
+	[
+		['dynamic event handler', '<button onclick="{{handler}}">Open</button>', 'Event handler'],
+		['unquoted attribute', '<div title={{title}}>Title</div>', 'Unquoted attribute'],
+		['dynamic style', "<div style='color: {{color}}'>Text</div>", 'Dynamic CSS'],
+		['JavaScript URL', "<a href='javascript:alert(1)'>Open</a>", 'JavaScript protocol'],
+		['HTML data URI', "<iframe src='data:text/html,<h1>Unsafe</h1>'>", 'Data URI'],
+		['dynamic SVG attribute', '<svg fill="{{color}}"></svg>', 'SVG element'],
+		['unquoted URL', '<a href={{url}}>Open</a>', 'URL attribute']
+	].forEach(([name, template, message]) => {
+		it(`reports a ${name}`, () => {
+			const messages = lintJson(JSON.stringify({ nested: { template } }, null, 2));
+
+			assert.equal(messages.length, 1);
+			assert.match(messages[0].message, new RegExp(message));
+			assert.equal(messages[0].severity, 2);
+			assert.equal(messages[0].line, 3);
+		});
+	});
+
+	it('checks decoded values containing escaped double quotes', () => {
+		const messages = lintJson(JSON.stringify({ template: '<div style="color: {{color}}">Text</div>' }));
+
+		assert.equal(messages.length, 1);
+		assert.match(messages[0].message, /Dynamic CSS/);
+	});
+
+	it('recognizes complete event names', () => {
+		const messages = lintJson(
+			JSON.stringify({ template: '<div onmouseover="show({{item}})">Text</div>' })
+		);
+
+		assert.equal(messages.length, 1);
+		assert.match(messages[0].message, /Event handler/);
+	});
+
+	it('supports the eslint-plugin-i18n-json processor', () => {
+		const linter = new Linter();
+		const messages = linter.verify(
+			JSON.stringify({ template: '<a href={{url}}>Open</a>' }),
+			{
+				files: ['**/*.json'],
+				plugins: {
+					'i18n-json': i18nJsonPlugin,
+					'preact-i18n': plugin
+				},
+				processor: {
+					meta: {
+						name: 'i18n-json'
+					},
+					...i18nJsonPlugin.processors['.json']
+				},
+				rules: {
+					'preact-i18n/no-unsafe-template': 'error'
+				}
+			},
+			{
+				filename: 'intl/en.json'
+			}
+		);
+
+		assert.equal(messages.length, 1);
+		assert.match(messages[0].message, /URL attribute/);
+	});
+
+	it('does not report overlapping generic and URL attribute errors twice', () => {
+		const issues = rule.findIssues('<a href={{url}}>Open</a>');
+
+		assert.equal(issues.length, 1);
+		assert.match(issues[0].description, /URL attribute/);
+	});
+
+	it('detects dynamic attributes on SVG descendants', () => {
+		const issues = rule.findIssues('<svg><path fill="{{color}}" /></svg>');
+
+		assert.equal(issues.length, 1);
+		assert.match(issues[0].description, /SVG element/);
+	});
+
+	it('detects dynamic attributes on SVG use elements', () => {
+		const issues = rule.findIssues('<svg><use href="{{url}}" /></svg>');
+
+		assert.equal(issues.length, 1);
+		assert.match(issues[0].description, /SVG element/);
+	});
+
+	it('reports both SVG and URL pattern when they overlap but are distinct patterns', () => {
+		const issues = rule.findIssues('<svg fill="{{color}}" href={{url}}></svg>');
+
+		assert.equal(issues.length, 2);
+		const descriptions = issues.map(i => i.description);
+		assert(descriptions.some(d => d.includes('SVG element')));
+		assert(descriptions.some(d => d.includes('URL attribute')));
+	});
+
+	it('detects dynamic attributes on nested SVG elements with closing tag', () => {
+		const issues = rule.findIssues('<svg><circle cx="{{x}}" cy="{{y}}" /></svg>');
+
+		assert.equal(issues.length, 1);
+		assert.match(issues[0].description, /SVG element/);
+	});
+
+	it('detects multiple dynamic attributes in different SVG descendants', () => {
+		const issues = rule.findIssues('<svg><path d="{{path}}" /><text x="{{x}}">{{label}}</text></svg>');
+
+		assert.equal(issues.length, 1);
+		assert.match(issues[0].description, /SVG element/);
+	});
+
+	it('reports distinct high-risk patterns even when overlapping with broader patterns', () => {
+		// SVG pattern (MEDIUM) should not suppress the URL pattern (HIGH)
+		const issues = rule.findIssues('<svg src={{url}} onclick="{{handler}}">');
+
+		const descriptions = issues.map(i => i.description);
+		// Should report: URL attribute (HIGH) and Event handler (HIGH), and possibly SVG (MEDIUM)
+		assert(descriptions.some(d => d.includes('URL attribute')));
+		assert(descriptions.some(d => d.includes('Event handler')));
+	});
+
+	it('detects interpolation with static prefix in SVG attribute', () => {
+		const issues = rule.findIssues('<svg fill="red {{color}}">')
+			.filter(i => i.description.includes('SVG'));
+
+		assert.equal(issues.length, 1);
+		assert.match(issues[0].description, /SVG element/);
+	});
+
+	it('detects interpolation with static suffix in SVG attribute', () => {
+		const issues = rule.findIssues('<svg><use href="#{{id}}" /></svg>')
+			.filter(i => i.description.includes('SVG'));
+
+		assert.equal(issues.length, 1);
+		assert.match(issues[0].description, /SVG element/);
+	});
+
+	it('detects interpolation with both prefix and suffix in SVG attribute', () => {
+		const issues = rule.findIssues('<svg><path d="M 10 {{y}} L 20 30" /></svg>')
+			.filter(i => i.description.includes('SVG'));
+
+		assert.equal(issues.length, 1);
+		assert.match(issues[0].description, /SVG element/);
+	});
+
+	it('detects interpolation in self-closing SVG tag with attribute prefix', () => {
+		const issues = rule.findIssues('<svg viewBox="0 {{scale}} 100" />')
+			.filter(i => i.description.includes('SVG'));
+
+		assert.equal(issues.length, 1);
+		assert.match(issues[0].description, /SVG element/);
+	});
+});