diff --git a/src/options/components/RuleEditor.tsx b/src/options/components/RuleEditor.tsx
index fbe9a03..076500d 100644
--- a/src/options/components/RuleEditor.tsx
+++ b/src/options/components/RuleEditor.tsx
@@ -8,7 +8,11 @@ interface RuleEditorProps {
   onCancel: () => void;
 }
 
+const hasWhitespace = (value: string) => value !== value.trim();
+
 export function RuleEditor({ rule, onSave, onCancel }: RuleEditorProps) {
+  const [headerValueWarnings, setHeaderValueWarnings] = useState<Record<string, boolean>>({});
+
   const [formData, setFormData] = useState<ModificationRule>(() => {
     if (rule) {
       return rule;
@@ -72,6 +76,14 @@ export function RuleEditor({ rule, onSave, onCancel }: RuleEditorProps) {
         h.id === id ? { ...h, [field]: value } : h
       ),
     });
+
+    // Update whitespace warning for header values
+    if (field === 'value') {
+      setHeaderValueWarnings(prev => ({
+        ...prev,
+        [id]: hasWhitespace(value)
+      }));
+    }
   };
 
   const removeHeader = (id: string) => {
@@ -83,7 +95,11 @@ export function RuleEditor({ rule, onSave, onCancel }: RuleEditorProps) {
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
-    if (!formData.name) {
+
+    const trimmedName = formData.name.trim();
+    const trimmedTabUrl = formData.tabUrl?.trim() || '';
+
+    if (!trimmedName) {
       showError('Please fill in the rule name');
       return;
     }
@@ -91,11 +107,31 @@ export function RuleEditor({ rule, onSave, onCancel }: RuleEditorProps) {
       showError('Please add at least one target domain');
       return;
     }
-    if (formData.targetDomains.some(d => !d.url)) {
+
+    // Trim target domains URLs
+    const trimmedDomains = formData.targetDomains.map(d => ({
+      ...d,
+      url: d.url.trim()
+    }));
+
+    if (trimmedDomains.some(d => !d.url)) {
       showError('All target domains must have a URL');
       return;
     }
-    onSave(formData);
+
+    // Trim header names only, keep values as-is
+    const processedHeaders = formData.headers.map(h => ({
+      ...h,
+      name: h.name.trim()
+    }));
+
+    onSave({
+      ...formData,
+      name: trimmedName,
+      tabUrl: trimmedTabUrl,
+      targetDomains: trimmedDomains,
+      headers: processedHeaders
+    });
   };
 
   return (
@@ -178,29 +214,39 @@ export function RuleEditor({ rule, onSave, onCancel }: RuleEditorProps) {
           <div className="headers-section">
             <h4>HTTP Headers</h4>
             {formData.headers.map((header) => (
-              <div key={header.id} className="header-item">
-                <input
-                  data-testid="header-name-input"
-                  type="text"
-                  value={header.name}
-                  onChange={(e) => updateHeader(header.id, 'name', e.target.value)}
-                  placeholder="Header name"
-                />
-                <input
-                  data-testid="header-value-input"
-                  type="text"
-                  value={header.value}
-                  onChange={(e) => updateHeader(header.id, 'value', e.target.value)}
-                  placeholder="Value"
-                />
-                <button
-                  type="button"
-                  className="btn-icon"
-                  onClick={() => removeHeader(header.id)}
-                  title="Remove header"
-                >
-                  ✕
-                </button>
+              <div key={header.id}>
+                <div className="header-item">
+                  <input
+                    data-testid="header-name-input"
+                    type="text"
+                    value={header.name}
+                    onChange={(e) => updateHeader(header.id, 'name', e.target.value)}
+                    placeholder="Header name"
+                  />
+                  <input
+                    data-testid="header-value-input"
+                    type="text"
+                    value={header.value}
+                    onChange={(e) => updateHeader(header.id, 'value', e.target.value)}
+                    placeholder="Value"
+                  />
+                  <button
+                    type="button"
+                    className="btn-icon"
+                    onClick={() => removeHeader(header.id)}
+                    title="Remove header"
+                  >
+                    ✕
+                  </button>
+                </div>
+                {headerValueWarnings[header.id] && (
+                  <div
+                    data-testid="header-value-whitespace-warning"
+                    className="text-xs text-amber-600 dark:text-amber-400 mt-1 ml-1"
+                  >
+                    Value contains leading or trailing spaces
+                  </div>
+                )}
               </div>
             ))}
             <button
diff --git a/src/options/components/VariableEditor.tsx b/src/options/components/VariableEditor.tsx
index fa24fdc..d3e7eb4 100644
--- a/src/options/components/VariableEditor.tsx
+++ b/src/options/components/VariableEditor.tsx
@@ -18,6 +18,7 @@ export function VariableEditor({
 }: VariableEditorProps) {
   const [editName, setEditName] = useState('');
   const [editValue, setEditValue] = useState('');
+  const [valueHasWhitespace, setValueHasWhitespace] = useState(false);
   const [editIsSensitive, setEditIsSensitive] = useState(false);
   const [editRefreshUrl, setEditRefreshUrl] = useState('');
   const [editRefreshMethod, setEditRefreshMethod] = useState<string>('POST');
@@ -30,6 +31,7 @@ export function VariableEditor({
     if (variable) {
       setEditName(variable.name);
       setEditValue(variable.value);
+      setValueHasWhitespace(variable.value !== variable.value.trim());
       setEditIsSensitive(variable.isSensitive || false);
 
       if (variable.refreshConfig) {
@@ -69,6 +71,7 @@ export function VariableEditor({
       // Reset for adding new variable
       setEditName('');
       setEditValue('');
+      setValueHasWhitespace(false);
       setEditIsSensitive(false);
       setEditRefreshUrl('');
       setEditRefreshMethod('POST');
@@ -79,23 +82,26 @@ export function VariableEditor({
   }, [variable]);
 
   const handleSave = () => {
-    if (!editName.trim()) {
+    const trimmedName = editName.trim();
+
+    if (!trimmedName) {
       showError('Variable name cannot be empty');
       return;
     }
 
-    // Check for duplicate names (excluding current variable being edited)
+    // Check for duplicate names with trimmed values
     const duplicate = existingVariables.find(
-      v => v.name === editName && v.id !== variable?.id
+      v => v.name.trim() === trimmedName && v.id !== variable?.id
     );
     if (duplicate) {
-      showError(`Variable "${editName}" already exists`);
+      showError(`Variable "${trimmedName}" already exists`);
       return;
     }
 
     // Build refresh config from separate fields
+    const trimmedRefreshUrl = editRefreshUrl.trim();
     let refreshConfig: RefreshConfig | undefined;
-    if (editRefreshUrl.trim()) {
+    if (trimmedRefreshUrl) {
       // Build headers object
       const headers: Record<string, string> = {};
       editRefreshHeaders.forEach(header => {
@@ -117,7 +123,7 @@ export function VariableEditor({
 
       // Build complete refresh config
       refreshConfig = {
-        url: editRefreshUrl,
+        url: trimmedRefreshUrl,
         method: editRefreshMethod as RefreshConfig['method'],
         headers: Object.keys(headers).length > 0 ? headers : undefined,
         body,
@@ -130,8 +136,8 @@ export function VariableEditor({
 
     const savedVariable: Variable = {
       id: variable?.id || generateId(),
-      name: editName,
-      value: editValue,
+      name: trimmedName,
+      value: editValue, // NOT trimmed - user choice
       isSensitive: editIsSensitive,
       refreshConfig,
     };
@@ -154,11 +160,22 @@ export function VariableEditor({
           type={editIsSensitive ? 'password' : 'text'}
           placeholder="Variable value"
           value={editValue}
-          onChange={e => setEditValue(e.target.value)}
+          onChange={e => {
+            setEditValue(e.target.value);
+            setValueHasWhitespace(e.target.value !== e.target.value.trim());
+          }}
           className="flex-1 px-2.5 py-2 border border-[#bdc3c7] rounded text-sm
             dark:border-[#404040] dark:bg-[#2d2d2d] dark:text-[#e4e4e4]"
         />
       </div>
+      {valueHasWhitespace && (
+        <div
+          data-testid="variable-value-whitespace-warning"
+          className="text-xs text-amber-600 dark:text-amber-400 mb-2.5"
+        >
+          Value contains leading or trailing spaces
+        </div>
+      )}
       <div className="mb-2.5">
         <label className="flex items-center gap-2 cursor-pointer">
           <input
diff --git a/tests/e2e/trim-inputs.test.ts b/tests/e2e/trim-inputs.test.ts
new file mode 100644
index 0000000..a224b78
--- /dev/null
+++ b/tests/e2e/trim-inputs.test.ts
@@ -0,0 +1,291 @@
+/**
+ * E2E Tests for Input Trimming Functionality
+ * Tests that whitespace is properly trimmed from inputs where expected,
+ * and warnings are shown for values that are intentionally not trimmed.
+ */
+import { describe, test, expect, beforeEach, afterEach } from 'vitest';
+import { Browser } from 'puppeteer';
+import { launchBrowserWithExtension, getExtensionId } from '../helpers/browser.js';
+import { TEST_PAGE_URL } from '../helpers/server.js';
+import { configureExtensionRule, configureVariables } from '../helpers/config.js';
+import { TestResult } from '../helpers/types.js';
+
+let browser: Browser | null = null;
+
+beforeEach(async () => {
+  browser = await launchBrowserWithExtension();
+});
+
+afterEach(async () => {
+  if (browser) {
+    await browser.close();
+    browser = null;
+  }
+});
+
+describe('Input Trimming', () => {
+  test('should trim whitespace from target domain URL', async () => {
+    const extensionId = await getExtensionId(browser!);
+
+    const optionsPage = await browser!.newPage();
+    await optionsPage.goto(`chrome-extension://${extensionId}/options.html`);
+
+    // Configure rule with spaces in target domain
+    await configureExtensionRule(
+      optionsPage,
+      'Trim Domain Test',
+      [{ url: '  localhost:3333  ', matchType: 'startsWith' }],
+      [{ name: 'X-Custom-Header', value: 'TrimTest' }]
+    );
+
+    // Open test page and make request
+    const testPage = await browser!.newPage();
+    await testPage.goto(`${TEST_PAGE_URL}?autotest=true`);
+
+    await testPage.waitForFunction(
+      () => window.testResult !== null && window.testResult !== undefined,
+      { timeout: 10000 }
+    );
+
+    const result = await testPage.evaluate(() => window.testResult) as TestResult;
+
+    // Should work because the domain URL was trimmed
+    expect(result).toBeDefined();
+    expect(result.customHeaders['x-custom-header']).toBe('TrimTest');
+  }, 30000);
+
+  test('should trim whitespace from header name', async () => {
+    const extensionId = await getExtensionId(browser!);
+
+    const optionsPage = await browser!.newPage();
+    await optionsPage.goto(`chrome-extension://${extensionId}/options.html`);
+
+    // Configure rule with spaces in header name
+    await configureExtensionRule(
+      optionsPage,
+      'Trim Header Name Test',
+      [{ url: 'localhost:3333', matchType: 'startsWith' }],
+      [{ name: '  X-Custom-Header  ', value: 'HeaderNameTrimTest' }]
+    );
+
+    const testPage = await browser!.newPage();
+    await testPage.goto(`${TEST_PAGE_URL}?autotest=true`);
+
+    await testPage.waitForFunction(
+      () => window.testResult !== null && window.testResult !== undefined,
+      { timeout: 10000 }
+    );
+
+    const result = await testPage.evaluate(() => window.testResult) as TestResult;
+
+    // Header name should be trimmed - check lowercase as HTTP headers are case-insensitive
+    expect(result).toBeDefined();
+    expect(result.customHeaders['x-custom-header']).toBe('HeaderNameTrimTest');
+  }, 30000);
+
+  test('header value whitespace is trimmed by browser HTTP layer (per RFC 7230)', async () => {
+    const extensionId = await getExtensionId(browser!);
+
+    const optionsPage = await browser!.newPage();
+    await optionsPage.goto(`chrome-extension://${extensionId}/options.html`);
+
+    // Configure rule with spaces in header value
+    // Note: We don't trim in our code, but Chrome's HTTP layer trims per RFC 7230
+    await configureExtensionRule(
+      optionsPage,
+      'Header Value HTTP Trim Test',
+      [{ url: 'localhost:3333', matchType: 'startsWith' }],
+      [{ name: 'X-Custom-Header', value: '  ValueWithSpaces  ' }]
+    );
+
+    const testPage = await browser!.newPage();
+    await testPage.goto(`${TEST_PAGE_URL}?autotest=true`);
+
+    await testPage.waitForFunction(
+      () => window.testResult !== null && window.testResult !== undefined,
+      { timeout: 10000 }
+    );
+
+    const result = await testPage.evaluate(() => window.testResult) as TestResult;
+
+    // Per HTTP spec (RFC 7230 Section 3.2.6), browsers trim leading/trailing
+    // whitespace from header values. This is expected behavior.
+    expect(result).toBeDefined();
+    expect(result.customHeaders['x-custom-header']).toBe('ValueWithSpaces');
+  }, 30000);
+
+  test('should trim variable name for substitution to work', async () => {
+    const extensionId = await getExtensionId(browser!);
+
+    const optionsPage = await browser!.newPage();
+    await optionsPage.goto(`chrome-extension://${extensionId}/options.html`);
+
+    // Configure variable with spaces in name and value
+    await configureVariables(optionsPage, [
+      { name: '  myToken  ', value: '  secret123  ' }
+    ]);
+
+    // Configure rule using the variable (with trimmed name)
+    await configureExtensionRule(
+      optionsPage,
+      'Variable Trim Test',
+      [{ url: 'localhost:3333', matchType: 'startsWith' }],
+      [{ name: 'X-Auth', value: '${myToken}' }]
+    );
+
+    const testPage = await browser!.newPage();
+    await testPage.goto(`${TEST_PAGE_URL}?autotest=true`);
+
+    await testPage.waitForFunction(
+      () => window.testResult !== null && window.testResult !== undefined,
+      { timeout: 10000 }
+    );
+
+    const result = await testPage.evaluate(() => window.testResult) as TestResult;
+
+    // Variable name was trimmed, so ${myToken} should work
+    // Note: Variable value may contain spaces in storage, but HTTP layer trims
+    expect(result).toBeDefined();
+    expect(result.customHeaders['x-auth']).toBe('secret123');
+  }, 30000);
+
+  test('should handle multiple fields with whitespace simultaneously', async () => {
+    const extensionId = await getExtensionId(browser!);
+
+    const optionsPage = await browser!.newPage();
+    await optionsPage.goto(`chrome-extension://${extensionId}/options.html`);
+
+    // Configure rule with spaces in multiple fields
+    await configureExtensionRule(
+      optionsPage,
+      '  Trim All Test  ',  // Rule name with spaces
+      [{ url: '  localhost:3333  ', matchType: 'startsWith' }],  // Domain with spaces
+      [
+        { name: '  X-Test-Header  ', value: '  TestValue  ' },  // Name and value with spaces
+        { name: '  X-Custom-Header  ', value: 'NoSpaces' }
+      ]
+    );
+
+    const testPage = await browser!.newPage();
+    await testPage.goto(`${TEST_PAGE_URL}?autotest=true`);
+
+    await testPage.waitForFunction(
+      () => window.testResult !== null && window.testResult !== undefined,
+      { timeout: 10000 }
+    );
+
+    const result = await testPage.evaluate(() => window.testResult) as TestResult;
+
+    expect(result).toBeDefined();
+    // Header names are trimmed by our code, values trimmed by HTTP layer
+    expect(result.customHeaders['x-test-header']).toBe('TestValue');
+    expect(result.customHeaders['x-custom-header']).toBe('NoSpaces');
+  }, 30000);
+});
+
+describe('Whitespace Warning UI', () => {
+  test('should show warning when header value has whitespace', async () => {
+    const extensionId = await getExtensionId(browser!);
+
+    const optionsPage = await browser!.newPage();
+    await optionsPage.goto(`chrome-extension://${extensionId}/options.html`);
+
+    // Open rule editor
+    await optionsPage.waitForSelector('[data-testid="create-rule-button"]', { timeout: 5000 });
+    await new Promise(resolve => setTimeout(resolve, 200));
+    await optionsPage.evaluate(() => {
+      const button = document.querySelector('[data-testid="create-rule-button"]') as HTMLElement;
+      button?.click();
+    });
+    await optionsPage.waitForSelector('[data-testid="save-rule-button"]', { timeout: 5000 });
+
+    // Add a header
+    await optionsPage.click('[data-testid="add-header-button"]');
+    await new Promise(resolve => setTimeout(resolve, 200));
+
+    // Type header name
+    const headerNameInputs = await optionsPage.$$('[data-testid="header-name-input"]');
+    await headerNameInputs[0].type('X-Test');
+
+    // Type header value with spaces
+    const headerValueInputs = await optionsPage.$$('[data-testid="header-value-input"]');
+    await headerValueInputs[0].type('  value with spaces  ');
+
+    // Wait a bit for state update
+    await new Promise(resolve => setTimeout(resolve, 100));
+
+    // Check for warning message
+    const warning = await optionsPage.$('[data-testid="header-value-whitespace-warning"]');
+    expect(warning).not.toBeNull();
+
+    const warningText = await optionsPage.evaluate(
+      el => el?.textContent,
+      warning
+    );
+    expect(warningText).toContain('leading or trailing spaces');
+  }, 30000);
+
+  test('should show warning when variable value has whitespace', async () => {
+    const extensionId = await getExtensionId(browser!);
+
+    const optionsPage = await browser!.newPage();
+    await optionsPage.goto(`chrome-extension://${extensionId}/options.html`);
+
+    // Click add variable button
+    await optionsPage.waitForSelector('[data-testid="add-variable-button"]', { timeout: 5000 });
+    await optionsPage.click('[data-testid="add-variable-button"]');
+    await new Promise(resolve => setTimeout(resolve, 200));
+
+    // Type variable name
+    const nameInput = await optionsPage.$('input[placeholder*="Variable name"]');
+    await nameInput!.type('testVar');
+
+    // Type variable value with spaces
+    const valueInput = await optionsPage.$('input[placeholder*="Variable value"]');
+    await valueInput!.type('  value with spaces  ');
+
+    // Wait a bit for state update
+    await new Promise(resolve => setTimeout(resolve, 100));
+
+    // Check for warning message
+    const warning = await optionsPage.$('[data-testid="variable-value-whitespace-warning"]');
+    expect(warning).not.toBeNull();
+
+    const warningText = await optionsPage.evaluate(
+      el => el?.textContent,
+      warning
+    );
+    expect(warningText).toContain('leading or trailing spaces');
+  }, 30000);
+
+  test('should not show warning when value has no whitespace', async () => {
+    const extensionId = await getExtensionId(browser!);
+
+    const optionsPage = await browser!.newPage();
+    await optionsPage.goto(`chrome-extension://${extensionId}/options.html`);
+
+    // Open rule editor
+    await optionsPage.waitForSelector('[data-testid="create-rule-button"]', { timeout: 5000 });
+    await new Promise(resolve => setTimeout(resolve, 200));
+    await optionsPage.evaluate(() => {
+      const button = document.querySelector('[data-testid="create-rule-button"]') as HTMLElement;
+      button?.click();
+    });
+    await optionsPage.waitForSelector('[data-testid="save-rule-button"]', { timeout: 5000 });
+
+    // Add a header
+    await optionsPage.click('[data-testid="add-header-button"]');
+    await new Promise(resolve => setTimeout(resolve, 200));
+
+    // Type header value without spaces
+    const headerValueInputs = await optionsPage.$$('[data-testid="header-value-input"]');
+    await headerValueInputs[0].type('valueWithoutSpaces');
+
+    // Wait a bit for state update
+    await new Promise(resolve => setTimeout(resolve, 100));
+
+    // Check that warning is NOT present
+    const warning = await optionsPage.$('[data-testid="header-value-whitespace-warning"]');
+    expect(warning).toBeNull();
+  }, 30000);
+});