{"id":44394,"date":"2019-04-02T03:01:43","date_gmt":"2019-04-01T17:01:43","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=44394"},"modified":"2019-04-02T05:40:13","modified_gmt":"2019-04-01T19:40:13","slug":"html-iframe-functionality-restrictor-follow-up-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/html-iframe-functionality-restrictor-follow-up-tutorial\/","title":{"rendered":"HTML Iframe Functionality Restrictor Follow Up Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/sandbox_iframe_attribute.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"HTML Iframe Functionality Restrictor Follow Up Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/sandbox_followup.jpg\" title=\"HTML Iframe Functionality Restrictor Follow Up Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">HTML Iframe Functionality Restrictor Follow Up Tutorial<\/p><\/div>\n<p>The recent <a title='HTML Iframe Functionality Restrictor Primer Tutorial' href='#htmlifrpt'>HTML Iframe Functionality Restrictor Primer Tutorial<\/a> &#8220;proof of concept&#8221; asked a lot of the user in terms of imagination, to the extent that it was mainly helpful for people who didn&#8217;t know of the existence of the HTML iframe element had available to it the <a target=_blank title='HTML iframe sandbox attribute information from w3schools' href='https:\/\/www.w3schools.com\/tags\/att_iframe_sandbox.asp'>sandbox<\/a> attribute in the first place.<\/p>\n<p>But what about drilling down on this with those suboptions allowing back in various &#8220;functionality sets&#8221; we&#8217;ll not repeat here, as you can read it at <a title='HTML Iframe Functionality Restrictor Primer Tutorial' href='#htmlifrpt'>HTML Iframe Functionality Restrictor Primer Tutorial<\/a>, because we found the exercise of allowing the user to refine their HTML iframe element sandbox attribute dynamically was quite intriguing, and served the purpose, at least for us, of seeing where things fit, <a target=_blank title='?' href='https:\/\/www.google.com\/search?q=more+than+somewhat+damon+runyon&#038;rlz=1C5CHFA_enAU832AU832&#038;tbm=isch&#038;source=lnms&#038;sa=X&#038;ved=0ahUKEwiM-NXd3-_gAhWPfX0KHeMBC-wQ_AUICigB&#038;biw=1440&#038;bih=752&#038;dpr=2'>more than somewhat<\/a>.<\/p>\n<p>So feel free to try <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/sandbox_iframe_attribute.html-GETME\" title=\"sandbox_iframe_attribute.html\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/sandbox_iframe_attribute.html-GETME\" title=\"sandbox_iframe_attribute.html\">sandbox_iframe_attribute.html<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/sandbox_iframe_attribute.html\">live run<\/a> below, trying out the new dropdown options to see whether it teaches you a thing or two too &#8230;<\/p>\n<p><iframe style=\"width:100%;height:1250px;\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/sandbox_iframe_attribute.html\"><\/iframe><\/p>\n<hr>\n<p id='htmlifrpt'>Previous relevant <a target=_blank title='HTML Iframe Functionality Restrictor Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/html-iframe-functionality-restrictor-primer-tutorial\/'>HTML Iframe Functionality Restrictor Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/sandbox_iframe_attribute.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"HTML Iframe Functionality Restrictor Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/sandbox_iframe_attribute.jpg\" title=\"HTML Iframe Functionality Restrictor Primer Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">HTML Iframe Functionality Restrictor Primer Tutorial<\/p><\/div>\n<p>We really like to involve the HTML iframe element with our thinking.  Perhaps because we like to compartmentalize functionalities.  Keep a whole lot of &#8220;functionality snippets&#8221; on the one domain (like rjmprogramming.com.au) and HTML iframe usage can be quite useful, to our mind <font size=1>(mind you, my <b>gut<\/b> just burped, which is hard to interpret in the circumstances)<\/font>.<\/p>\n<p>You consider the HTML iframe as a part of a webpage, and the difference is that every HTML iframe is like &#8220;starting over&#8221; with a whole new webpage load and dynamically script for, with Javascript, mostly.  This &#8220;letting loose&#8221; of Javascript can be tempered though, as you can see in action with today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/sandbox_iframe_attribute.html\" title=\"Click picture\">live run<\/a> link, that we&#8217;ll also &#8220;iframe&#8221; (the <i>verb<\/i> form) below &#8230;<\/p>\n<p><iframe style=\"width:100%;height:1250px;\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/sandbox_iframe_attribute.html\"><\/iframe><\/p>\n<p> &#8230; which uses the <a target=_blank title='HTML iframe sandbox attribute information from w3schools' href='https:\/\/www.w3schools.com\/tags\/att_iframe_sandbox.asp'>Iframe Sandbox attribute (no value)<\/a> as described below &#8230;<\/p>\n<blockquote cite='https:\/\/www.w3schools.com\/tags\/att_iframe_sandbox.asp'>\n<table border=10>\n<tr>\n<th>Value<\/th>\n<th>Description<\/th>\n<\/tr>\n<tr>\n<td>(no value)<\/td>\n<td>Applies all restrictions<\/td>\n<\/tr>\n<tr>\n<td>allow-forms<\/td>\n<td>Re-enables form submission<\/td>\n<\/tr>\n<tr>\n<td>allow-pointer-lock<\/td>\n<td>Re-enables APIs<\/td>\n<\/tr>\n<tr>\n<td>allow-popups<\/td>\n<td>Re-enables popups<\/td>\n<\/tr>\n<tr>\n<td>allow-same-origin<\/td>\n<td>Allows the iframe content to be treated as being from the same origin<\/td>\n<\/tr>\n<tr>\n<td>allow-scripts<\/td>\n<td>Re-enables scripts<\/td>\n<\/tr>\n<tr>\n<td>allow-top-navigation<\/td>\n<td>Allows the iframe content to navigate its top-level browsing context<\/td>\n<\/tr>\n<\/table>\n<\/blockquote>\n<p>This sandbox attribute, am sure you can see, could be useful both for restricting content functionality, as required, and during the programmer&#8217;s testing phase perhaps.<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d44283' onclick='var dv=document.getElementById(\"d44283\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/iframe\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d44283' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d44394' onclick='var dv=document.getElementById(\"d44394\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/dropdown\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d44394' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>The recent HTML Iframe Functionality Restrictor Primer Tutorial &#8220;proof of concept&#8221; asked a lot of the user in terms of imagination, to the extent that it was mainly helpful for people who didn&#8217;t know of the existence of the HTML &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/html-iframe-functionality-restrictor-follow-up-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,14,37],"tags":[88,112,367,576,587,652,997,2884,2883,1114,1319],"class_list":["post-44394","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-api","tag-attribute","tag-dropdown","tag-html","tag-iframe","tag-javascript","tag-programming","tag-restriction","tag-sandbox","tag-security","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/44394"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=44394"}],"version-history":[{"count":3,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/44394\/revisions"}],"predecessor-version":[{"id":44450,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/44394\/revisions\/44450"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=44394"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=44394"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=44394"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}