{"id":113,"date":"2016-07-27T14:47:49","date_gmt":"2016-07-27T14:47:49","guid":{"rendered":"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/?p=113"},"modified":"2017-05-17T20:04:16","modified_gmt":"2017-05-17T20:04:16","slug":"google-chrome-uncaught-security-error","status":"publish","type":"post","link":"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/google-chrome-uncaught-security-error\/","title":{"rendered":"Google Chrome &#8211; Uncaught Security Error: Failed to read the &#8216;contentDocument&#8217; property from &#8216;HTMLIFrameElement&#8217;"},"content":{"rendered":"<h2>Google Chrome &#8211; Uncaught Security Error: Failed to read the &#8216;contentDocument&#8217; property from &#8216;HTMLIFrameElement&#8217;<\/h2>\r\n<p>When trying to access an iframe element&#8217;s window and document properties from a parent page in Google Chrome, you may get the following Uncaught Security Error in the Developer Tools Console:<\/p>\r\n<img loading=\"lazy\" src=\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-content\/uploads\/2016\/07\/iframe-error.png\" alt=\"Uncaught SecurityError when accessing iframe element\" width=\"1460\" height=\"23\" class=\"alignnone size-full wp-image-114\" srcset=\"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-content\/uploads\/2016\/07\/iframe-error.png 1460w, https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-content\/uploads\/2016\/07\/iframe-error-300x5.png 300w, https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-content\/uploads\/2016\/07\/iframe-error-768x12.png 768w, https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-content\/uploads\/2016\/07\/iframe-error-1024x16.png 1024w, https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-content\/uploads\/2016\/07\/iframe-error-650x10.png 650w\" sizes=\"(max-width: 1460px) 100vw, 1460px\" \/>\r\n<p>This happens because all of the modern browsers, except Chrome support both the <span class=\"white_space_pre\">iframereference.contentWindow<\/span> and <span class=\"white_space_pre\">iframereference.contentDocument<\/span> properities, only if the iframe is on the same domain as the parent page containing the frame. To include Chrome use the following JavaScript code:<\/p>\r\n<h4>JAVASCRIPT<\/h4>\r\n<pre>\r\n<div class=\"code\">\r\nvar content = iframe1.contentDocument || iframe1.contentWindow.document;\r\nvar elementID = content.getElementById('elementInsideIFrame');\r\n<\/div>\r\n<\/pre>\r\n<p>If you open the parent document file locally in Chrome without using a web server, the code above will not work. This is a great piece of code to use when you want toggle a window or iframe to expand such as in an animated banner.<\/p>","protected":false},"excerpt":{"rendered":"Google Chrome &#8211; Uncaught Security Error: Failed to read the &#8216;contentDocument&#8217; property from &#8216;HTMLIFrameElement&#8217; When trying to access an iframe element&#8217;s window and document properties from a parent page in Google Chrome, you may get the following Uncaught Security Error in the Developer Tools Console: This happens because all of the modern browsers, except Chrome [&hellip;]","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false},"categories":[9,17],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v16.1.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Google Chrome - Uncaught Security Error: Failed to read the &#039;contentDocument&#039; property from &#039;HTMLIFrameElement&#039;<\/title>\n<meta name=\"description\" content=\"Learn how to fix the Google Chrome Uncaught Security Error: Failed to read the &#039;contentDocument&#039; property from &#039;HTMLIFrameElement&#039;.\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Google Chrome - Uncaught Security Error: Failed to read the &#039;contentDocument&#039; property from &#039;HTMLIFrameElement&#039;\" \/>\n<meta property=\"og:description\" content=\"Learn how to fix the Google Chrome Uncaught Security Error: Failed to read the &#039;contentDocument&#039; property from &#039;HTMLIFrameElement&#039;.\" \/>\n<meta property=\"og:url\" content=\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/google-chrome-uncaught-security-error\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Development Reference\" \/>\n<meta property=\"article:published_time\" content=\"2016-07-27T14:47:49+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-05-17T20:04:16+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-content\/uploads\/2016\/07\/iframe-error.png\" \/>\n<meta name=\"twitter:card\" content=\"summary\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\">\n\t<meta name=\"twitter:data1\" content=\"1 minute\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/#website\",\"url\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/\",\"name\":\"Web Development Reference\",\"description\":\"Web Development Solutions Explained -- Easy\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/google-chrome-uncaught-security-error\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-content\/uploads\/2016\/07\/iframe-error.png\",\"contentUrl\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-content\/uploads\/2016\/07\/iframe-error.png\"},{\"@type\":\"WebPage\",\"@id\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/google-chrome-uncaught-security-error\/#webpage\",\"url\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/google-chrome-uncaught-security-error\/\",\"name\":\"Google Chrome - Uncaught Security Error: Failed to read the 'contentDocument' property from 'HTMLIFrameElement'\",\"isPartOf\":{\"@id\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/#website\"},\"primaryImageOfPage\":{\"@id\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/google-chrome-uncaught-security-error\/#primaryimage\"},\"datePublished\":\"2016-07-27T14:47:49+00:00\",\"dateModified\":\"2017-05-17T20:04:16+00:00\",\"author\":{\"@id\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/#\/schema\/person\/9624bee17e4fbdcaad7eb7569f5faa70\"},\"description\":\"Learn how to fix the Google Chrome Uncaught Security Error: Failed to read the 'contentDocument' property from 'HTMLIFrameElement'.\",\"breadcrumb\":{\"@id\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/google-chrome-uncaught-security-error\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/google-chrome-uncaught-security-error\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/google-chrome-uncaught-security-error\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"item\":{\"@type\":\"WebPage\",\"@id\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/\",\"url\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"position\":2,\"item\":{\"@type\":\"WebPage\",\"@id\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/google-chrome-uncaught-security-error\/\",\"url\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/google-chrome-uncaught-security-error\/\",\"name\":\"Google Chrome &#8211; Uncaught Security Error: Failed to read the &#8216;contentDocument&#8217; property from &#8216;HTMLIFrameElement&#8217;\"}}]},{\"@type\":\"Person\",\"@id\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/#\/schema\/person\/9624bee17e4fbdcaad7eb7569f5faa70\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"http:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/c0c4e0ed219e3aaa419ce72b52646d59?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/c0c4e0ed219e3aaa419ce72b52646d59?s=96&d=mm&r=g\",\"caption\":\"admin\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","jetpack_featured_media_url":"","jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p7o7aF-1P","_links":{"self":[{"href":"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-json\/wp\/v2\/posts\/113"}],"collection":[{"href":"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-json\/wp\/v2\/comments?post=113"}],"version-history":[{"count":7,"href":"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-json\/wp\/v2\/posts\/113\/revisions"}],"predecessor-version":[{"id":271,"href":"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-json\/wp\/v2\/posts\/113\/revisions\/271"}],"wp:attachment":[{"href":"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-json\/wp\/v2\/media?parent=113"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-json\/wp\/v2\/categories?post=113"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dev.pixelprofessionals.com\/webdevelopmentreference\/wp-json\/wp\/v2\/tags?post=113"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}