{"id":3408,"date":"2022-05-21T01:07:05","date_gmt":"2022-05-20T23:07:05","guid":{"rendered":"https:\/\/vielhuber.de\/?p=3408"},"modified":"2022-05-21T01:12:09","modified_gmt":"2022-05-20T23:12:09","slug":"quick-tip-iframe-modifizieren","status":"publish","type":"post","link":"https:\/\/vielhuber.de\/blog\/quick-tip-iframe-modifizieren\/","title":{"rendered":"Quick Tip: Iframe modifizieren"},"content":{"rendered":"\n<p>Wenn man einen Iframe eines Drittanbieters (zum Beispiel ein Widget) einbindet, kann man weder mit CSS noch mit JavaScript (aufgrund der sog. <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Security\/Same-origin_policy\" target=\"_blank\" rel=\"noreferrer noopener\">Same-origin policy<\/a>) auf dessen Inhalt zugreifen. Es gibt jedoch ein sehr einfaches Verfahren, um trotzdem beliebigen Code (auch in weiteren Dateien, die innerhalb des Iframes nachgeladen werden) zu modifizieren. Dazu leitet man die URL durch einen eigenen PHP-Proxy und modifiziert den Inhalt nach Belieben.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>Einige Anbieter pr\u00fcfen (meist schlecht als recht), ob die aktuelle Origin der externen Domain entspricht und stoppen ansonsten. Aber da wir alle Karten in der Hand haben, k\u00f6nnen wir diese Checks einfach aushebeln. Durch relativ simple Code-Analyse lassen sich damit quasi alle Scripte (selbst stark gesicherte Google Sheets Einbettungen innerhalb von Iframes) modifizieren. Anbei eine simple Version des Proxys (wobei die $receipts-Variable bewusst nur mit harmlosen Beispieldaten gef\u00fcllt ist):<\/p>\n\n\n\n<p class=\"githubgist\" data-gist-file=\"proxy.php\">50e04665c777c53c6cea8a8601f57bbf<\/p>\n\n\n\n<p>Was man nun nur noch tun muss, ist das <strong>src<\/strong>-Attribut des Iframes zu \u00e4ndern und der Spa\u00df kann beginnen:<\/p>\n\n\n\n<p class=\"githubgist\" data-gist-file=\"index.html\">50e04665c777c53c6cea8a8601f57bbf<\/p>\n\n\n\n<p>Wer Rezepte austauschen will, kann sich gerne per PM bei mir melden. Happy hacking!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Wenn man einen Iframe eines Drittanbieters (zum Beispiel ein Widget) einbindet, kann man weder mit CSS noch mit JavaScript (aufgrund der sog. Same-origin policy) auf dessen Inhalt zugreifen. Es gibt jedoch ein sehr einfaches Verfahren, um trotzdem beliebigen Code (auch in weiteren Dateien, die innerhalb des Iframes nachgeladen werden) zu modifizieren. Dazu leitet man die [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"gtbabel_prevent_lngs":"","gtbabel_alt_lng":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-3408","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-blog"},"acf":[],"yoast_head":"<title>Quick Tip: Iframe modifizieren &#060; Vielhuber David<\/title>\n<meta name=\"description\" content=\"Wenn man einen Iframe eines Drittanbieters (zum Beispiel ein Widget) einbindet, kann man weder mit CSS noch mit JavaScript (aufgrund der sog. Same-ori...\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/vielhuber.de\/blog\/quick-tip-iframe-modifizieren\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Quick Tip: Iframe modifizieren &#060; Vielhuber David\" \/>\n<meta property=\"og:description\" content=\"Wenn man einen Iframe eines Drittanbieters (zum Beispiel ein Widget) einbindet, kann man weder mit CSS noch mit JavaScript (aufgrund der sog. Same-origin\" \/>\n<meta property=\"og:url\" content=\"https:\/\/vielhuber.de\/blog\/quick-tip-iframe-modifizieren\/\" \/>\n<meta property=\"og:site_name\" content=\"Vielhuber David\" \/>\n<meta property=\"article:published_time\" content=\"2022-05-20T23:07:05+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-05-20T23:12:09+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/vielhuber.de\/wp-content\/uploads\/about.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"700\" \/>\n\t<meta property=\"og:image:height\" content=\"552\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"David\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@vielhuber\" \/>\n<meta name=\"twitter:site\" content=\"@vielhuber\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"David\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"1\u00a0Minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/quick-tip-iframe-modifizieren\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/quick-tip-iframe-modifizieren\\\/\"},\"author\":{\"name\":\"David\",\"@id\":\"https:\\\/\\\/vielhuber.de\\\/#\\\/schema\\\/person\\\/64d4ff14713d413ea4d9b210d0c2c6ef\"},\"headline\":\"Quick Tip: Iframe modifizieren\",\"datePublished\":\"2022-05-20T23:07:05+00:00\",\"dateModified\":\"2022-05-20T23:12:09+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/quick-tip-iframe-modifizieren\\\/\"},\"wordCount\":191,\"publisher\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/#\\\/schema\\\/person\\\/64d4ff14713d413ea4d9b210d0c2c6ef\"},\"articleSection\":[\"Blog\"],\"inLanguage\":\"de\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/quick-tip-iframe-modifizieren\\\/\",\"url\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/quick-tip-iframe-modifizieren\\\/\",\"name\":\"Quick Tip: Iframe modifizieren &#060; Vielhuber David\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/#website\"},\"datePublished\":\"2022-05-20T23:07:05+00:00\",\"dateModified\":\"2022-05-20T23:12:09+00:00\",\"description\":\"Wenn man einen Iframe eines Drittanbieters (zum Beispiel ein Widget) einbindet, kann man weder mit CSS noch mit JavaScript (aufgrund der sog. Same-origin\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/quick-tip-iframe-modifizieren\\\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/vielhuber.de\\\/blog\\\/quick-tip-iframe-modifizieren\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/quick-tip-iframe-modifizieren\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/vielhuber.de\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Quick Tip: Iframe modifizieren\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/vielhuber.de\\\/#website\",\"url\":\"https:\\\/\\\/vielhuber.de\\\/\",\"name\":\"Vielhuber David\",\"description\":\"Full-Stack Developer\",\"publisher\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/#\\\/schema\\\/person\\\/64d4ff14713d413ea4d9b210d0c2c6ef\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/vielhuber.de\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/vielhuber.de\\\/#\\\/schema\\\/person\\\/64d4ff14713d413ea4d9b210d0c2c6ef\",\"name\":\"David\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/vielhuber.de\\\/wp-content\\\/uploads\\\/about.jpg\",\"url\":\"https:\\\/\\\/vielhuber.de\\\/wp-content\\\/uploads\\\/about.jpg\",\"contentUrl\":\"https:\\\/\\\/vielhuber.de\\\/wp-content\\\/uploads\\\/about.jpg\",\"width\":700,\"height\":552,\"caption\":\"David\"},\"logo\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/wp-content\\\/uploads\\\/about.jpg\"},\"sameAs\":[\"https:\\\/\\\/x.com\\\/vielhuber\"]}]}<\/script>","yoast_head_json":{"title":"Quick Tip: Iframe modifizieren &#060; Vielhuber David","description":"Wenn man einen Iframe eines Drittanbieters (zum Beispiel ein Widget) einbindet, kann man weder mit CSS noch mit JavaScript (aufgrund der sog. Same-ori...","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/vielhuber.de\/blog\/quick-tip-iframe-modifizieren\/","og_locale":"de_DE","og_type":"article","og_title":"Quick Tip: Iframe modifizieren &#060; Vielhuber David","og_description":"Wenn man einen Iframe eines Drittanbieters (zum Beispiel ein Widget) einbindet, kann man weder mit CSS noch mit JavaScript (aufgrund der sog. Same-origin","og_url":"https:\/\/vielhuber.de\/blog\/quick-tip-iframe-modifizieren\/","og_site_name":"Vielhuber David","article_published_time":"2022-05-20T23:07:05+00:00","article_modified_time":"2022-05-20T23:12:09+00:00","og_image":[{"width":700,"height":552,"url":"https:\/\/vielhuber.de\/wp-content\/uploads\/about.jpg","type":"image\/jpeg"}],"author":"David","twitter_card":"summary_large_image","twitter_creator":"@vielhuber","twitter_site":"@vielhuber","twitter_misc":{"Verfasst von":"David","Gesch\u00e4tzte Lesezeit":"1\u00a0Minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/vielhuber.de\/blog\/quick-tip-iframe-modifizieren\/#article","isPartOf":{"@id":"https:\/\/vielhuber.de\/blog\/quick-tip-iframe-modifizieren\/"},"author":{"name":"David","@id":"https:\/\/vielhuber.de\/#\/schema\/person\/64d4ff14713d413ea4d9b210d0c2c6ef"},"headline":"Quick Tip: Iframe modifizieren","datePublished":"2022-05-20T23:07:05+00:00","dateModified":"2022-05-20T23:12:09+00:00","mainEntityOfPage":{"@id":"https:\/\/vielhuber.de\/blog\/quick-tip-iframe-modifizieren\/"},"wordCount":191,"publisher":{"@id":"https:\/\/vielhuber.de\/#\/schema\/person\/64d4ff14713d413ea4d9b210d0c2c6ef"},"articleSection":["Blog"],"inLanguage":"de"},{"@type":"WebPage","@id":"https:\/\/vielhuber.de\/blog\/quick-tip-iframe-modifizieren\/","url":"https:\/\/vielhuber.de\/blog\/quick-tip-iframe-modifizieren\/","name":"Quick Tip: Iframe modifizieren &#060; Vielhuber David","isPartOf":{"@id":"https:\/\/vielhuber.de\/#website"},"datePublished":"2022-05-20T23:07:05+00:00","dateModified":"2022-05-20T23:12:09+00:00","description":"Wenn man einen Iframe eines Drittanbieters (zum Beispiel ein Widget) einbindet, kann man weder mit CSS noch mit JavaScript (aufgrund der sog. Same-origin","breadcrumb":{"@id":"https:\/\/vielhuber.de\/blog\/quick-tip-iframe-modifizieren\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/vielhuber.de\/blog\/quick-tip-iframe-modifizieren\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/vielhuber.de\/blog\/quick-tip-iframe-modifizieren\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/vielhuber.de\/"},{"@type":"ListItem","position":2,"name":"Quick Tip: Iframe modifizieren"}]},{"@type":"WebSite","@id":"https:\/\/vielhuber.de\/#website","url":"https:\/\/vielhuber.de\/","name":"Vielhuber David","description":"Full-Stack Developer","publisher":{"@id":"https:\/\/vielhuber.de\/#\/schema\/person\/64d4ff14713d413ea4d9b210d0c2c6ef"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/vielhuber.de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":["Person","Organization"],"@id":"https:\/\/vielhuber.de\/#\/schema\/person\/64d4ff14713d413ea4d9b210d0c2c6ef","name":"David","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/vielhuber.de\/wp-content\/uploads\/about.jpg","url":"https:\/\/vielhuber.de\/wp-content\/uploads\/about.jpg","contentUrl":"https:\/\/vielhuber.de\/wp-content\/uploads\/about.jpg","width":700,"height":552,"caption":"David"},"logo":{"@id":"https:\/\/vielhuber.de\/wp-content\/uploads\/about.jpg"},"sameAs":["https:\/\/x.com\/vielhuber"]}]}},"_links":{"self":[{"href":"https:\/\/vielhuber.de\/nl\/wp-json\/wp\/v2\/posts\/3408","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vielhuber.de\/nl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/vielhuber.de\/nl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/vielhuber.de\/nl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vielhuber.de\/nl\/wp-json\/wp\/v2\/comments?post=3408"}],"version-history":[{"count":7,"href":"https:\/\/vielhuber.de\/nl\/wp-json\/wp\/v2\/posts\/3408\/revisions"}],"predecessor-version":[{"id":3415,"href":"https:\/\/vielhuber.de\/nl\/wp-json\/wp\/v2\/posts\/3408\/revisions\/3415"}],"wp:attachment":[{"href":"https:\/\/vielhuber.de\/nl\/wp-json\/wp\/v2\/media?parent=3408"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/vielhuber.de\/nl\/wp-json\/wp\/v2\/categories?post=3408"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/vielhuber.de\/nl\/wp-json\/wp\/v2\/tags?post=3408"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}