JavaScript Element beforescriptexecute Event

What You’ll Learn

The beforescriptexecute event once fired before a script ran in Firefox. Cancelling it could stop execution. Learn why it is deprecated and non-standard, how to feature-detect it, 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 events around script execution: beforescriptexecute (before run) and afterscriptexecute (after run). The “before” event was interesting because cancelling it could block the script.

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

An instance event on Element (listened on document or other nodes in supporting Gecko). It notified you that a script was about to execute.

• Fires when a script is about to be executed (legacy Firefox).
• Cancelable — preventDefault() could stop execution.
• Generic Event — no special payload properties.
• Sibling — afterscriptexecute ran later and was not cancelable.
• Status — Deprecated and Non-standard on MDN; not part of any specification.

📝 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

MDN: cancelling the event prevents the script from executing (in engines that still supported this behavior). Call event.preventDefault() inside the handler.

⚖️ 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).

// Educational pattern only — prefer CSP in real apps.
const observer = new MutationObserver((mutations) => {
  for (const mutation of mutations) {
    for (const node of mutation.addedNodes) {
      if (node.nodeName === "SCRIPT") {
        node.type = "text/plain"; // stops it from executing as JS
        console.log("Neutralized an injected script (demo)");
      }
    }
  }
});

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

Examples Gallery

Examples follow MDN Element: 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.

document.addEventListener("beforescriptexecute", (event) => {
  console.log("beforescriptexecute fired");
  console.log("target:", event.target && event.target.nodeName);
});

// In legacy Firefox, inserting/running a <script> could fire this.
// 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)");
};

// 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 Gecko: script does not run after preventDefault().
// Modern browsers: this listener usually never fires.

Cancel listener ready (event may never fire)
Injected script still runs in modern browsers

const supported = "onbeforescriptexecute" in document;

console.log("onbeforescriptexecute in document:", supported);

if (supported) {
  document.addEventListener("beforescriptexecute", () => {
    console.log("Legacy path: beforescriptexecute");
  });
} else {
  console.log("Use CSP / safe script loading instead");
}

onbeforescriptexecute in document: false
Use CSP / safe script 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
);
// Prefer CSP in production; this is a teaching demo only.

Neutralized demo script
__shouldStayUndefined: undefined

🚀 Common Use Cases

• Understanding legacy Firefox / Gecko code that tried to block scripts.
• Migrating old extensions or pages off proprietary script-execute events.
• Interview / history knowledge of early HTML script lifecycle proposals.
• Teaching why feature detection and standards matter for DOM events.
• Choosing CSP and safe loading strategies for real production work.

🔧 How It Works

📝 Notes

• MDN: Deprecated and Non-standard — avoid in production.
• Cancelable in legacy Gecko; sibling afterscriptexecute was not.
• Proprietary to Gecko; never a cross-browser API.
• Modern Firefox stopped shipping useful web-facing support for these events.
• Related learning: afterscriptexecute, beforexrselect, addEventListener(), JavaScript hub.

💡 Best Practices