iframe

why

  1. Ρ€Π΅ΠΊΠ»Π°ΠΌΠ°

  2. Π°Π½Π°Π»ΠΈΡ‚ΠΈΠΊΠ°

  3. Π²ΠΈΠ΄Π΅ΠΎ с ΡŽΡ‚ΡƒΠ±Π°

  4. ΠΈΠ³Ρ€Ρ‹

iframe basic usage

ΠŸΡ€ΠΈΠΌΠ΅Ρ€ Π½ΠΈΠΆΠ΅ ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Π΅Ρ‚ Π² iframe страницу прилоТСния ΠΈ ΠΆΠ΄Π΅Ρ‚ Π²Ρ‹Π·ΠΎΠ²Π° postMessage с Π½Π΅Π΅

<script>
  window.addEventListener('message', function(e) {
    fetch("/" + encodeURIComponent(e.data.data))
  }, false)
</script>
<iframe src="https://example.com"></iframe>

ΠžΠ±Ρ‰Π΅Π½ΠΈΠ΅ происходит ΠΏΠΎ postMessage

Π ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒ отправляСт: $(iframe).postMessage

Π”ΠΎΡ‡Π΅Ρ€Π½ΠΈΠΉ iframe отправляСт: window.parent.postMessage

iframe security

Атрибуты Ρƒ iframe связанныС с Π˜Π‘

  • allow β€” ΠΊΠ°ΠΊΠΈΠ΅ API (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Payments API) доступны сайту, ΠΏΠΎΠ΄Π³Ρ€ΡƒΠΆΠ΅Π½Π½ΠΎΠΌΡƒ Π² iframe

  • referrerpolicy β€” Π²ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒ Π»ΠΈ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ Referrer, ΠΈ Ρ‡Ρ‚ΠΎ Ρ‚ΡƒΠ΄Π° Π²ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒ

  • sandbox β€” Ρ‡Ρ‚ΠΎ ΠΌΠΎΠΆΠ΅Ρ‚ Π΄Π΅Π»Π°Ρ‚ΡŒ отрисованная Ρ„ΠΎΡ€ΠΌΠ° (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΌΠΎΠΆΠ΅Ρ‚ Π»ΠΈ js ΠΈΡΠΏΠΎΠ»Π½ΡΡ‚ΡŒ)

Π•Ρ‰Π΅ ΠΏΠ°Ρ€Ρƒ слов ΠΏΡ€ΠΎ Π±Π΅Π·ΠΎΠΏΠ°ΡΠ½ΠΎΡΡ‚ΡŒ. Π‘Ρ‚ΠΎΠΈΡ‚ ΡƒΠΏΠΎΠΌΡΠ½ΡƒΡ‚ΡŒ HTTP Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΎΠΊ X-Frame-Options, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠ΅Ρ€Π΅Ρ‡ΠΈΡΠ»ΠΈΡ‚ΡŒ адрСса сайтов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠ³ΡƒΡ‚ Π·Π°Π³Ρ€ΡƒΠΆΠ°Ρ‚ΡŒ Π²Π°ΡˆΡƒ страницу Π² iframe:

X-Frame-Options: deny, sameorigin, allow-from %URI%.

Π›ΠΈΠ±ΠΎ Π΅Π³ΠΎ Π°Π½Π°Π»ΠΎΠ³ Π² ΠΏΠΎΠ»ΠΈΡ‚ΠΈΠΊΠ΅ CSP:

Content-Security-Policy: frame-ancestors source;
Content-Security-Policy: frame-ancestors source source;

ΠŸΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅ ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΡ‚ΡŒΡΡ здСсь: habr.com/ru/post/317720

Last updated