Будет ли браузер получать новые ресурсы, когда вы меняете DOM с помощью JavaScript?

Question

У меня есть следующее в теле HTML страницы:

   <aside id="ADVERT">
      <img src='https://www.blackstone.com/images/default-source/assets/logos/blackstone-logo.png'>
   </aside>

Позже на странице есть кнопка, которая при нажатии переключает изображение с другой. Вот код кнопки:

   <button onclick="switchadvert();">Switch Logo</button>

Эта функция переключения Javascript сама по себе проста, всего одна строка, используя свойство innerHTML:

   function switchadvert()
   { document.getElementById("ADVERT").innerHTML = "<img src='http://www.redstone.com/gfx/logo.png'>";
   }

Кажется, все это работает. Когда я нажимаю кнопку, логотип меняется с логотипа Blackstone Group на логотип Redstone.

У меня вопрос, как это работает и почему это работает?

КАК: По-видимому, как только я обновлю DOM с помощью этого нового innerHTML, браузер поймет, что эта часть страницы требует ресурса, которого у него нет (логотип redstone), и отправляется и получает его? Еще долго после загрузки страницы?

ПОЧЕМУ: Я подумал, что даже если у меня возникнут проблемы с вызовом AJAX объекта XMLHttpRequest, мне не позволят получить ресурсы с другого сайта после загрузки страницы. Но здесь он делает это без каких-либо звонков! Разве это не открывает дверь для злоупотреблений межсайтовым скриптингом?

Answer 1

Что касается вопроса <img> и того, как браузер узнает, что он должен извлекать новые ресурсы, это просто , что делает HTMLImageElement , когда установлено его свойство src.
Не имеет значения, когда это происходит, и элемент даже не нужно добавлять в документ; когда вы устанавливаете этот src, включается его алгоритм выборки.

Для вопроса о происхождении этот вопрос также не имеет отношения к тому, когда был сделан запрос. Но чтобы прояснить другое заблуждение, здесь существуют междоменные ограничения, чтобы скрипты не могли получить доступ к междоменным данным, но вы все равно можете очень хорошо отображать междоменные данные на своей странице. И здесь, поскольку вы не установили атрибут cross-origin вашего <img>, вы не сможете получить доступ к содержимому этого изображения.

Answer 2

TL; DR:

В современных браузерах XSS нельзя загружать, загружая изображение

Когда дело доходит до извлечения данных, в игру вступает правило CORS .

CORS допускает только определенные методы с несколькими разрешенными заголовками без дополнительной настройки на стороне сервера.

Когда дело доходит до изображений, браузер извлекает (GET) URL-адрес, который он разрешает CORS, а затем определяет его тип контента, просматривая заголовок Content-Type или некоторые другие процессы.

Предполагая, что XSS не влияет на источник, и если это действительное изображение, оно отобразит его, а если не выдаст ошибку, то браузер никогда не выполнит никакой JavaScript внутри браузера, поэтому угрозы XSS нет. Вы можете проверить это, установив в качестве источника изображения файл javascript.