Альтернатива для отправки данных в другое место или в localStorage: PostMessage

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

Что такое PostMessage?

Это способ отправки информации из одного места в другое, более безопасный и более «родной»; Например: из окна во всплывающее окно или в iframe или просто в другое окно.

Таким образом, мы можем разумно обойти политику одного и того же происхождения 🤓.

Как это использовать?

📨 Для отправки:

const popup = window.open(/* popup details */);

// When the popup has fully loaded, if not blocked by a popup blocker:

// This does nothing, assuming the window hasn't changed its location.
popup.postMessage(
  message,
  target,
);

//this example comes from developer.mozilla

Это способ применить к вашему проекту, как вы можете видеть, метод postMessage имеет два параметра для отправки нам, сообщение — это данные, а цель — это место, куда оно прибыло.

Примечание: сообщение должно быть строковым параметром.

📪 Чтобы получить:

window.addEventListener(
  "message",
  (event) => {
    // Do we trust the sender of this message?  (might be
    // different from what we originally opened, for example).
    if (event.origin !== "http://example.com") return;

    // event.source is popup
    // event.data is "hi there yourself!  the secret response is: rheeeeet!"
  }
);

//this example comes from developer.mozilla

И вот, мы получили информацию, но… что значит этот параметр?:

• «сообщение»: это имя или признак, в котором мы ссылались на событие, отправленное недавно в другом окне (событие postMessage).
• событие: приносит такие вещи, как источник и данные.

⚠️ Важно знать: как только вы сможете это сделать, важно подтвердить происхождение информации/данных, которые мы получим. И старайтесь избегать использования «*». Вредоносный сайт может изменить расположение окна без вашего ведома, а значит, может перехватить данные, отправляемые с помощью postMessage.

Резюме:

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

Спасибо, что читаете мне, кодеры и… Удачного кодирования! 🤘🏻