ADsafe examples, step by step

Follow one small interaction from an input to an output. The important question is which references the code receives and which operations it uses, not how much code fits inside the widget.

A text update through a bunch

Start with the HELLO widget. The containing DIV has the ID HELLO_, and the output paragraph has the ID HELLO_MESSAGE. The final script starts the widget with the same root ID. Inside the callback, the only document interface supplied as an argument is dom.

ADSAFE.go("HELLO_", function (dom) {
  "use strict";
  var output = dom.q("#HELLO_MESSAGE");
  output.value("Ready to read.");
});

The query returns a bunch. Its value method updates nodes through the wrapper instead of giving the caller a raw element. A miss produces an empty bunch, so check identifiers before assuming an update happened. output.count() provides the selection size. The code above is displayed for study and does not load the legacy runtime.

A click with a local result

Add a button with the ID HELLO_BUTTON to the same fragment, before the final startup script. Registration happens on its bunch. The handler receives ADsafe’s mediated event record, not the browser’s complete event object.

dom.q("#HELLO_BUTTON").on("click", function (event) {
  event.preventDefault();
  dom.q("#HELLO_MESSAGE").value("The handler ran.");
});

Trace two effects separately: default-action cancellation uses the event record’s method, while the text change uses a query inside the widget subtree. The Bats page offers a newly written event demonstration. It preserves an original sample route but is not a restoration of the archived game or proof of ADsafe isolation.

Keep state in the closure

A variable declared inside the startup callback can keep widget state without becoming a page global. A later event handler closes over that variable. This is ordinary JavaScript closure behavior; the special concern is keeping the references available to the widget within the intended authority.

var clicks = 0;
dom.q("#HELLO_BUTTON").on("click", function () {
  clicks += 1;
  dom.q("#HELLO_MESSAGE").value("Clicks: " + clicks);
});

Place that state and handler inside the callback, rather than adding a new top-level global. The Sudoku exercise is a separate, newly written small-grid activity about local state. The archived page identified a Sudoku Solutionator; this edition does not claim to reproduce its algorithm or puzzle behavior.

Read a converter as a data flow

The Roman numeral converter illustrates a different separation: reading an input, computing a result and presenting output. The original archive establishes Roman conversion as an ADsafe sample topic. The converter served here is new code, not an authenticated copy of the original guest.

When reading a historical implementation, find the startup callback, its input selection and its output selection first. Then inspect the conversion logic independently. Correct conversion results do not demonstrate security, just as a confined DOM update does not establish that a conversion algorithm is correct.

Before calling a snippet a widget

Confirm the wrapper and ID rules, the position of script blocks, and the original verifier’s acceptance. Check runtime behavior for the exact methods used. If a library is involved, follow its id → lib → go registration sequence too. Finally, inspect every host-provided result for references outside the intended boundary.

Use the event reference for the bundled runtime’s handler-removal behavior, and the security model for the assumptions a working demonstration cannot test.