[Synthetics] Fix escape vars template literal inline script !!

x-pack/solutions/observability/plugins/synthetics/server/synthetics_service/formatters/formatting_utils.test.ts

@@ -4,8 +4,9 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
-import { replaceStringWithParams } from './formatting_utils';
+import { inlineSourceFormatter, replaceStringWithParams } from './formatting_utils';
 import { loggerMock } from '@kbn/logging-mocks';
+import { ConfigKey } from '../../../common/constants/monitor_management';
 
 describe('replaceStringWithParams', () => {
   const logger = loggerMock.create();
@@ -238,4 +239,14 @@ describe('replaceStringWithParams', () => {
 
     expect(result).toEqual({});
   });
+
+  it(`should replace $ {} with adding $ in start for template literal`, () => {
+    const value = inlineSourceFormatter(
+      {
+        [ConfigKey.SOURCE_INLINE]: 'const a = ${b}; const c = ${d}',
+      },
+      ConfigKey.SOURCE_INLINE
+    );
+    expect(value).toEqual('const a = $${b}; const c = $${d}');
+  });
 });

x-pack/solutions/observability/plugins/synthetics/server/synthetics_service/formatters/formatting_utils.ts

@@ -122,3 +122,15 @@ export const formatMWs = (mws?: MaintenanceWindow[], strRes = true) => {
   }
   return JSON.stringify(formatted);
 };
+
+function escapeTemplateLiterals(script: string): string {
+  return script.replace(/\$\{/g, '$$${');
+}
+
+export const inlineSourceFormatter: FormatterFn = (fields, key) => {
+  const value = fields[key] as string;
+  if (!value?.trim()) return value;
+
+  // Escape template literals to prevent unintended interpolation
+  return escapeTemplateLiterals(value);
+};

x-pack/solutions/observability/plugins/synthetics/server/synthetics_service/formatters/private_formatters/formatting_utils.ts

@@ -5,6 +5,7 @@
  * 2.0.
  */
 
+import { inlineSourceFormatter } from '../formatting_utils';
 import { ConfigKey, MonitorFields } from '../../../../common/runtime_types';
 
 export type FormatterFn = (fields: Partial<MonitorFields>, key: ConfigKey) => string | null;
@@ -53,8 +54,12 @@ export const tlsArrayToYamlFormatter: FormatterFn = (fields, key) => {
 };
 
 export const stringToJsonFormatter: FormatterFn = (fields, key) => {
-  const value = (fields[key] as string) ?? '';
+  if (key === ConfigKey.SOURCE_INLINE) {
+    const value = inlineSourceFormatter(fields, key);
 
+    return value ? JSON.stringify(value) : null;
+  }
+  const value = (fields[key] as string) ?? '';
   return value ? JSON.stringify(value) : null;
 };
 

x-pack/solutions/observability/plugins/synthetics/server/synthetics_service/formatters/public_formatters/browser.ts

@@ -5,6 +5,7 @@
  * 2.0.
  */
 
+import { inlineSourceFormatter } from '../formatting_utils';
 import { DEFAULT_BROWSER_ADVANCED_FIELDS } from '../../../../common/constants/monitor_defaults';
 import { BrowserFields, ConfigKey } from '../../../../common/runtime_types';
 import { Formatter, commonFormatters } from './common';
@@ -42,7 +43,7 @@ export const browserFormatters: BrowserFormatMap = {
   [ConfigKey.PORT]: null,
   [ConfigKey.URLS]: null,
   [ConfigKey.METADATA]: objectFormatter,
-  [ConfigKey.SOURCE_INLINE]: null,
+  [ConfigKey.SOURCE_INLINE]: inlineSourceFormatter,
   [ConfigKey.THROTTLING_CONFIG]: throttlingFormatter,
   [ConfigKey.JOURNEY_FILTERS_MATCH]: null,
   [ConfigKey.SYNTHETICS_ARGS]: arrayFormatter,