{"id":27616,"date":"2022-02-01T00:46:52","date_gmt":"2022-01-31T23:46:52","guid":{"rendered":"https:\/\/www.adsafe.org\/?p=27616"},"modified":"2022-02-01T00:46:52","modified_gmt":"2022-01-31T23:46:52","slug":"adsafe-widget-structure","status":"publish","type":"post","link":"https:\/\/www.projectliberty.org\/de\/widget.html","title":{"rendered":"ADsafe Widget Structure"},"content":{"rendered":"
\n

ADsafe<\/b> defines a safe subset of the JavaScript Programming Language,
\nand an interface that allows programs written in that language to usefully
\ninteract with a specific subtree of of the HTML document. A programmed
\nHTML fragment is called a widget<\/i>.<\/p>\n

A widget is a fragment of HTML with some script. That script is able
\nto manipulate the HTML fragment, but is unable to manipulate any other
\npart of the document. All <input><\/code> tags must contain
\nan autocomplete=\"off\"<\/code> attribute.<\/p>\n

This is the simplest widget pattern allowed by ADsafe<\/b>:<\/p>\n

\n
<div id=\"WIDGETNAME_<\/var>\">\n   html markup required by the widget<\/i>\n<script>\nADSAFE.go(\"WIDGETNAME_<\/var>\", function (dom) {\n    \"use strict\";\n\n\/\/ This is where the code for the widget is placed. It can access\n\/\/ the document through the dom parameter, allowing it indirect\n\/\/ access to html elements, allowing it to change content, styling,\n\/\/ and behavior.\n\n});\n<\/script>\n<\/div><\/pre>\n<\/div>\n
It uses the JSLint<\/a> option {adsafe: true, fragment: true}<\/code>.
\nThe widget must be wrapped in a <div><\/code> element. The
\n<div><\/code> element must have an id<\/code>. The id<\/code>
\nmust contain only upper case ASCII letters with a trailing _<\/code>
\ncharacter. It is the page builder\u2019s responsibility to assure that the
\nid<\/code> of the <div><\/code> is unique to the page.<\/p>\n
The other elements may have id<\/code>s Those id<\/code>s
\nmust be in all uppercase and have a prefix that matches the widget id<\/code>
\n. For example,<\/p>\n
\n
<div id=\"KODA_\">\n<p id=\"KODA_BOSANDA\"><\/pre>\n<\/div>\n
The ADSAFE.go<\/code> method gives the script access to a
\ndom<\/var> object that provides a limited interface to the widget\u2019s
\nDOM tree.<\/p>\n
Another ADsafe<\/b> pattern allows the widget to load approved
\nJavaScript libraries. All of the script tags in a <div><\/code>
\nmust be at the top level of the <div><\/code>.<\/p>\n
\n
<div id=\"WIDGETNAME_<\/var>\">\n    html markup required by the widget<\/i>\n<script>\nADSAFE.id(\"WIDGETNAME_<\/var>\");\n<\/script>\n<script src=\"ADsafe<\/b> approved url<\/var>\"><\/script>\n<script>\nADSAFE.go(\"WIDGETNAME_<\/var>\", function (dom, lib) {\n    \"use strict\";\n\n\/\/ This is where the code for the widget is placed. It can access\n\/\/ the document through the dom parameter, allowing it indirect\n\/\/ access to html elements, allowing it to change content, styling,\n\/\/ and behavior.\n\n\/\/ Each library file can give itself a name<\/var>. This script can access\n\/\/ the library file as lib.name<\/var>.\n\n});\n<\/script>\n<\/div><\/pre>\n<\/div>\n
The services provided through ADSAFE<\/code> methods can include
\ncommunication with the network and manipulation of the DOM. The ADSAFE<\/code>
\nmethods are provided by the page to give the widgets restricted access
\nto essential services. It is not safe to give a widget direct access
\nto any DOM node because access to any DOM node gives access to the document<\/code>
\nobject, which gives unrestricted access to the entire tree and to the
\nnetwork. It is safe to give a widget indirect access to the DOM through
\nmethods that assure that no capability leakage occurs.<\/p>\n
In order for a widget to be approved by ADsafe<\/b>, it may not
\nmake use of any global variables except the ADSAFE<\/code>
\nobject (or other global variables that a site may designate). It
\nmay not define any global variables, and it may not contain any
\ncode that could give the guest code access to the window<\/code>
\nobject or document<\/code> object.<\/p>\n
All ADsafe<\/b> approved library files must conform to this pattern:<\/p>\n
\n
ADSAFE.lib(\"name<\/var>\", function (lib) {\n    \"use strict\";\n\n\/\/ This is where the code for the library module is placed. It cannot\n\/\/ access the document unless the guest code passes the dom parameter\n\/\/ to its methods. The optional lib parameter gives it access to the\n\/\/ currently loaded libraries.\n\n    return {\n\n\/\/ Return an object containing the library module's privileged methods.\n\/\/ The script can get access to this object at lib.name<\/var>.\n\n    };\n});\n<\/pre>\n<\/div>\n
It uses the JSLint<\/a> option {adsafe: true, fragment: false}<\/code>.
\nA library file contains a call to ADSAFE.lib<\/code>, which allows
\nthe file to identify itself and to pass an object to the guest code.<\/p>\n
ADSAFE.lib<\/code> can only be called at the top of a script
\nfile. It cannot be called from any other location. Calls to ADSAFE.lib<\/code>
\nmust occur after the call to ADSAFE.id<\/code>, but before
\nthe call to ADSAFE.go<\/code>.<\/p>\n
ADSAFE.id<\/code> can only be called at the top of the widget\u2019s
\nfirst script. It cannot be called from any other location.<\/p>\n
ADSAFE.go<\/code> can only be called from an inline script.
\nIt cannot be called from a file. It can only be called once. It
\nmust be called from the last script block in the fragment.<\/p>\n
The id<\/code> of the widget\u2019s containing <div><\/code>
\nmust exactly match the id<\/var> passed to the ADSAFE.id<\/code>
\nand ADSAFE.go<\/code> methods.<\/p>\n
The ADsafe<\/b> verifier is able to statically enforce all of these
\nrestrictions.<\/p>\n
If the page wants to modify the dom<\/var> and lib<\/var> objects
\nand the bunch prototype<\/var> object that are given to the widget,
\nit pass a function to the ADSAFE._intercept<\/code> method. The function will be
\ncalled before the function that is supplied with ADSAFE.go<\/code>.
\nThis can be used to add or remove or modify the methods that are provided
\nto the widget.<\/p>\n
\n
ADSAFE._intercept(function (id, dom, lib, bunch) {\n    \"use strict\";\n\n\/\/ Do not allow widgets to set position to absolute.\n\/\/ This is to prevent phishing and other annoyances.\n\n    var style = bunch.prototype.style;\n\n    bunch.prototype.style = function (name, value) {\n        if (name.toLowerCase() === 'position' &&\n                value.toLowerCase() === 'absolute') {\n            throw {\n                name: 'error',\n                message: 'position:absolute is not allowed'\n            }\n        }\n        return style.apply(this, arguments);\n    };\n});<\/pre>\n<\/div>\n
A page could allow inter-widget communication by providing communication
\nmethods to the lib<\/var> object. A page could allow a method
\nto change the src<\/code> of a node.<\/p>\n
The file adsafe.js<\/code><\/a> contains the
\nruntime component that provides the ADSAFE<\/code> object, and should be loaded before all interceptors and widgets. The
\nfile template.html<\/a> contains the template
\nfor a widget. The file template.js<\/a> contains
\nthe template for a JavaScript library file.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
ADsafe defines a safe subset of the JavaScript Programming Language, and an interface that allows programs written in that language to usefully interact with a specific subtree of of the HTML document. A programmed HTML fragment is called a widget. A widget is a fragment of HTML with some script. That script is able to […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[47],"tags":[],"class_list":{"0":"post-27616","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-allgemein"},"yoast_head":"\nADsafe Widget Structure - The Website of Informations<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.projectliberty.org\/de\/widget.html\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"ADsafe Widget Structure - The Website of Informations\" \/>\n<meta property=\"og:description\" content=\"ADsafe defines a safe subset of the JavaScript Programming Language, and an interface that allows programs written in that language to usefully interact with a specific subtree of of the HTML document. A programmed HTML fragment is called a widget. A widget is a fragment of HTML with some script. That script is able to […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.projectliberty.org\/de\/widget.html\" \/>\n<meta property=\"og:site_name\" content=\"The Website of Informations\" \/>\n<meta property=\"article:published_time\" content=\"2022-01-31T23:46:52+00:00\" \/>\n<meta name=\"author\" content=\"Anthony William\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Anthony William\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"5\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.projectliberty.org\/de\/widget.html\",\"url\":\"https:\/\/www.projectliberty.org\/de\/widget.html\",\"name\":\"ADsafe Widget Structure - The Website of Informations\",\"isPartOf\":{\"@id\":\"https:\/\/www.projectliberty.org\/#website\"},\"datePublished\":\"2022-01-31T23:46:52+00:00\",\"author\":{\"@id\":\"https:\/\/www.projectliberty.org\/#\/schema\/person\/26d70862eb5cf88d95e0524f4813b365\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.projectliberty.org\/de\/widget.html#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.projectliberty.org\/de\/widget.html\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.projectliberty.org\/de\/widget.html#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.projectliberty.org\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"ADsafe Widget Structure\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.projectliberty.org\/#website\",\"url\":\"https:\/\/www.projectliberty.org\/\",\"name\":\"The Website of Informations\",\"description\":\"Just another WordPress site\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.projectliberty.org\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.projectliberty.org\/#\/schema\/person\/26d70862eb5cf88d95e0524f4813b365\",\"name\":\"Anthony William\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/www.projectliberty.org\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e66b6bd62abc29635862a92fb64ae1fd3bf3ba48f22ad069b9e9d4af94faf44e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e66b6bd62abc29635862a92fb64ae1fd3bf3ba48f22ad069b9e9d4af94faf44e?s=96&d=mm&r=g\",\"caption\":\"Anthony William\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"ADsafe Widget Structure - The Website of Informations","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:\/\/www.projectliberty.org\/de\/widget.html","og_locale":"de_DE","og_type":"article","og_title":"ADsafe Widget Structure - The Website of Informations","og_description":"ADsafe defines a safe subset of the JavaScript Programming Language, and an interface that allows programs written in that language to usefully interact with a specific subtree of of the HTML document. A programmed HTML fragment is called a widget. A widget is a fragment of HTML with some script. That script is able to […]","og_url":"https:\/\/www.projectliberty.org\/de\/widget.html","og_site_name":"The Website of Informations","article_published_time":"2022-01-31T23:46:52+00:00","author":"Anthony William","twitter_card":"summary_large_image","twitter_misc":{"Verfasst von":"Anthony William","Gesch\u00e4tzte Lesezeit":"5\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.projectliberty.org\/de\/widget.html","url":"https:\/\/www.projectliberty.org\/de\/widget.html","name":"ADsafe Widget Structure - The Website of Informations","isPartOf":{"@id":"https:\/\/www.projectliberty.org\/#website"},"datePublished":"2022-01-31T23:46:52+00:00","author":{"@id":"https:\/\/www.projectliberty.org\/#\/schema\/person\/26d70862eb5cf88d95e0524f4813b365"},"breadcrumb":{"@id":"https:\/\/www.projectliberty.org\/de\/widget.html#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.projectliberty.org\/de\/widget.html"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.projectliberty.org\/de\/widget.html#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.projectliberty.org\/"},{"@type":"ListItem","position":2,"name":"ADsafe Widget Structure"}]},{"@type":"WebSite","@id":"https:\/\/www.projectliberty.org\/#website","url":"https:\/\/www.projectliberty.org\/","name":"The Website of Informations","description":"Just another WordPress site","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.projectliberty.org\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Person","@id":"https:\/\/www.projectliberty.org\/#\/schema\/person\/26d70862eb5cf88d95e0524f4813b365","name":"Anthony William","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.projectliberty.org\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e66b6bd62abc29635862a92fb64ae1fd3bf3ba48f22ad069b9e9d4af94faf44e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e66b6bd62abc29635862a92fb64ae1fd3bf3ba48f22ad069b9e9d4af94faf44e?s=96&d=mm&r=g","caption":"Anthony William"}}]}},"_links":{"self":[{"href":"https:\/\/www.projectliberty.org\/de\/wp-json\/wp\/v2\/posts\/27616","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.projectliberty.org\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.projectliberty.org\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.projectliberty.org\/de\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.projectliberty.org\/de\/wp-json\/wp\/v2\/comments?post=27616"}],"version-history":[{"count":0,"href":"https:\/\/www.projectliberty.org\/de\/wp-json\/wp\/v2\/posts\/27616\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.projectliberty.org\/de\/wp-json\/wp\/v2\/media?parent=27616"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.projectliberty.org\/de\/wp-json\/wp\/v2\/categories?post=27616"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.projectliberty.org\/de\/wp-json\/wp\/v2\/tags?post=27616"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
It uses the JSLint<\/a> option {adsafe: true, fragment: true}<\/code>.<\/p>\n