Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Pass through nonce to the transformed script element #15671

Merged
merged 6 commits into from Sep 25, 2023
Merged

Pass through nonce to the transformed script element #15671

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
5206429
pass through nonce to transformed script element
JLHwung May 31, 2023
f1ca39b
add test
JLHwung May 31, 2023
9959990
make node 6 happy
JLHwung May 31, 2023
da5e835
remove semver dependency
JLHwung Jul 4, 2023
aaf9d5b
properly bind jest.it
JLHwung Jul 6, 2023
d8e0388
add describeGte
JLHwung Jul 6, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
3 changes: 2 additions & 1 deletion packages/babel-standalone/package.json
View file
Open in desktop
Expand Up @@ -114,7 +114,8 @@
"@babel/preset-flow": "workspace:^",
"@babel/preset-react": "workspace:^",
"@babel/preset-typescript": "workspace:^",
"acorn": "^8.7.0"
"acorn": "^8.7.0",
"jsdom": "^22.1.0"
},
"keywords": [
"babel",
Expand Down
55 changes: 28 additions & 27 deletions packages/babel-standalone/src/transformScriptTags.ts
View file
Open in desktop
Expand Up @@ -21,6 +21,8 @@ type CompilationResult = {
loaded: boolean;
content: string | null;
executed: boolean;
// nonce is undefined in browsers that don't support the nonce global attribute
nonce: string | undefined;
// todo: refine plugins/presets
plugins: InputOptions["plugins"];
presets: InputOptions["presets"];
Expand Down Expand Up @@ -95,6 +97,9 @@ function run(transformFn: typeof transform, script: CompilationResult) {
if (script.type) {
scriptEl.setAttribute("type", script.type);
}
if (script.nonce) {
scriptEl.nonce = script.nonce;
}
scriptEl.text = transformCode(transformFn, script);
headEl.appendChild(scriptEl);
}
Expand Down Expand Up @@ -159,64 +164,60 @@ function loadScripts(
transformFn: typeof transform,
scripts: HTMLScriptElement[],
) {
const result: CompilationResult[] = [];
const results: CompilationResult[] = [];
const count = scripts.length;

function check() {
let script, i;

for (i = 0; i < count; i++) {
script = result[i];
for (let i = 0; i < count; i++) {
const result = results[i];

if (script.loaded && !script.executed) {
script.executed = true;
run(transformFn, script);
} else if (!script.loaded && !script.error && !script.async) {
if (result.loaded && !result.executed) {
result.executed = true;
run(transformFn, result);
} else if (!result.loaded && !result.error && !result.async) {
break;
}
}
}

scripts.forEach((script, i) => {
const scriptData = {
for (let i = 0; i < count; i++) {
const script = scripts[i];
const result: CompilationResult = {
// script.async is always true for non-JavaScript script tags
async: script.hasAttribute("async"),
type: script.getAttribute("data-type"),
nonce: script.nonce,
error: false,
executed: false,
plugins: getPluginsOrPresetsFromScript(script, "data-plugins"),
presets: getPluginsOrPresetsFromScript(script, "data-presets"),
loaded: false,
url: null,
content: null,
};
results.push(result);

if (script.src) {
result[i] = {
...scriptData,
content: null,
loaded: false,
url: script.src,
};
result.url = script.src;

load(
script.src,
content => {
result[i].loaded = true;
result[i].content = content;
result.loaded = true;
result.content = content;
check();
},
() => {
result[i].error = true;
result.error = true;
check();
},
);
} else {
result[i] = {
...scriptData,
content: script.innerHTML,
loaded: true,
url: script.getAttribute("data-module") || null,
};
result.url = script.getAttribute("data-module") || null;
result.loaded = true;
result.content = script.innerHTML;
}
});
}

check();
}
Expand Down
57 changes: 57 additions & 0 deletions packages/babel-standalone/test/transform-script-tags.test.js
View file
Open in desktop
@@ -0,0 +1,57 @@
import fs from "fs";
import { createRequire } from "module";
import { describeGte } from "$repo-utils";
const require = createRequire(import.meta.url);

describeGte("16.0.0")("transformScriptTags", () => {
let standaloneSource;
let JSDOM;
beforeAll(async () => {
standaloneSource = fs.readFileSync(
new URL("../babel.js", import.meta.url),
"utf8",
);
JSDOM = require("jsdom").JSDOM;
});
it("should transform script element with type 'text/babel'", () => {
const dom = new JSDOM(
`<!DOCTYPE html><head><script>${standaloneSource}</script><script type="text/babel">globalThis ?? window</script></head>`,
{ runScripts: "dangerously" },
);
return new Promise((resolve, reject) => {
dom.window.addEventListener("DOMContentLoaded", () => {
try {
const transformedScriptElement =
dom.window.document.head.children.item(2);
expect(transformedScriptElement.getAttribute("type")).toBeNull();
expect(transformedScriptElement.innerHTML).toContain(
"globalThis !== null && globalThis !== void 0 ? globalThis : window",
);
resolve();
} catch (err) {
reject(err);
}
});
});
});
it("should pass through the nonce attribute to the transformed script element", () => {
const nonceAttribute = "nonce_example";

const dom = new JSDOM(
`<!DOCTYPE html><head><script>${standaloneSource}</script><script type="text/babel" nonce="${nonceAttribute}">globalThis ?? window</script></head>`,
{ runScripts: "dangerously" },
);
return new Promise((resolve, reject) => {
dom.window.addEventListener("DOMContentLoaded", () => {
try {
const transformedScriptElement =
dom.window.document.head.children.item(2);
expect(transformedScriptElement.nonce).toBe(nonceAttribute);
resolve();
} catch (err) {
reject(err);
}
});
});
});
});
3 changes: 3 additions & 0 deletions scripts/repo-utils/index.cjs
View file
Open in desktop
Expand Up @@ -44,6 +44,9 @@ if (typeof jest !== "undefined") {
exports.describeESM = USE_ESM ? describe : dummy;
exports.describeBabel7 = process.env.BABEL_8_BREAKING ? dummy : describe;
exports.describeBabel8 = process.env.BABEL_8_BREAKING ? describe : dummy;
exports.describeGte = function (version) {
return semver.gte(process.version, version) ? describe : describe.skip;
};
}

exports.commonJS = function (metaUrl) {
Expand Down
1 change: 1 addition & 0 deletions scripts/repo-utils/index.d.ts
View file
Open in desktop
Expand Up @@ -17,3 +17,4 @@ export const itBabel7NoESM: jest.It;
export const itDummy: jest.It;
export const describeBabel7: jest.Describe;
export const describeBabel8: jest.Describe;
export function describeGte(version: string): jest.Describe;