Why is my HTML5 package blank in SLS?

1Read the console and sort the messages

Open the SLS page with your interactive and press F12 (Cmd+Option+J on a Mac), then open the Console tab. Reload the page so you see messages from the very start.

Sort every red line into one of two piles:

• SLS’s own messages. They mention SLS files such as shortcuts.json, tinymce.min.js or index-….js. Everyone sees these. Ignore them.
• Your package’s messages. They mention files from your zip, or the address html.learning.moe.edu.sg.

Then match each message about your package to this table.

One message you can safely leave: Storyline tries to send usage statistics to Articulate, and SLS stops it with Connecting to 'https://metrics.articulate.com/v1/import' violates … "connect-src …". It doesn’t affect the course. Setting suppressAnalytics: true in the launch file removes it.

2Open your package on its own and read SLS’s rules

The console on an SLS page mixes SLS’s messages with yours. Opening your package by itself gives you a clean console with the same rules.

1. In DevTools, open the Network tab and reload the page.
2. Type html.learning in the filter box. The requests that appear are your files.
3. Click index.html, open Headers, and scroll to Response Headers. The content-security-policy header is the rulebook for your package.
4. Right-click index.html and choose Open in new tab. Your package now runs alone, under the same header.

This is the header SLS sent on 15 September 2026, split one rule per line so it’s easier to read:

content-security-policy:
  script-src 'self' 'unsafe-inline' 'unsafe-eval';
  object-src 'self';
  font-src 'self';
  style-src 'self' 'unsafe-inline';
  connect-src 'self' https://api.learning.moe.edu.sg;
  img-src 'self' data: blob:;
  child-src 'self';
  media-src 'self';
  default-src 'self';
  worker-src 'self' blob:

'self' means the website your package is served from — in practice, the files inside your zip. Here’s what each rule means for a package.

The pop-up restriction isn’t in this header; it comes from the frame’s sandbox. The console line Ignored call to 'confirm()' is how you spot it.

SLS can change these rules. If what you see differs from this post, trust the header in front of you.

3Check which file SLS starts

SLS starts index.html at the top level of your zip. SCORM exports often don’t include one, so it’s tempting to copy a launch file and rename it. Choose carefully: an LMS launch file waits for an LMS forever.

A Storyline 360 SCORM export has two launch files:

That was my mistake. I had copied index_lms.html to index.html. The SCORM driver searched the frames above it for the LMS’s API object, found nothing, and never told Storyline to load the first slide. The play button, the progress bar and the knock-on error were all that was left.

Quick fix

Copy story.html and name the copy index.html. The course runs without SCORM tracking — there’s no LMS in the frame to track it anyway.

Fix that keeps LMS tracking

If the same zip must also work in an LMS, make the launch file check for the LMS first. In index_lms.html, replace lmsPresent: true, with:

lmsPresent: (function (win) {
  // true only when an LMS has put a SCORM 1.2 API object in a frame above this page
  for (var i = 0; win && i < 500; i++) {
    try { if (win.API) { return true; } } catch (e) { /* another website's frame: keep looking */ }
    if (win.parent === win) { break; }
    win = win.parent;
  }
  return false;
})(window),

Then replace the line that loads the driver, <script src="lms/scormdriver.js" charset="utf-8"></script>, with:

<script>
  // load the SCORM driver only when an LMS was found
  if (window.globals.lmsPresent) {
    document.write('<script src="lms/scormdriver.js" charset="utf-8"><\/script>');
  }
</script>

Save the edited file as both index_lms.html and index.html. In an LMS the check finds the API and tracking works as before; in SLS it finds nothing and the course starts as a normal web page. If your LMS opens courses in a new window, also check window.opener — the converter in the Storyline shortcut below does.

Other tools that export SCORM usually have the same split: one launch file for an LMS and one for plain web. Use the plain web one for SLS.

4Search your package for what SLS blocks

Unzip the package and open the folder in VS Code, or any editor that can search a whole folder. Press Ctrl+Shift+F (Cmd+Shift+F on a Mac), turn on regular expressions with the .* button, and try each search below. Minified files have very long lines, so go by file names and match counts rather than reading the lines.

Prefer the command line? In Git Bash (it comes with Git for Windows) or a Linux terminal, run these from the package folder:

# embedded fonts, audio and video
grep -rnoE "data:(font|application/(x-)?font)[^;,]*|data:(audio|video)/[a-z0-9.+-]+" --include=*.css --include=*.js --include=*.html .

# files loaded from other websites
grep -rnoE "(src|href)=[\"']https?://[^\"']+" --include=*.html --include=*.js .

# pop-up dialogs
grep -rnoE "\b(alert|confirm|prompt)\(" --include=*.js --include=*.html .

The Content-Security-Policy doesn’t apply to links students click (<a href>); it applies to everything the page loads by itself. Focus on those.

5Fix what you found

Each fix moves something into your zip, or replaces something the sandbox switches off. Do it in your own files: when I fetched my uploaded files back from SLS, it had already moved some of Storyline’s fonts and clips into files by itself, but it hadn’t fixed the launch file, and you can’t count on that help for other tools.

5aFonts embedded as data:

Save each font as a file and point the CSS at it. This short Node.js script does it for one CSS file. Install Node.js from nodejs.org, save the script as extract-fonts.js, and run it with the CSS file’s path.

// extract-fonts.js: move data: fonts out of a CSS file into font files
// usage: node extract-fonts.js path/to/style.css
const fs = require('fs');
const path = require('path');

const cssFile = process.argv[2];
const fontDir = path.join(path.dirname(cssFile), 'fonts');
fs.mkdirSync(fontDir, { recursive: true });

let count = 0;
const css = fs.readFileSync(cssFile, 'utf8').replace(
  /url\(\s*(['"]?)data:([^;,]*font[^;,]*);base64,([^'")]+)\1\s*\)/gi,
  (match, quote, type, base64) => {
    const ext = /woff2/i.test(type) ? 'woff2' : /woff/i.test(type) ? 'woff'
      : /otf|opentype/i.test(type) ? 'otf' : 'ttf';
    const name = `font${++count}.${ext}`;
    fs.writeFileSync(path.join(fontDir, name), Buffer.from(base64.replace(/\s+/g, ''), 'base64'));
    return `url('fonts/${name}')`;
  });

fs.writeFileSync(cssFile, css);
console.log(`Moved ${count} font(s) into ${fontDir}`);

node extract-fonts.js html5/data/css/output.min.css

It writes font1.woff, font2.woff… into a fonts folder next to the CSS file and rewrites each url(…) to match. A stylesheet looks for relative paths next to itself, so the fonts now load from your zip. On my Storyline export it moved 6 fonts.

Using Google Fonts or another font service? Download the font files (Google Fonts offers a download for each family), put them in your zip, and write your own @font-face rules instead of linking to the service.

5bAudio and video embedded as data: or blob:

media-src 'self' accepts only real files. Save the clip as a file and use its path instead. For base64 clips inside JavaScript, this script does it.

// extract-media.js: move data: audio and video out of a JavaScript file into media files
// usage, from the folder that contains index.html: node extract-media.js path/to/script.js
const fs = require('fs');

const jsFile = process.argv[2];
fs.mkdirSync('media', { recursive: true });

let count = 0;
const js = fs.readFileSync(jsFile, 'utf8').replace(
  /(["'])data:(audio|video)\/([\w.+-]+);base64,\s*([A-Za-z0-9+/=]+)\1/g,
  (match, quote, kind, subtype, base64) => {
    const ext = subtype === 'mpeg' ? 'mp3' : subtype;
    const name = `media/${kind}${++count}.${ext}`;
    fs.writeFileSync(name, Buffer.from(base64, 'base64'));
    return quote + name + quote;
  });

fs.writeFileSync(jsFile, js);
console.log(`Moved ${count} clip(s) into ./media`);

node extract-media.js html5/lib/scripts/bootstrapper.min.js

Run it from the folder that contains index.html: an audio or video element looks for a relative path next to the page, not next to the script. In Storyline exports, bootstrapper.min.js holds two tiny silent clips, TINY_AUDIO and TINY_VIDEO, which the player plays to get its audio and video ready. While they’re blocked, those players can’t get ready.

If your page makes sound in the browser — a recording, text-to-speech, generated tones — and plays it from a blob: address, play it with the Web Audio API instead. Decoded audio played through an AudioContext isn’t loaded as media, so media-src doesn’t apply.

5cScripts, styles and fonts from other websites

Download each file into your package, for example into a lib folder, and point the tag at the copy.

<!-- blocked: loads from another website -->
<script src="https://cdn.example.com/library/2.1.0/library.min.js"></script>

<!-- works: a file inside your zip -->
<script src="lib/library.min.js"></script>

Some libraries fetch more files once they’re running, such as fonts, language files or workers. Search the downloaded library for https:// and bring those files in as well.

5dData and pages from other websites

connect-src allows only your own files and SLS’s api.learning.moe.edu.sg; child-src allows only your own pages.

• Put the data your page needs inside the zip, as a .json file (fetch('data/questions.json') still works) or as a .js file that sets a variable.
• Don’t embed YouTube, Google Forms or other websites inside the package. Add them to the SLS lesson as separate components instead.

5ePop-up dialogs

In the sandbox, alert() does nothing, confirm() returns false as if the student pressed Cancel, and prompt() returns null. Replace them with something on the page.

// before: never shown in SLS, so restart() never runs
if (confirm('Start again?')) { restart(); }

// after: a visible button asks instead
document.querySelector('#restart').addEventListener('click', restart);

If a dialog only reported errors to developers, log them instead with console.error(message). That’s what I did with the SCORM driver’s error pop-up.

6Test with SLS’s rules on your computer

Uploading and reloading SLS for every attempt is slow. This server reproduces the parts that matter: your files come from one address with SLS’s Content-Security-Policy, and a page on a different address shows them in a sandboxed frame without pop-ups.

// sls-test.js: show an unzipped package the way SLS does
// usage: node sls-test.js path/to/unzipped-package   then open http://localhost:8080
const http = require('http');
const fs = require('fs');
const path = require('path');

const root = path.resolve(process.argv[2] || '.');
const CSP = "script-src 'self' 'unsafe-inline' 'unsafe-eval'; object-src 'self'; font-src 'self'; " +
  "style-src 'self' 'unsafe-inline'; connect-src 'self' https://api.learning.moe.edu.sg; " +
  "img-src 'self' data: blob:; child-src 'self'; media-src 'self'; default-src 'self'; worker-src 'self' blob:";
const TYPES = {
  '.html': 'text/html', '.js': 'text/javascript', '.css': 'text/css', '.json': 'application/json',
  '.png': 'image/png', '.jpg': 'image/jpeg', '.gif': 'image/gif', '.svg': 'image/svg+xml',
  '.mp3': 'audio/mpeg', '.wav': 'audio/wav', '.mp4': 'video/mp4', '.webm': 'video/webm',
  '.woff': 'font/woff', '.woff2': 'font/woff2', '.ttf': 'font/ttf', '.otf': 'font/otf',
};

// Your package with SLS's rules, on its own address (like html.learning.moe.edu.sg)
http.createServer((req, res) => {
  const file = path.join(root, decodeURIComponent(new URL(req.url, 'http://x').pathname));
  const inside = file === root || file.startsWith(root + path.sep);
  if (!inside || !fs.existsSync(file) || fs.statSync(file).isDirectory()) {
    res.writeHead(404);
    return res.end('Not found');
  }
  res.writeHead(200, {
    'Content-Type': TYPES[path.extname(file).toLowerCase()] || 'application/octet-stream',
    'Content-Security-Policy': CSP,
  });
  fs.createReadStream(file).pipe(res);
}).listen(8081, '127.0.0.1');

// A "lesson page" on a different address that shows the package in a sandboxed frame
http.createServer((req, res) => {
  res.writeHead(200, { 'Content-Type': 'text/html' });
  res.end('<!doctype html><title>SLS test</title><body style="margin:0">' +
    '<iframe src="http://127.0.0.1:8081/index.html" style="border:0;width:100vw;height:100vh" ' +
    'sandbox="allow-scripts allow-same-origin allow-popups allow-forms"></iframe>');
}).listen(8080, () => console.log('Open http://localhost:8080 and press F12'));

Unzip your fixed package, then run the script with that folder:

node sls-test.js path/to/unzipped-package

Open http://localhost:8080, press F12 and reload. A clean result has no red Content Security Policy messages and no Ignored call to … lines, and the interactive works the way it does on your computer. My hand-fixed Storyline course played in it, and the only Content Security Policy message left was the harmless Articulate statistics line from Step 1.

It isn’t SLS, so check the console once more after you upload. But it catches blank-screen problems in seconds instead of an upload cycle.

For zips I use a fuller version, sls_preview_server.js. It plays zip files directly, lists errors beside the player, checks that every font loads, and can pretend to be an LMS so you can confirm SCORM tracking still works. The screenshots at the top come from it.

7Zip it the way SLS expects, upload, check again

1. Open the package folder and select everything inside it: index.html and the folders next to it (for Storyline: html5, lms, mobile, story_content and the rest).
2. Zip that selection. Don’t zip the folder itself — index.html must sit at the top level of the zip, not inside a subfolder.
3. Upload the zip, open the interactive in SLS, and repeat Step 1. The only red lines left should be SLS’s own.