9ebebfb4cc
The previous sprockets implementation was including admin-specific JS in the plugin's main JS file, which would be served to all users regardless of admin status. This commit achieves the same result under the ember-cli plugin asset compiler with one difference: the admin js is compiled into a separate file. That means that in future, we'll be able to make it loaded only for admins. For now though, it's loaded for everyone, just like before.
493 lines
14 KiB
JavaScript
493 lines
14 KiB
JavaScript
"use strict";
|
|
|
|
const express = require("express");
|
|
const fetch = require("node-fetch");
|
|
const { encode } = require("html-entities");
|
|
const cleanBaseURL = require("clean-base-url");
|
|
const path = require("path");
|
|
const fs = require("fs");
|
|
const fsPromises = fs.promises;
|
|
const { JSDOM } = require("jsdom");
|
|
const { shouldLoadPluginTestJs } = require("discourse/lib/plugin-js");
|
|
const { Buffer } = require("node:buffer");
|
|
const { cwd, env } = require("node:process");
|
|
|
|
// via https://stackoverflow.com/a/6248722/165668
|
|
function generateUID() {
|
|
let firstPart = (Math.random() * 46656) | 0; // eslint-disable-line no-bitwise
|
|
let secondPart = (Math.random() * 46656) | 0; // eslint-disable-line no-bitwise
|
|
firstPart = ("000" + firstPart.toString(36)).slice(-3);
|
|
secondPart = ("000" + secondPart.toString(36)).slice(-3);
|
|
return firstPart + secondPart;
|
|
}
|
|
|
|
function htmlTag(buffer, bootstrap) {
|
|
let classList = "";
|
|
if (bootstrap.html_classes) {
|
|
classList = ` class="${bootstrap.html_classes}"`;
|
|
}
|
|
buffer.push(`<html lang="${bootstrap.html_lang}"${classList}>`);
|
|
}
|
|
|
|
function head(buffer, bootstrap, headers, baseURL) {
|
|
if (bootstrap.csrf_token) {
|
|
buffer.push(`<meta name="csrf-param" content="authenticity_token">`);
|
|
buffer.push(`<meta name="csrf-token" content="${bootstrap.csrf_token}">`);
|
|
}
|
|
|
|
if (bootstrap.theme_id) {
|
|
buffer.push(
|
|
`<meta name="discourse_theme_id" content="${bootstrap.theme_id}">`
|
|
);
|
|
}
|
|
|
|
if (bootstrap.theme_color) {
|
|
buffer.push(`<meta name="theme-color" content="${bootstrap.theme_color}">`);
|
|
}
|
|
|
|
if (bootstrap.authentication_data) {
|
|
buffer.push(
|
|
`<meta id="data-authentication" data-authentication-data="${encode(
|
|
bootstrap.authentication_data
|
|
)}">`
|
|
);
|
|
}
|
|
|
|
let setupData = "";
|
|
Object.keys(bootstrap.setup_data).forEach((sd) => {
|
|
let val = bootstrap.setup_data[sd];
|
|
if (val) {
|
|
if (Array.isArray(val)) {
|
|
val = JSON.stringify(val);
|
|
} else {
|
|
val = val.toString();
|
|
}
|
|
setupData += ` data-${sd.replace(/\_/g, "-")}="${encode(val)}"`;
|
|
}
|
|
});
|
|
buffer.push(`<meta id="data-discourse-setup"${setupData} />`);
|
|
|
|
if (bootstrap.preloaded.currentUser) {
|
|
const user = JSON.parse(bootstrap.preloaded.currentUser);
|
|
let { admin, staff } = user;
|
|
|
|
if (staff) {
|
|
buffer.push(`<script defer src="${baseURL}assets/admin.js"></script>`);
|
|
}
|
|
|
|
if (admin) {
|
|
buffer.push(`<script defer src="${baseURL}assets/wizard.js"></script>`);
|
|
}
|
|
}
|
|
|
|
bootstrap.plugin_js.forEach((src) =>
|
|
buffer.push(`<script defer src="${src}"></script>`)
|
|
);
|
|
|
|
buffer.push(bootstrap.theme_html.translations);
|
|
buffer.push(bootstrap.theme_html.js);
|
|
buffer.push(bootstrap.theme_html.head_tag);
|
|
buffer.push(bootstrap.html.before_head_close);
|
|
}
|
|
|
|
function localeScript(buffer, bootstrap) {
|
|
buffer.push(`<script defer src="${bootstrap.locale_script}"></script>`);
|
|
}
|
|
|
|
function beforeScriptLoad(buffer, bootstrap) {
|
|
buffer.push(bootstrap.html.before_script_load);
|
|
localeScript(buffer, bootstrap);
|
|
(bootstrap.extra_locales || []).forEach((l) =>
|
|
buffer.push(`<script defer src="${l}"></script>`)
|
|
);
|
|
}
|
|
|
|
function discoursePreloadStylesheets(buffer, bootstrap) {
|
|
(bootstrap.stylesheets || []).forEach((s) => {
|
|
let link = `<link rel="preload" as="style" href="${s.href}">`;
|
|
buffer.push(link);
|
|
});
|
|
}
|
|
|
|
function discourseStylesheets(buffer, bootstrap) {
|
|
(bootstrap.stylesheets || []).forEach((s) => {
|
|
let attrs = [];
|
|
if (s.media) {
|
|
attrs.push(`media="${s.media}"`);
|
|
}
|
|
if (s.target) {
|
|
attrs.push(`data-target="${s.target}"`);
|
|
}
|
|
if (s.theme_id) {
|
|
attrs.push(`data-theme-id="${s.theme_id}"`);
|
|
}
|
|
if (s.class) {
|
|
attrs.push(`class="${s.class}"`);
|
|
}
|
|
let link = `<link rel="stylesheet" type="text/css" href="${
|
|
s.href
|
|
}" ${attrs.join(" ")}>`;
|
|
buffer.push(link);
|
|
});
|
|
}
|
|
|
|
function body(buffer, bootstrap) {
|
|
buffer.push(bootstrap.theme_html.header);
|
|
buffer.push(bootstrap.html.header);
|
|
}
|
|
|
|
function bodyFooter(buffer, bootstrap, headers) {
|
|
buffer.push(bootstrap.theme_html.body_tag);
|
|
buffer.push(bootstrap.html.before_body_close);
|
|
|
|
let v = generateUID();
|
|
buffer.push(`
|
|
<script
|
|
async
|
|
type="text/javascript"
|
|
id="mini-profiler"
|
|
src="/mini-profiler-resources/includes.js?v=${v}"
|
|
data-css-url="/mini-profiler-resources/includes.css?v=${v}"
|
|
data-version="${v}"
|
|
data-path="/mini-profiler-resources/"
|
|
data-horizontal-position="right"
|
|
data-vertical-position="top"
|
|
data-trivial="false"
|
|
data-children="false"
|
|
data-max-traces="20"
|
|
data-controls="false"
|
|
data-total-sql-count="false"
|
|
data-authorized="true"
|
|
data-toggle-shortcut="alt+p"
|
|
data-start-hidden="false"
|
|
data-collapse-results="true"
|
|
data-html-container="body"
|
|
data-hidden-custom-fields="x"
|
|
data-ids="${headers.get("x-miniprofiler-ids")}"
|
|
></script>
|
|
`);
|
|
}
|
|
|
|
function hiddenLoginForm(buffer, bootstrap) {
|
|
if (!bootstrap.preloaded.currentUser) {
|
|
buffer.push(`
|
|
<form id='hidden-login-form' method="post" action="${bootstrap.login_path}" style="display: none;">
|
|
<input name="username" type="text" id="signin_username">
|
|
<input name="password" type="password" id="signin_password">
|
|
<input name="redirect" type="hidden">
|
|
<input type="submit" id="signin-button">
|
|
</form>
|
|
`);
|
|
}
|
|
}
|
|
|
|
function preloaded(buffer, bootstrap) {
|
|
buffer.push(
|
|
`<div class="hidden" id="data-preloaded" data-preloaded="${encode(
|
|
JSON.stringify(bootstrap.preloaded)
|
|
)}"></div>`
|
|
);
|
|
}
|
|
|
|
const BUILDERS = {
|
|
"html-tag": htmlTag,
|
|
"before-script-load": beforeScriptLoad,
|
|
"discourse-preload-stylesheets": discoursePreloadStylesheets,
|
|
head,
|
|
body,
|
|
"discourse-stylesheets": discourseStylesheets,
|
|
"hidden-login-form": hiddenLoginForm,
|
|
preloaded,
|
|
"body-footer": bodyFooter,
|
|
"locale-script": localeScript,
|
|
};
|
|
|
|
function replaceIn(bootstrap, template, id, headers, baseURL) {
|
|
let buffer = [];
|
|
BUILDERS[id](buffer, bootstrap, headers, baseURL);
|
|
let contents = buffer.filter((b) => b && b.length > 0).join("\n");
|
|
|
|
return template.replace(`<bootstrap-content key="${id}">`, contents);
|
|
}
|
|
|
|
function extractPreloadJson(html) {
|
|
const dom = new JSDOM(html);
|
|
const dataElement = dom.window.document.querySelector("#data-preloaded");
|
|
|
|
if (!dataElement || !dataElement.dataset) {
|
|
return;
|
|
}
|
|
|
|
return dataElement.dataset.preloaded;
|
|
}
|
|
|
|
async function applyBootstrap(bootstrap, template, response, baseURL, preload) {
|
|
bootstrap.preloaded = Object.assign(JSON.parse(preload), bootstrap.preloaded);
|
|
|
|
Object.keys(BUILDERS).forEach((id) => {
|
|
template = replaceIn(bootstrap, template, id, response.headers, baseURL);
|
|
});
|
|
return template;
|
|
}
|
|
|
|
async function buildFromBootstrap(proxy, baseURL, req, response, preload) {
|
|
try {
|
|
const template = await fsPromises.readFile(
|
|
path.join(cwd(), "dist", "index.html"),
|
|
"utf8"
|
|
);
|
|
|
|
let url = new URL(`${proxy}${baseURL}bootstrap.json`);
|
|
url.searchParams.append("for_url", req.url);
|
|
|
|
const forUrlSearchParams = new URL(req.url, "https://dummy-origin.invalid")
|
|
.searchParams;
|
|
|
|
const mobileView = forUrlSearchParams.get("mobile_view");
|
|
if (mobileView) {
|
|
url.searchParams.append("mobile_view", mobileView);
|
|
}
|
|
|
|
const reqUrlSafeMode = forUrlSearchParams.get("safe_mode");
|
|
if (reqUrlSafeMode) {
|
|
url.searchParams.append("safe_mode", reqUrlSafeMode);
|
|
}
|
|
|
|
const reqUrlPreviewThemeId = forUrlSearchParams.get("preview_theme_id");
|
|
if (reqUrlPreviewThemeId) {
|
|
url.searchParams.append("preview_theme_id", reqUrlPreviewThemeId);
|
|
}
|
|
|
|
const res = await fetch(url, { headers: req.headers });
|
|
const json = await res.json();
|
|
|
|
return applyBootstrap(json.bootstrap, template, response, baseURL, preload);
|
|
} catch (error) {
|
|
throw new Error(
|
|
`Could not get ${proxy}${baseURL}bootstrap.json\n\n${error}`
|
|
);
|
|
}
|
|
}
|
|
|
|
async function handleRequest(proxy, baseURL, req, res) {
|
|
// x-forwarded-host is used in e.g. GitHub CodeSpaces
|
|
let originalHost = req.headers["x-forwarded-host"] || req.headers.host;
|
|
|
|
if (env["FORWARD_HOST"] === "true") {
|
|
if (/^localhost(\:|$)/.test(originalHost)) {
|
|
// Can't access default site in multisite via "localhost", redirect to 127.0.0.1
|
|
res.redirect(
|
|
307,
|
|
`http://${originalHost.replace("localhost", "127.0.0.1")}${req.path}`
|
|
);
|
|
return;
|
|
} else {
|
|
req.headers.host = originalHost;
|
|
}
|
|
} else {
|
|
req.headers.host = new URL(proxy).host;
|
|
}
|
|
|
|
if (req.headers["Origin"]) {
|
|
req.headers["Origin"] = req.headers["Origin"]
|
|
.replace(req.headers.host, originalHost)
|
|
.replace(/^https/, "http");
|
|
}
|
|
|
|
if (req.headers["Referer"]) {
|
|
req.headers["Referer"] = req.headers["Referer"]
|
|
.replace(req.headers.host, originalHost)
|
|
.replace(/^https/, "http");
|
|
}
|
|
|
|
let url = `${proxy}${req.path}`;
|
|
const queryLoc = req.url.indexOf("?");
|
|
if (queryLoc !== -1) {
|
|
url += req.url.slice(queryLoc);
|
|
}
|
|
|
|
if (req.method === "GET") {
|
|
req.headers["X-Discourse-Ember-CLI"] = "true";
|
|
}
|
|
|
|
const response = await fetch(url, {
|
|
method: req.method,
|
|
body: /GET|HEAD/.test(req.method) ? null : req.body,
|
|
headers: req.headers,
|
|
redirect: "manual",
|
|
});
|
|
|
|
response.headers.forEach((value, header) => {
|
|
res.set(header, value);
|
|
});
|
|
res.set("content-encoding", null);
|
|
|
|
const location = response.headers.get("location");
|
|
if (location) {
|
|
const newLocation = location.replace(proxy, `http://${originalHost}`);
|
|
res.set("location", newLocation);
|
|
}
|
|
|
|
const csp = response.headers.get("content-security-policy");
|
|
if (csp) {
|
|
const emberCliAdditions = [
|
|
`http://${originalHost}/assets/`,
|
|
`http://${originalHost}/ember-cli-live-reload.js`,
|
|
`http://${originalHost}/_lr/`,
|
|
].join(" ");
|
|
|
|
const newCSP = csp
|
|
.replaceAll(proxy, `http://${originalHost}`)
|
|
.replaceAll("script-src ", `script-src ${emberCliAdditions} `);
|
|
|
|
res.set("content-security-policy", newCSP);
|
|
}
|
|
|
|
const contentType = response.headers.get("content-type");
|
|
const isHTML = contentType?.startsWith("text/html");
|
|
|
|
res.status(response.status);
|
|
|
|
if (isHTML) {
|
|
const responseText = await response.text();
|
|
const preloadJson = isHTML ? extractPreloadJson(responseText) : null;
|
|
|
|
if (preloadJson) {
|
|
const html = await buildFromBootstrap(
|
|
proxy,
|
|
baseURL,
|
|
req,
|
|
response,
|
|
extractPreloadJson(responseText)
|
|
);
|
|
res.set("content-type", "text/html");
|
|
res.send(html);
|
|
} else {
|
|
res.send(responseText);
|
|
}
|
|
} else {
|
|
res.send(Buffer.from(await response.arrayBuffer()));
|
|
}
|
|
}
|
|
|
|
module.exports = {
|
|
name: require("./package").name,
|
|
|
|
isDevelopingAddon() {
|
|
return true;
|
|
},
|
|
|
|
contentFor(type, config) {
|
|
if (shouldLoadPluginTestJs() && type === "test-plugin-js") {
|
|
const scripts = [];
|
|
|
|
if (process.env.EMBER_CLI_PLUGIN_ASSETS !== "0") {
|
|
const pluginInfos = this.app.project
|
|
.findAddonByName("discourse-plugins")
|
|
.pluginInfos();
|
|
|
|
for (const { name, hasJs, hasAdminJs } of pluginInfos) {
|
|
if (hasJs) {
|
|
scripts.push({ src: `plugins/${name}.js`, name });
|
|
}
|
|
|
|
if (fs.existsSync(`../plugins/${name}_extras.js.erb`)) {
|
|
scripts.push({ src: `plugins/${name}_extras.js`, name });
|
|
}
|
|
|
|
if (hasAdminJs) {
|
|
scripts.push({ src: `plugins/${name}_admin.js`, name });
|
|
}
|
|
}
|
|
} else {
|
|
scripts.push({
|
|
src: "discourse/tests/active-plugins.js",
|
|
name: "_all",
|
|
});
|
|
scripts.push({ src: "admin-plugins.js", name: "_admin" });
|
|
}
|
|
|
|
return scripts
|
|
.map(
|
|
({ src, name }) =>
|
|
`<script src="${config.rootURL}assets/${src}" data-discourse-plugin="${name}"></script>`
|
|
)
|
|
.join("\n");
|
|
} else if (shouldLoadPluginTestJs() && type === "test-plugin-tests-js") {
|
|
if (process.env.EMBER_CLI_PLUGIN_ASSETS !== "0") {
|
|
return this.app.project
|
|
.findAddonByName("discourse-plugins")
|
|
.pluginInfos()
|
|
.filter(({ hasTests }) => hasTests)
|
|
.map(
|
|
({ name }) =>
|
|
`<script src="${config.rootURL}assets/plugins/test/${name}_tests.js" data-discourse-plugin="${name}"></script>`
|
|
)
|
|
.join("\n");
|
|
} else {
|
|
return `<script id="plugin-test-script" src="${config.rootURL}assets/discourse/tests/plugin-tests.js" data-discourse-plugin="_all"></script>`;
|
|
}
|
|
}
|
|
},
|
|
|
|
serverMiddleware(config) {
|
|
const app = config.app;
|
|
let { proxy, rootURL, baseURL } = config.options;
|
|
|
|
if (!proxy) {
|
|
// eslint-disable-next-line no-console
|
|
console.error(`
|
|
Discourse can't be run without a \`--proxy\` setting, because it needs a Rails application
|
|
to serve API requests. For example:
|
|
|
|
yarn run ember serve --proxy "http://localhost:3000"\n`);
|
|
throw "--proxy argument is required";
|
|
}
|
|
|
|
baseURL = rootURL === "" ? "/" : cleanBaseURL(rootURL || baseURL);
|
|
|
|
const rawMiddleware = express.raw({ type: () => true, limit: "100mb" });
|
|
|
|
app.use(rawMiddleware, async (req, res, next) => {
|
|
try {
|
|
if (this.shouldForwardRequest(req)) {
|
|
await handleRequest(proxy, baseURL, req, res);
|
|
} else {
|
|
// Fixes issues when using e.g. "localhost" instead of loopback IP address
|
|
req.headers.host = "127.0.0.1";
|
|
}
|
|
} catch (error) {
|
|
res.send(`
|
|
<html>
|
|
<h1>Discourse Ember CLI Proxy Error</h1>
|
|
<pre><code>${error.stack}</code></pre>
|
|
</html>
|
|
`);
|
|
} finally {
|
|
if (!res.headersSent) {
|
|
return next();
|
|
}
|
|
}
|
|
});
|
|
},
|
|
|
|
shouldForwardRequest(request) {
|
|
if (
|
|
[
|
|
"/tests/index.html",
|
|
"/ember-cli-live-reload.js",
|
|
"/testem.js",
|
|
"/assets/test-i18n.js",
|
|
].includes(request.path)
|
|
) {
|
|
return false;
|
|
}
|
|
|
|
if (request.path.startsWith("/_lr/")) {
|
|
return false;
|
|
}
|
|
|
|
return true;
|
|
},
|
|
};
|