JavaScript Document beforescriptexecute Event

What You’ll Learn

The Document beforescriptexecute event once fired before a static <script> started running in Firefox. Cancelling it could stop execution. Learn why dynamic scripts were excluded, how it differed from afterscriptexecute, and which portable approaches to use instead—with five examples and try-it labs.

Introduction

Early Gecko experiments added a pair of proprietary Document events around script execution: beforescriptexecute (before run) and afterscriptexecute (after run). The “before” event was interesting because cancelling it could block the script.

On Document, it answered: is this static script about to start? That idea never became a web standard. Other browsers never shipped it, MDN warns not to rely on it, and modern Firefox stopped exposing useful web-facing support.

Understanding beforescriptexecute

A Document event listened on document in supporting Gecko. Per MDN, it fired when a static <script> was about to start executing—not when you insert a script later with appendChild() or similar.

• Fires when a static script is about to be executed (legacy Firefox).
• Does not fire for scripts added dynamically (for example appendChild()).
• Cancelable — preventDefault() could stop execution in old Gecko.
• Generic Event — no special payload; event.target is the script element.
• Sibling — afterscriptexecute ran later and was not cancelable.
• Related — Document.currentScript identifies the script currently running.
• Status — Deprecated and Non-standard on MDN; not part of any specification.

🔎 Static vs Dynamic Scripts

This is the detail beginners miss. MDN’s Document page is explicit:

That limitation alone made it a poor “block all scripts” tool. Portable CSP and careful loading work for both static and dynamic scripts.

📝 Syntax

Use the event name with addEventListener, or set the handler property (legacy Firefox only):

addEventListener("beforescriptexecute", (event) => { });

onbeforescriptexecute = (event) => { };

Event type

A generic Event.

Cancelable

In legacy Gecko, cancelling the event prevented the script from executing. Call event.preventDefault() inside the handler. Modern browsers typically never fire this event at all.

Typical listener (MDN style)

function starting(e) {
  console.log(`Starting script with ID: ${e.target.id}`);
}

document.addEventListener("beforescriptexecute", starting);
// or
document.onbeforescriptexecute = starting;

⚖️ beforescriptexecute vs afterscriptexecute vs CSP

🚀 What to Use Instead

There is no portable DOM event that cancels arbitrary scripts the way legacy beforescriptexecute did. Use layered, standard approaches:

• CSP — declare which script sources (and inline policies) are allowed.
• Do not inject untrusted scripts — fix the source, not the symptom.
• ES modules — explicit imports instead of ad-hoc script tags.
• MutationObserver — some legacy blockers changed a new script’s type before it ran (fragile; CSP is better).

Content-Security-Policy: script-src 'self'

That header (or a matching <meta> policy, where appropriate) is the modern, cross-browser way to control which scripts may execute—static or dynamic.

Examples Gallery

Examples follow MDN Document: beforescriptexecute event and show safe feature detection plus modern replacements. In most current browsers the proprietary event will never fire—the labs still teach the patterns clearly.

function starting(e) {
  console.log(`Starting script with ID: ${e.target.id}`);
}

document.addEventListener("beforescriptexecute", starting);

// In legacy Firefox, a static <script id="demo"> could fire this before it ran.
// In modern browsers it typically never fires.

Listener attached (event may never fire in modern browsers)

document.onbeforescriptexecute = (event) => {
  console.log("Script about to run (onbeforescriptexecute)");
  console.log("target id:", event.target && event.target.id);
};

// Assigning again replaces the previous handler.
// Prefer addEventListener when you need multiple listeners.

Handler property assigned (legacy Firefox only)

document.addEventListener("beforescriptexecute", (event) => {
  console.log("Blocking script execution (legacy only)");
  event.preventDefault();
});

// Historical: cancel stopped a static script from running.
// Modern browsers: listener is usually a no-op (event never fires).
console.log("Cancel listener ready (event may never fire)");

Cancel listener ready (event may never fire)

document.addEventListener("beforescriptexecute", (e) => {
  console.log("beforescriptexecute for:", e.target && e.target.id);
});

// Dynamic insert — MDN: beforescriptexecute does NOT fire for this path
const dynamic = document.createElement("script");
dynamic.id = "dynamic-demo";
dynamic.textContent = "console.log('dynamic script ran');";
document.body.appendChild(dynamic);

console.log("Dynamic script appended");
console.log("MDN: beforescriptexecute skips dynamically added scripts");
console.log("Prefer CSP / trusted loading instead");

Dynamic script appended
MDN: beforescriptexecute skips dynamically added scripts
Prefer CSP / trusted loading instead

const observer = new MutationObserver((mutations) => {
  for (const mutation of mutations) {
    for (const node of mutation.addedNodes) {
      if (node.nodeName === "SCRIPT" && node.dataset?.demo === "block") {
        node.type = "text/plain";
        console.log("Neutralized demo script");
      }
    }
  }
});

observer.observe(document.documentElement, { childList: true, subtree: true });

const s = document.createElement("script");
s.dataset.demo = "block";
s.textContent = "window.__shouldStayUndefined = true;";
document.body.appendChild(s);

console.log("__shouldStayUndefined:", typeof window.__shouldStayUndefined);
console.log("(Prefer CSP in production; this is a teaching demo only.)");

Neutralized demo script
__shouldStayUndefined: undefined
(Prefer CSP in production; this is a teaching demo only.)

🚀 Common Use Cases

• Understanding legacy Firefox / Gecko code that tried to cancel static scripts.
• Migrating old extensions or pages off proprietary script-execute events.
• Interview / history knowledge of early HTML script lifecycle proposals.
• Teaching why static-vs-dynamic limits and standards matter for DOM events.
• Choosing CSP, trusted loading, currentScript, or ES modules for real production work.

🔧 How It Works

📝 Notes

• MDN: Deprecated and Non-standard — avoid in production.
• Applies to static scripts only; dynamic appendChild() scripts do not fire it.
• Was cancelable in legacy Gecko; sibling afterscriptexecute was not.
• Proprietary to Gecko; never a cross-browser API; not part of any specification.
• Related learning: afterscriptexecute, currentScript, scripts, JavaScript hub.

💡 Best Practices