Блог

Я пытаюсь добавить IFrame на страницу.

Страница: https://www.homedepot.com/order/view/tracking

Код, который я использую для добавления этого IFrame:

 function createElementFromHTML(htmlString) {
  var div = document.createElement('div');
  div.innerHTML = htmlString.trim();

  // Change this to div.childNodes to support multiple top-level nodes
  return div.firstChild; 
}
element = createElementFromHTML(`<div id='testing-iframe'>
  <iframe src='chrome-extension://zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz/index.html'></iframe>
<div>`)
document.body.appendChild(element)
 

Теперь обратите внимание, что URL-адрес начинается с chrome-extension:// . Другой протокол.

По вышеуказанному homedepot.com страница, когда я просматриваю #testing-iframe , я не вижу IFrame. Это похоже на то, что браузер отклоняет элемент.

На большинстве других веб-сайтов в Интернете, таких как https://example.com/, элемент IFrame отображается при проверке (хотя содержимого нет, так как это фиктивный URL-адрес).

Пожалуйста, посмотрите скриншот:

Видите, на example.com Я действительно получаю IFrame. На homedepot.com Я этого не делаю.

Еще одна вещь, на которую следует обратить внимание, как было сказано ранее, это происходит, когда я использую другой протокол, chrome-extension . Но, когда я использую URL-адрес HTTPS, такой как https://www.texasauto.com/ это ДЕЙСТВИТЕЛЬНО РАБОТАЕТ на обеих страницах.

Пока что относительно проблемы.

Мой вопрос: в чем причина этого?

Я предполагаю, что это какой-то HTTP-заголовок. Сначала я заподозрил Strict-Transport-Security заголовок. Итак, я попытался отключить его с помощью другого расширения, но это не помогло. Затем я попытался отключить больше заголовков, а также добавить Access-Control-Allow-Origin: * заголовок, но это не сработало.

Есть идеи, в чем причина проблемы?

Изменить: Заголовки, возвращаемые homedepot.com:

 access-control-allow-credentials: true
access-control-allow-headers: Authorization, Content-Type
access-control-allow-methods: POST, GET, OPTIONS, DELETE
access-control-allow-origin: http://localhost:8081
access-control-max-age: 0
cache-control: max-age=0, no-cache, no-store
content-encoding: gzip
content-language: he
content-type: text/html;charset=UTF-8
date: Sat, 29 May 2021 22:16:06 GMT
expires: Sat, 29 May 2021 22:16:06 GMT
pragma: no-cache
server-timing: cdn-cache; desc=MISS
server-timing: edge; dur=153
server-timing: origin; dur=75
set-cookie: AKA_A2=A; expires=Sat, 29-May-2021 23:16:06 GMT; path=/; domain=homedepot.com; secure; HttpOnly
strict-transport-security: max-age=86400; includeSubDomains; preload
vary: Accept-Encoding
x-akamai-transformed: 9 153137 0 pmb=mTOE,1mRUM,2
x-application-context: orders-purchases-ui:prod:8080
x-content-type-options: nosniff
x-device-type: desktop
x-frame-options: SAMEORIGIN
x-proto: secure
x-tm-zone: us-east4-a
x-xss-protection: 1; mode=block