fix: warn on bidirectional control characters

Author: Ocean-OS

.changeset/rare-crews-collect.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: warn on bidirectional control characters

documentation/docs/98-reference/.generated/compile-warnings.md

@@ -586,6 +586,14 @@ Attributes should not contain ':' characters to prevent ambiguity with Svelte di
 Quoted attributes on components and custom elements will be stringified in a future version of Svelte. If this isn't what you want, remove the quotes
 ```
 
+### bidirectional_control_characters_detected
+
+```
+A bidirectional control character was detected in your code. These characters can be used to alter the visual direction of your code and could have unintended consequences
+```
+
+Bidirectional control characters can alter the direction in which text appears to be in. For example, via control characters, you can make `defabc` look like `abcdef`. As a result, if you were to copy some code that has these control characters, they may alter the behavior of your code in ways you did not intend. For more information check out [this website](https://trojansource.codes).
+
 ### bind_invalid_each_rest
 
 ```

packages/svelte/messages/compile-warnings/misc.md

@@ -1,3 +1,9 @@
+## bidirectional_control_characters_detected
+
+> A bidirectional control character was detected in your code. These characters can be used to alter the visual direction of your code and could have unintended consequences
+
+Bidirectional control characters can alter the direction in which text appears to be in. For example, via control characters, you can make `defabc` look like `abcdef`. As a result, if you were to unknowingly copy and paste some code that has these control characters, they may alter the behavior of your code in ways you did not intend. For more information check out [this website](https://trojansource.codes).
+
 ## legacy_code
 
 > `%code%` is no longer valid — please use `%suggestion%` instead

packages/svelte/src/compiler/phases/1-parse/index.js

@@ -2,8 +2,9 @@
 // @ts-expect-error acorn type definitions are borked in the release we use
 import { isIdentifierStart, isIdentifierChar } from 'acorn';
 import fragment from './state/fragment.js';
-import { regex_whitespace } from '../patterns.js';
+import { regex_bidirectional_control_characters, regex_whitespace } from '../patterns.js';
 import * as e from '../../errors.js';
+import * as w from '../../warnings.js';
 import { create_fragment } from './utils/create.js';
 import read_options from './read/options.js';
 import { is_reserved } from '../../../utils.js';
@@ -64,6 +65,11 @@ export class Parser {
 			throw new TypeError('Template must be a string');
 		}
 
+		const control_chars = regex_bidirectional_control_characters.exec(template);
+		if (control_chars) {
+			w.bidirectional_control_characters_detected({ start: template.indexOf(control_chars[0][0]) });
+		}
+
 		this.loose = loose;
 		this.template_untrimmed = template;
 		this.template = template.trimEnd();

packages/svelte/src/compiler/phases/2-analyze/index.js

@@ -43,6 +43,7 @@ import { ImportDeclaration } from './visitors/ImportDeclaration.js';
 import { KeyBlock } from './visitors/KeyBlock.js';
 import { LabeledStatement } from './visitors/LabeledStatement.js';
 import { LetDirective } from './visitors/LetDirective.js';
+import { Literal } from './visitors/Literal.js';
 import { MemberExpression } from './visitors/MemberExpression.js';
 import { NewExpression } from './visitors/NewExpression.js';
 import { OnDirective } from './visitors/OnDirective.js';
@@ -63,6 +64,7 @@ import { SvelteSelf } from './visitors/SvelteSelf.js';
 import { SvelteWindow } from './visitors/SvelteWindow.js';
 import { SvelteBoundary } from './visitors/SvelteBoundary.js';
 import { TaggedTemplateExpression } from './visitors/TaggedTemplateExpression.js';
+import { TemplateElement } from './visitors/TemplateElement.js';
 import { Text } from './visitors/Text.js';
 import { TitleElement } from './visitors/TitleElement.js';
 import { TransitionDirective } from './visitors/TransitionDirective.js';
@@ -156,6 +158,7 @@ const visitors = {
 	KeyBlock,
 	LabeledStatement,
 	LetDirective,
+	Literal,
 	MemberExpression,
 	NewExpression,
 	OnDirective,
@@ -176,6 +179,7 @@ const visitors = {
 	SvelteWindow,
 	SvelteBoundary,
 	TaggedTemplateExpression,
+	TemplateElement,
 	Text,
 	TransitionDirective,
 	TitleElement,

packages/svelte/src/compiler/phases/2-analyze/visitors/Literal.js

@@ -0,0 +1,14 @@
+/** @import { Literal } from 'estree' */
+import * as w from '../../../warnings.js';
+import { regex_bidirectional_control_characters } from '../../patterns.js';
+
+/**
+ * @param {Literal} node
+ */
+export function Literal(node) {
+	if (typeof node.value === 'string') {
+		if (regex_bidirectional_control_characters.test(node.value)) {
+			w.bidirectional_control_characters_detected(node);
+		}
+	}
+}

packages/svelte/src/compiler/phases/2-analyze/visitors/TemplateElement.js

@@ -0,0 +1,12 @@
+/** @import { TemplateElement } from 'estree' */
+import * as w from '../../../warnings.js';
+import { regex_bidirectional_control_characters } from '../../patterns.js';
+
+/**
+ * @param {TemplateElement} node
+ */
+export function TemplateElement(node) {
+	if (regex_bidirectional_control_characters.test(node.value.cooked ?? '')) {
+		w.bidirectional_control_characters_detected(node);
+	}
+}

packages/svelte/src/compiler/phases/patterns.js

@@ -21,3 +21,4 @@ export const regex_invalid_identifier_chars = /(^[^a-zA-Z_$]|[^a-zA-Z0-9_$])/g;
 export const regex_starts_with_vowel = /^[aeiou]/;
 export const regex_heading_tags = /^h[1-6]$/;
 export const regex_illegal_attribute_character = /(^[0-9-.])|[\^$@%&#?!|()[\]{}^*+~;]/;
+export const regex_bidirectional_control_characters = /[\u202a\u202b\u202c\u202d\u202e\u2066\u2067\u2068\u2069]/;

packages/svelte/src/compiler/warnings.js

@@ -86,6 +86,7 @@ export const codes = [
 	'a11y_role_supports_aria_props_implicit',
 	'a11y_unknown_aria_attribute',
 	'a11y_unknown_role',
+	'bidirectional_control_characters_detected',
 	'legacy_code',
 	'unknown_code',
 	'options_deprecated_accessors',
@@ -506,6 +507,14 @@ export function a11y_unknown_role(node, role, suggestion) {
 	w(node, 'a11y_unknown_role', `${suggestion ? `Unknown role '${role}'. Did you mean '${suggestion}'?` : `Unknown role '${role}'`}\nhttps://svelte.dev/e/a11y_unknown_role`);
 }
 
+/**
+ * A bidirectional control character was detected in your code. These characters can be used to alter the visual direction of your code and could have unintended consequences
+ * @param {null | NodeLike} node
+ */
+export function bidirectional_control_characters_detected(node) {
+	w(node, 'bidirectional_control_characters_detected', `A bidirectional control character was detected in your code. These characters can be used to alter the visual direction of your code and could have unintended consequences\nhttps://svelte.dev/e/bidirectional_control_characters_detected`);
+}
+
 /**
  * `%code%` is no longer valid — please use `%suggestion%` instead
  * @param {null | NodeLike} node

packages/svelte/tests/snapshot/samples/bidirectional-control-chars/_expected/client/index.svelte.js

@@ -0,0 +1,17 @@
+import 'svelte/internal/disclose-version';
+import 'svelte/internal/flags/legacy';
+import * as $ from 'svelte/internal/client';
+
+var root = $.template(`⁧⁦def⁩⁦abc⁩⁩ <h1></h1>`, 1);
+
+export default function Bidirectional_control_chars($$anchor) {
+	let name = '\u2067\u2066rld\u2069\u2066wo\u2069\u2069';
+
+	$.next();
+
+	var fragment = root();
+	var h1 = $.sibling($.first_child(fragment));
+
+	h1.textContent = 'Hello, ⁧⁦rld⁩⁦wo⁩⁩!';
+	$.append($$anchor, fragment);
+}