Блог

При использовании postMessage важно определить targetOrigin, чтобы гарантировать, что мы не допустим утечки данных на другие сайты.

Не менее важно проверять источник при получении сообщения, чтобы другие сайты не запускали наши скрипты.

Но, если мы просто ожидаем сделать это в нашем собственном домене, есть ли что-то не так с:

 targetWindow.postMessage({message}, window.origin);
  

—

 window.addEventListener("message", e => {
  if (e.origin == window.origin){
    //Trigger something
  }
});
  

Я не эксперт по безопасности, но MDN рекомендует проверять свойства сообщения origin и, возможно source , свойства. Итак, правильно проверить это, и мы можем считать это безопасным.

Теперь возникает вопрос:

Насколько безопасно сверять сообщения origin с окнами origin ?

Прежде всего, учтите, что есть 2 способа проверить origin содержимое окна. Тот, который вы пытаетесь использовать, — WindowOrWorkerGlobalScope.origin альтернативный вариант — window.location.origin.

Я бы не стал использовать WindowOrWorkerGlobalScope.origin , потому что он может быть перезаписан на стороне клиента. Попробуйте:

 window.origin = 'https://www.example.com';
console.log(window.origin === 'https://www.example.com');
  

Я не думаю, что это прямая угроза безопасности (хотя я не эксперт по безопасности, как я уже говорил выше), но при определенных условиях это может упростить выполнение успешной атаки.

window.location.origin может быть лучшим выбором, потому что он доступен только для чтения и не может быть изменен на стороне клиента. В качестве бонуса он имеет более широкую поддержку браузера.

Итак, я бы использовал window.location.origin либо жесткий код URL, как показано в MDN.

Если жесткий URL-адрес кажется проблематичным из-за тестирования, вы можете использовать переменные среды, если в вашем проекте используются современные инструменты построения.