Отправится ли форма вставленная на сайт с другого домена

Отправка форм с другого домена: ограничения и обходные пути

Короткий ответ: да, форма может отправиться, но с критическими ограничениями из-за политики Same-Origin Policy (SOP) браузеров. Браузер отправит HTTP-запрос на сервер, указанный в атрибуте action формы, однако не сможет прочитать ответ от сервера, если домены разные. Это фундаментальное ограничение безопасности, предотвращающее межсайтовые атаки.

Технические детали и ограничения

Когда форма размещена на сайте site-a.com, а её атрибут action указывает на site-b.com:

<!-- На странице https://site-a.com -->
<form action="https://site-b.com/api/submit" method="POST">
  <input type="text" name="email">
  <button type="submit">Отправить</button>
</form>

1. Запрос выполнится: Браузер отправит POST-запрос на site-b.com с данными формы.
2. Ответ будет заблокирован: Если site-b.com вернёт ответ, браузер, из соображений безопасности, не позволит коду на site-a.com прочитать его содержимое. В консоли разработчика появится ошибка CORS.
3. Поведение зависит от типа запроса: Для "простых" запросов (GET, POST с application/x-www-form-urlencoded, multipart/form-data, text/plain) браузер отправит запрос, но скроет ответ. Для нестандартных методов или заголовков браузер сначала отправит preflight-запрос (OPTIONS).

Механизм CORS (Cross-Origin Resource Sharing)

Для легитимного взаимодействия между доменами используется CORS. Сервер site-b.com должен явно разрешить запросы с site-a.com, отправив специальные заголовки в ответе:

Access-Control-Allow-Origin: https://site-a.com
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers: Content-Type

Без этих заголовков браузер заблокирует ответ для скриптов на site-a.com, хотя сам запрос может быть выполнен.

Практические сценарии и решения

1. Классическая отправка формы с редиректом

Если сервер site-b.com после обработки формы делает редирект обратно на site-a.com или на страницу "спасибо", пользователь просто перейдёт на новый URL. Это работает, но без динамического взаимодействия.

2. Использование CORS для AJAX-отправки

Современный подход — отправка формы через fetch или XMLHttpRequest с предварительной настройкой CORS на сервере:

// На site-a.com
document.querySelector('form').addEventListener('submit', async (e) => {
  e.preventDefault();
  const formData = new FormData(e.target);
  
  try {
    const response = await fetch('https://site-b.com/api/submit', {
      method: 'POST',
      body: formData,
      // credentials: 'include' // Если нужны куки
    });
    
    if (response.ok) {
      const data = await response.json();
      console.log('Успех:', data);
    }
  } catch (error) {
    console.error('Ошибка CORS или сети:', error);
  }
});

3. Прокси-сервер на своём домене

Если нельзя изменить заголовки на site-b.com, можно создать прокси на своём сервере (site-a.com/api/proxy), который будет перенаправлять запросы:

// Прокси-эндпоинт на site-a.com
app.post('/api/proxy', async (req, res) => {
  const response = await fetch('https://site-b.com/api/submit', {
    method: 'POST',
    body: JSON.stringify(req.body),
    headers: {'Content-Type': 'application/json'}
  });
  const data = await response.json();
  res.json(data);
});

4. Использование JSONP (устаревший метод)

Только для GET-запросов. Сервер возвращает данные, обёрнутые в вызов функции JavaScript:

<script>
function handleResponse(data) {
  console.log('Данные:', data);
}
</script>
<script src="https://site-b.com/api/data?callback=handleResponse"></script>

Важные нюансы безопасности

• CSRF-атаки: Формы с других доменов могут использоваться для межсайтовой подделки запросов. Защита: токены CSRF, проверка заголовка Origin.
• Куки и аутентификация: При отправке формы на другой домен куки этого домена будут отправлены, если не установлен флаг SameSite=Strict.
• Content Security Policy (CSP): Некоторые политики CSP могут блокировать отправку форм на внешние домены.

Вывод

Форма физически отправится на любой домен, указанный в action, но полноценное взаимодействие (чтение ответа) возможно только при правильной настройке CORS на целевом сервере. Для современных приложений рекомендуется использовать CORS с явными заголовками или прокси-сервер, если вы не контролируете удалённый домен. Всегда учитывайте требования безопасности, особенно при работе с пользовательскими данными.