iframe
why
ΡΠ΅ΠΊΠ»Π°ΠΌΠ°
Π°Π½Π°Π»ΠΈΡΠΈΠΊΠ°
Π²ΠΈΠ΄Π΅ΠΎ Ρ ΡΡΡΠ±Π°
ΠΈΠ³ΡΡ
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