<script> - JavaScript Embedding Element

The `<script>` Element

Scripting HTML5

The <script> element is used to embed or reference executable code, typically JavaScript. It’s the fundamental way to add interactivity, dynamic behavior, and application logic to web pages. Understanding script loading strategies is crucial for optimal performance and user experience.

Quick Example

<!-- Inline JavaScript -->
<script>
console.log('Hello from inline script!');
alert('This script executes immediately');
</script>

<!-- External JavaScript -->
<script src="https://cdn.example.com/library.js"></script>

<!-- Modern ES Module -->
<script type="module">
import { greet } from './utils.js';
greet('World');
</script>

Result

Interactive code playground requires JavaScript. Here's the code:

<!-- Inline JavaScript -->
<script>
console.log('Hello from inline script!');
alert('This script executes immediately');
</script>

<!-- External JavaScript -->
<script src="https://cdn.example.com/library.js"></script>

<!-- Modern ES Module -->
<script type="module">
import { greet } from './utils.js';
greet('World');
</script>

Syntax

<!-- Inline script -->
<script>
  // JavaScript code here
</script>

<!-- External script -->
<script src="path/to/file.js"></script>

<!-- ES Module -->
<script type="module" src="path/to/module.js"></script>

Attributes

Critical Attributes

Attribute	Value	Description
`src`	URL	Path to external script file
`type`	MIME type	`text/javascript` (default), `module`, or `importmap`
`async`	Boolean	Download asynchronously, execute when ready
`defer`	Boolean	Download asynchronously, execute after parsing
`crossorigin`	`anonymous`/`use-credentials`	CORS mode for cross-origin requests
`integrity`	Hash	Subresource Integrity hash for security
`nomodule`	Boolean	Execute only in browsers that don’t support modules
`referrerpolicy`	Policy	How much referrer information to send

Global Attributes

The <script> element supports all global attributes.

async vs defer vs Default (CRITICAL UNDERSTANDING)

Understanding script loading strategies is essential for performance:

DEFAULT (blocking):
HTML Parsing: ━━━━━━━━⏸️━━━━━━━━━━━━━━━━━━
Script Download:        ⬇️⬇️⬇️
Script Execute:             ⚡

ASYNC:
HTML Parsing: ━━━━━━━━━━⏸️━━━━━━━━━━━━━━━
Script Download: ⬇️⬇️⬇️⬇️⬇️
Script Execute:          ⚡

DEFER:
HTML Parsing: ━━━━━━━━━━━━━━━━━━━━━━━━⏸️
Script Download: ⬇️⬇️⬇️⬇️⬇️
Script Execute:                        ⚡

TYPE="module" (deferred by default):
HTML Parsing: ━━━━━━━━━━━━━━━━━━━━━━━━⏸️
Script Download: ⬇️⬇️⬇️⬇️⬇️
Script Execute:                        ⚡

ES Modules

Modern JavaScript with import/export syntax:

<script type="module">
// Inline module with imports
const greeting = 'Hello, World!';

function greet(name) {
  return 'Hello, ' + name + '!';
}

console.log(greet('Developer'));

// Modules have their own scope
// Variables don't leak to global
const privateVar = 'Not accessible globally';
</script>

<script>
// This won't work - modules are scoped
try {
  console.log(greeting);
} catch (e) {
  console.log('Cannot access module variables:', e.message);
}
</script>

Result

Interactive code playground requires JavaScript. Here's the code:

<script type="module">
// Inline module with imports
const greeting = 'Hello, World!';

function greet(name) {
  return 'Hello, ' + name + '!';
}

console.log(greet('Developer'));

// Modules have their own scope
// Variables don't leak to global
const privateVar = 'Not accessible globally';
</script>

<script>
// This won't work - modules are scoped
try {
  console.log(greeting);
} catch (e) {
  console.log('Cannot access module variables:', e.message);
}
</script>

<!-- Define import map -->
<script type="importmap">
{
  "imports": {
    "lodash": "https://cdn.jsdelivr.net/npm/[email protected]/lodash.js",
    "dayjs": "https://cdn.jsdelivr.net/npm/[email protected]/+esm"
  }
}
</script>

<!-- Use mapped imports -->
<script type="module">
  import _ from 'lodash';
  import dayjs from 'dayjs';

  console.log('Lodash version:', _.VERSION);
  console.log('Today:', dayjs().format('YYYY-MM-DD'));
</script>

Subresource Integrity (SRI)

SRI ensures that files from CDNs haven’t been tampered with:

<!-- WITHOUT SRI (⚠️ Not recommended for CDN) -->
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js">
</script>

<!-- WITH SRI (✅ Recommended) -->
<script
src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"
integrity="sha384-HASH-GOES-HERE"
crossorigin="anonymous">
</script>

<p style="padding: 1em; background: #d1fae5; border-radius: 4px;">
<strong>SRI Protection:</strong> If the file is modified on the CDN,
the browser will refuse to execute it, preventing potential attacks.
</p>

Result

Interactive code playground requires JavaScript. Here's the code:

<!-- WITHOUT SRI (⚠️ Not recommended for CDN) -->
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js">
</script>

<!-- WITH SRI (✅ Recommended) -->
<script
src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"
integrity="sha384-HASH-GOES-HERE"
crossorigin="anonymous">
</script>

<p style="padding: 1em; background: #d1fae5; border-radius: 4px;">
<strong>SRI Protection:</strong> If the file is modified on the CDN,
the browser will refuse to execute it, preventing potential attacks.
</p>

# Using openssl
curl -sS https://cdn.example.com/library.js | \
  openssl dgst -sha384 -binary | \
  openssl base64 -A

# Using shasum
curl -sS https://cdn.example.com/library.js | \
  shasum -a 384 -b | \
  awk '{ print $1 }' | \
  xxd -r -p | \
  base64

Online Tools:

SRI Hash Generator
Many CDNs provide SRI hashes automatically

<!-- Real-world example with popular libraries -->

<!-- React with SRI -->
<script
  crossorigin="anonymous"
  src="https://unpkg.com/react@18/umd/react.production.min.js"
  integrity="sha384-Qi4u..."
></script>

<!-- Alpine.js with SRI -->
<script
  defer
  src="https://cdn.jsdelivr.net/npm/alpinejs@3/dist/cdn.min.js"
  integrity="sha384-..."
  crossorigin="anonymous"
></script>

<!-- Your application script -->
<script
  defer
  src="/js/app.js"
  integrity="sha384-..."
></script>

crossorigin Attribute

Controls CORS for script requests:

<!-- For SRI, crossorigin is REQUIRED -->
<script
src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"
integrity="sha384-oVQ5NpKjEiwtgq9Z5FUOJqLQTZ8c0hcI4GYvWzkEfkrZB7gEQIV9a5xJCNdp5cE/"
crossorigin="anonymous">
</script>

<div style="padding: 1em; background: #f3f4f6; border-radius: 4px;">
<h3>crossorigin values:</h3>
<ul>
  <li><code>anonymous</code>: No credentials sent</li>
  <li><code>use-credentials</code>: Send credentials (cookies, certs)</li>
</ul>
<p><strong>Note:</strong> Required when using SRI or when you need
error details for cross-origin scripts.</p>
</div>

Result

Interactive code playground requires JavaScript. Here's the code:

<!-- For SRI, crossorigin is REQUIRED -->
<script
src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"
integrity="sha384-oVQ5NpKjEiwtgq9Z5FUOJqLQTZ8c0hcI4GYvWzkEfkrZB7gEQIV9a5xJCNdp5cE/"
crossorigin="anonymous">
</script>

<div style="padding: 1em; background: #f3f4f6; border-radius: 4px;">
<h3>crossorigin values:</h3>
<ul>
  <li><code>anonymous</code>: No credentials sent</li>
  <li><code>use-credentials</code>: Send credentials (cookies, certs)</li>
</ul>
<p><strong>Note:</strong> Required when using SRI or when you need
error details for cross-origin scripts.</p>
</div>

Loading Strategies

Performance-Optimized Loading

<!DOCTYPE html>
<html>
<head>
  <!-- Critical inline styles -->
  <style>
    /* Above-the-fold CSS */
  </style>

  <!-- Preconnect to external domains -->
  <link rel="preconnect" href="https://cdn.example.com">

  <!-- Critical JavaScript (rare) -->
  <script>
    // Only absolutely essential code
    window.APP_CONFIG = { version: '1.0.0' };
  </script>
</head>
<body>
  <!-- Page content -->

  <!-- Non-critical scripts at end with defer -->
  <script defer src="/js/app.js"></script>
  <script defer src="/js/analytics.js"></script>
</body>
</html>

<!-- Analytics (async - don't block) -->
<script async src="https://www.google-analytics.com/analytics.js"></script>

<!-- Social media widgets (async) -->
<script async src="https://platform.twitter.com/widgets.js"></script>

<!-- Ad scripts (async) -->
<script async src="https://ads.example.com/script.js"></script>

<!-- Chat widget (load late with defer) -->
<script defer src="https://chat.example.com/widget.js"></script>

Dynamic Script Loading

Load scripts programmatically:

<button id="loadLib">Load Library</button>
<div id="status" style="margin-top: 1em; padding: 1em;
   background: #f3f4f6; border-radius: 4px;">
Status: Not loaded
</div>

<script>
function loadScript(src, options = {}) {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script');

    // Set attributes
    script.src = src;
    if (options.async) script.async = true;
    if (options.defer) script.defer = true;
    if (options.type) script.type = options.type;
    if (options.integrity) script.integrity = options.integrity;
    if (options.crossOrigin) script.crossOrigin = options.crossOrigin;

    // Handle load/error
    script.onload = () => resolve(script);
    script.onerror = () => reject(new Error('Failed to load: ' + src));

    // Add to document
    document.head.appendChild(script);
  });
}

document.getElementById('loadLib').addEventListener('click', async () => {
  const status = document.getElementById('status');
  status.textContent = 'Status: Loading...';
  status.style.background = '#fef3c7';

  try {
    await loadScript(
      'https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js',
      {
        async: true,
        integrity: 'sha384-oVQ5NpKjEiwtgq9Z5FUOJqLQTZ8c0hcI4GYvWzkEfkrZB7gEQIV9a5xJCNdp5cE/',
        crossOrigin: 'anonymous'
      }
    );

    status.textContent = 'Status: ✓ Loaded! Lodash version: ' + _.VERSION;
    status.style.background = '#d1fae5';
  } catch (error) {
    status.textContent = 'Status: ✗ Error - ' + error.message;
    status.style.background = '#fee2e2';
  }
});
</script>

Result

Interactive code playground requires JavaScript. Here's the code:

<button id="loadLib">Load Library</button>
<div id="status" style="margin-top: 1em; padding: 1em;
   background: #f3f4f6; border-radius: 4px;">
Status: Not loaded
</div>

<script>
function loadScript(src, options = {}) {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script');

    // Set attributes
    script.src = src;
    if (options.async) script.async = true;
    if (options.defer) script.defer = true;
    if (options.type) script.type = options.type;
    if (options.integrity) script.integrity = options.integrity;
    if (options.crossOrigin) script.crossOrigin = options.crossOrigin;

    // Handle load/error
    script.onload = () => resolve(script);
    script.onerror = () => reject(new Error('Failed to load: ' + src));

    // Add to document
    document.head.appendChild(script);
  });
}

document.getElementById('loadLib').addEventListener('click', async () => {
  const status = document.getElementById('status');
  status.textContent = 'Status: Loading...';
  status.style.background = '#fef3c7';

  try {
    await loadScript(
      'https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js',
      {
        async: true,
        integrity: 'sha384-oVQ5NpKjEiwtgq9Z5FUOJqLQTZ8c0hcI4GYvWzkEfkrZB7gEQIV9a5xJCNdp5cE/',
        crossOrigin: 'anonymous'
      }
    );

    status.textContent = 'Status: ✓ Loaded! Lodash version: ' + _.VERSION;
    status.style.background = '#d1fae5';
  } catch (error) {
    status.textContent = 'Status: ✗ Error - ' + error.message;
    status.style.background = '#fee2e2';
  }
});
</script>

Security Considerations

Content Security Policy (CSP)

<!-- Set CSP via meta tag -->
<meta http-equiv="Content-Security-Policy"
      content="script-src 'self' https://cdn.example.com;">

<!-- Or via HTTP header (preferred) -->
<!--
Content-Security-Policy: script-src 'self' https://cdn.example.com;
-->

<!-- This will load (allowed origin) -->
<script src="https://cdn.example.com/library.js"></script>

<!-- This will be blocked (different origin) -->
<script src="https://malicious.com/script.js"></script>

<!-- Inline scripts blocked by default -->
<script>
  // This won't execute without 'unsafe-inline' or nonce
  console.log('Blocked!');
</script>

<!-- Server generates unique nonce per request -->
<meta http-equiv="Content-Security-Policy"
      content="script-src 'nonce-abc123xyz';">

<!-- Inline script with matching nonce -->
<script nonce="abc123xyz">
  // This executes because nonce matches
  console.log('Allowed with nonce!');
</script>

<!-- Without nonce, blocked -->
<script>
  // This won't execute
  console.log('Blocked!');
</script>

<!-- Allow specific inline scripts by hash -->
<meta http-equiv="Content-Security-Policy"
      content="script-src 'sha256-HASH-OF-SCRIPT';">

<!-- Calculate hash of this exact script -->
<script>
  console.log('Specific allowed script');
</script>

<!-- Different script, blocked -->
<script>
  console.log('Different script, blocked');
</script>

XSS Prevention

<div style="padding: 1em; background: #fee2e2; border-radius: 4px;
          border-left: 4px solid #dc2626;">
<h3>❌ DANGEROUS - Don't Do This:</h3>
<pre style="background: #7f1d1d; color: #fecaca; padding: 1em;
            border-radius: 4px;">
// User input directly in script
const userInput = '<?php echo $_GET["name"]; ?>';
document.write(userInput); // XSS vulnerability!

// Dynamic script creation from user input
const script = document.createElement('script');
script.innerHTML = userData; // DANGEROUS!
</pre>
</div>

<div style="padding: 1em; background: #d1fae5; border-radius: 4px;
          border-left: 4px solid #10b981; margin-top: 1em;">
<h3>✅ SAFE - Do This Instead:</h3>
<pre style="background: #064e3b; color: #d1fae5; padding: 1em;
            border-radius: 4px;">
// Sanitize and validate user input
const userInput = DOMPurify.sanitize(input);

// Use textContent, not innerHTML for text
element.textContent = userInput;

// Use data attributes for data
element.dataset.value = userInput;
</pre>
</div>

Result

Interactive code playground requires JavaScript. Here's the code:

<div style="padding: 1em; background: #fee2e2; border-radius: 4px;
          border-left: 4px solid #dc2626;">
<h3>❌ DANGEROUS - Don't Do This:</h3>
<pre style="background: #7f1d1d; color: #fecaca; padding: 1em;
            border-radius: 4px;">
// User input directly in script
const userInput = '<?php echo $_GET["name"]; ?>';
document.write(userInput); // XSS vulnerability!

// Dynamic script creation from user input
const script = document.createElement('script');
script.innerHTML = userData; // DANGEROUS!
</pre>
</div>

<div style="padding: 1em; background: #d1fae5; border-radius: 4px;
          border-left: 4px solid #10b981; margin-top: 1em;">
<h3>✅ SAFE - Do This Instead:</h3>
<pre style="background: #064e3b; color: #d1fae5; padding: 1em;
            border-radius: 4px;">
// Sanitize and validate user input
const userInput = DOMPurify.sanitize(input);

// Use textContent, not innerHTML for text
element.textContent = userInput;

// Use data attributes for data
element.dataset.value = userInput;
</pre>
</div>

Common Patterns

Feature Detection and Polyfills

<script>
// Check if feature exists
if (!window.IntersectionObserver) {
  // Load polyfill dynamically
  const script = document.createElement('script');
  script.src = 'https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver';
  script.async = true;
  document.head.appendChild(script);

  console.log('Loading IntersectionObserver polyfill...');
} else {
  console.log('IntersectionObserver supported natively!');
}
</script>

<div style="padding: 1em; background: #f3f4f6; border-radius: 4px;">
Check console for feature detection result
</div>

Result

Interactive code playground requires JavaScript. Here's the code:

<script>
// Check if feature exists
if (!window.IntersectionObserver) {
  // Load polyfill dynamically
  const script = document.createElement('script');
  script.src = 'https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver';
  script.async = true;
  document.head.appendChild(script);

  console.log('Loading IntersectionObserver polyfill...');
} else {
  console.log('IntersectionObserver supported natively!');
}
</script>

<div style="padding: 1em; background: #f3f4f6; border-radius: 4px;">
Check console for feature detection result
</div>

Fallback for Module Support

<!-- Modern browsers: use ES modules -->
<script type="module">
console.log('ES Modules supported!');
import('./modern-app.js');
</script>

<!-- Legacy browsers: use bundled script -->
<script nomodule src="/legacy-bundle.js">
// Only executes in browsers without module support
</script>

<div style="padding: 1em; background: #dbeafe; border-radius: 4px;">
<strong>nomodule attribute:</strong> Scripts with this attribute
only execute in browsers that don't support ES modules.
</div>

Result

Interactive code playground requires JavaScript. Here's the code:

<!-- Modern browsers: use ES modules -->
<script type="module">
console.log('ES Modules supported!');
import('./modern-app.js');
</script>

<!-- Legacy browsers: use bundled script -->
<script nomodule src="/legacy-bundle.js">
// Only executes in browsers without module support
</script>

<div style="padding: 1em; background: #dbeafe; border-radius: 4px;">
<strong>nomodule attribute:</strong> Scripts with this attribute
only execute in browsers that don't support ES modules.
</div>

Browser Support

Universal Support

The <script> element is supported in all browsers:

Basic support: All browsers
async/defer: All modern browsers (IE10+)
type=“module”: Chrome 61+, Firefox 60+, Safari 11+, Edge 16+
integrity (SRI): Chrome 45+, Firefox 43+, Safari 11.1+, Edge 17+
nomodule: Chrome 61+, Firefox 60+, Safari 11+, Edge 16+

Fallback: Use nomodule for legacy browser support.

<noscript> - Fallback for disabled JavaScript
<template> - Inert content templates
<link rel="modulepreload"> - Preload modules

Best Practices

Load strategy: Use defer for most scripts, async for independent scripts
Placement: Put scripts at end of <body> or use defer
Use modules: Prefer type="module" for modern applications
Security: Always use SRI for CDN scripts
CSP: Implement Content Security Policy
Performance: Minimize, bundle, and compress scripts
Lazy load: Load non-critical scripts on demand
Error handling: Always handle script loading errors
No inline handlers: Avoid onclick etc., use addEventListener
Validate inputs: Never trust user input in scripts

Specifications

Learn More:

<script> - JavaScript Embedding Element

The <script> Element

Quick Example

Syntax

Attributes

Critical Attributes

Global Attributes

async vs defer vs Default (CRITICAL UNDERSTANDING)

ES Modules

Subresource Integrity (SRI)

crossorigin Attribute

Loading Strategies

Performance-Optimized Loading

Dynamic Script Loading

Security Considerations

Content Security Policy (CSP)

XSS Prevention

Common Patterns

Feature Detection and Polyfills

Fallback for Module Support

Browser Support

Related Elements

Best Practices

Specifications

The `<script>` Element