Make assets unique (#518)

* Make all assets unique

All CSS and JavaScript files have unique names now. I also moved the
login to the /login path in order to ensure the HTML for each page is
also unique.

* Explicitly include assets to cache
This commit is contained in:
Asher 2019-04-17 17:18:20 -05:00 committed by Kyle Carberry
parent e0f1787ce6
commit cc8c7e2cee
12 changed files with 169 additions and 152 deletions

View File

@ -67,21 +67,21 @@ const buildServerBinaryCopy = register("build:server:binary:copy", async (runner
} }
fse.copySync(defaultExtensionsPath, path.join(cliBuildPath, "extensions")); fse.copySync(defaultExtensionsPath, path.join(cliBuildPath, "extensions"));
fs.writeFileSync(path.join(cliBuildPath, "bootstrap-fork.js.gz"), zlib.gzipSync(fs.readFileSync(bootstrapForkPath))); fs.writeFileSync(path.join(cliBuildPath, "bootstrap-fork.js.gz"), zlib.gzipSync(fs.readFileSync(bootstrapForkPath)));
const cpDir = (dir: string, subdir: "auth" | "unauth", rootPath: string): void => { const cpDir = (dir: string, rootPath: string, subdir?: "login"): void => {
const stat = fs.statSync(dir); const stat = fs.statSync(dir);
if (stat.isDirectory()) { if (stat.isDirectory()) {
const paths = fs.readdirSync(dir); const paths = fs.readdirSync(dir);
paths.forEach((p) => cpDir(path.join(dir, p), subdir, rootPath)); paths.forEach((p) => cpDir(path.join(dir, p), rootPath, subdir));
} else if (stat.isFile()) { } else if (stat.isFile()) {
const newPath = path.join(cliBuildPath, "web", subdir, path.relative(rootPath, dir)); const newPath = path.join(cliBuildPath, "web", subdir || "", path.relative(rootPath, dir));
fse.mkdirpSync(path.dirname(newPath)); fse.mkdirpSync(path.dirname(newPath));
fs.writeFileSync(newPath + ".gz", zlib.gzipSync(fs.readFileSync(dir))); fs.writeFileSync(newPath + ".gz", zlib.gzipSync(fs.readFileSync(dir)));
} else { } else {
// Nothing // Nothing
} }
}; };
cpDir(webOutputPath, "auth", webOutputPath); cpDir(webOutputPath, webOutputPath);
cpDir(browserAppOutputPath, "unauth", browserAppOutputPath); cpDir(browserAppOutputPath, browserAppOutputPath, "login");
fse.mkdirpSync(path.join(cliBuildPath, "dependencies")); fse.mkdirpSync(path.join(cliBuildPath, "dependencies"));
fse.copySync(ripgrepPath, path.join(cliBuildPath, "dependencies", "rg")); fse.copySync(ripgrepPath, path.join(cliBuildPath, "dependencies", "rg"));
}); });

View File

@ -28,7 +28,9 @@ if (!form) {
form.addEventListener("submit", (e) => { form.addEventListener("submit", (e) => {
e.preventDefault(); e.preventDefault();
document.cookie = `password=${password.value}`; document.cookie = `password=${password.value}; `
+ `path=${location.pathname.replace(/\/login\/?$/, "/")}; `
+ `domain=${location.hostname}`;
location.reload(); location.reload();
}); });

View File

@ -7,11 +7,10 @@ const root = path.resolve(__dirname, "../../..");
module.exports = merge( module.exports = merge(
require(path.join(root, "scripts/webpack.client.config.js"))({ require(path.join(root, "scripts/webpack.client.config.js"))({
entry: path.join(root, "packages/app/browser/src/app.ts"), dirname: __dirname,
template: path.join(root, "packages/app/browser/src/app.html"), entry: path.join(__dirname, "src/app.ts"),
name: "login",
template: path.join(__dirname, "src/app.html"),
}), { }), {
output: {
path: path.join(__dirname, "out"),
},
}, },
); );

View File

@ -5,15 +5,12 @@ const root = path.resolve(__dirname, "../..");
module.exports = merge( module.exports = merge(
require(path.join(root, "scripts/webpack.node.config.js"))({ require(path.join(root, "scripts/webpack.node.config.js"))({
// Options. dirname: __dirname,
name: "dns",
}), { }), {
externals: { externals: {
"node-named": "commonjs node-named", "node-named": "commonjs node-named",
}, },
output: {
path: path.join(__dirname, "out"),
filename: "main.js",
},
entry: [ entry: [
"./packages/dns/src/dns.ts" "./packages/dns/src/dns.ts"
], ],

View File

@ -216,13 +216,6 @@ const bold = (text: string | number): string | number => {
allowHttp: options.allowHttp, allowHttp: options.allowHttp,
bypassAuth: options.noAuth, bypassAuth: options.noAuth,
registerMiddleware: (app): void => { registerMiddleware: (app): void => {
app.use((req, res, next) => {
res.on("finish", () => {
logger.trace(`\u001B[1m${req.method} ${res.statusCode} \u001B[0m${req.url}`, field("host", req.hostname), field("ip", req.ip));
});
next();
});
// If we're not running from the binary and we aren't serving the static // If we're not running from the binary and we aren't serving the static
// pre-built version, use webpack to serve the web files. // pre-built version, use webpack to serve the web files.
if (!isCli && !serveStatic) { if (!isCli && !serveStatic) {

View File

@ -18,6 +18,7 @@ import * as os from "os";
import * as path from "path"; import * as path from "path";
import * as pem from "pem"; import * as pem from "pem";
import * as util from "util"; import * as util from "util";
import * as url from "url";
import * as ws from "ws"; import * as ws from "ws";
import { buildDir } from "./constants"; import { buildDir } from "./constants";
import { createPortScanner } from "./portScanner"; import { createPortScanner } from "./portScanner";
@ -140,13 +141,13 @@ export const createApp = async (options: CreateAppOptions): Promise<{
}; };
const portScanner = createPortScanner(); const portScanner = createPortScanner();
wss.on("connection", (ws, req) => { wss.on("connection", async (ws, req) => {
if (req.url && req.url.startsWith("/tunnel")) { if (req.url && req.url.startsWith("/tunnel")) {
try { try {
const rawPort = req.url.split("/").pop(); const rawPort = req.url.split("/").pop();
const port = Number.parseInt(rawPort!, 10); const port = Number.parseInt(rawPort!, 10);
handleTunnel(ws, port); await handleTunnel(ws, port);
} catch (ex) { } catch (ex) {
ws.close(TunnelCloseCode.Error, ex.toString()); ws.close(TunnelCloseCode.Error, ex.toString());
} }
@ -189,31 +190,70 @@ export const createApp = async (options: CreateAppOptions): Promise<{
new Server(connection, options.serverOptions); new Server(connection, options.serverOptions);
}); });
const redirect = (
req: express.Request, res: express.Response,
to: string = "", from: string = "",
code: number = 302, protocol: string = req.protocol,
): void => {
const currentUrl = `${protocol}://${req.headers.host}${req.originalUrl}`;
const newUrl = url.parse(currentUrl);
if (from && newUrl.pathname) {
newUrl.pathname = newUrl.pathname.replace(new RegExp(`\/${from}\/?$`), "/");
}
if (to) {
newUrl.pathname = (newUrl.pathname || "").replace(/\/$/, "") + `/${to}`;
}
newUrl.path = undefined; // Path is not necessary for format().
const newUrlString = url.format(newUrl);
logger.trace(`Redirecting from ${currentUrl} to ${newUrlString}`);
return res.redirect(code, newUrlString);
};
const baseDir = buildDir || path.join(__dirname, ".."); const baseDir = buildDir || path.join(__dirname, "..");
const authStaticFunc = expressStaticGzip(path.join(baseDir, "build/web/auth")); const staticGzip = expressStaticGzip(path.join(baseDir, "build/web"));
const unauthStaticFunc = expressStaticGzip(path.join(baseDir, "build/web/unauth"));
app.use((req, res, next) => { app.use((req, res, next) => {
logger.trace(`\u001B[1m${req.method} ${res.statusCode} \u001B[0m${req.originalUrl}`, field("host", req.hostname), field("ip", req.ip));
// Force HTTPS unless allowing HTTP.
if (!isEncrypted(req.socket) && !options.allowHttp) { if (!isEncrypted(req.socket) && !options.allowHttp) {
return res.redirect(301, `https://${req.headers.host!}${req.path}`); return redirect(req, res, "", "", 301, "https");
} }
if (isAuthed(req)) {
// We can serve the actual VSCode bin
authStaticFunc(req, res, next);
} else {
// Serve only the unauthed version
unauthStaticFunc(req, res, next);
}
});
// @ts-ignore
app.use((err, req, res, next) => {
next(); next();
}); });
app.get("/ping", (req, res) => {
// @ts-ignore
app.use((err, _req, _res, next) => {
logger.error(err.message);
next();
});
// If not authenticated, redirect to the login page.
app.get("/", (req, res, next) => {
if (!isAuthed(req)) {
return redirect(req, res, "login");
}
next();
});
// If already authenticated, redirect back to the root.
app.get("/login", (req, res, next) => {
if (isAuthed(req)) {
return redirect(req, res, "", "login");
}
next();
});
// For getting general server data.
app.get("/ping", (_req, res) => {
res.json({ res.json({
hostname: os.hostname(), hostname: os.hostname(),
}); });
}); });
// For getting a resource on disk.
app.get("/resource/:url(*)", async (req, res) => { app.get("/resource/:url(*)", async (req, res) => {
if (!ensureAuthed(req, res)) { if (!ensureAuthed(req, res)) {
return; return;
@ -254,6 +294,8 @@ export const createApp = async (options: CreateAppOptions): Promise<{
res.end(); res.end();
} }
}); });
// For writing a resource to disk.
app.post("/resource/:url(*)", async (req, res) => { app.post("/resource/:url(*)", async (req, res) => {
if (!ensureAuthed(req, res)) { if (!ensureAuthed(req, res)) {
return; return;
@ -282,6 +324,9 @@ export const createApp = async (options: CreateAppOptions): Promise<{
} }
}); });
// Everything else just pulls from the static build directory.
app.use(staticGzip);
return { return {
express: app, express: app,
server, server,

View File

@ -6,11 +6,10 @@ const root = path.resolve(__dirname, "../..");
module.exports = merge( module.exports = merge(
require(path.join(root, "scripts/webpack.node.config.js"))({ require(path.join(root, "scripts/webpack.node.config.js"))({
// Config options. dirname: __dirname,
}), { }), {
output: { output: {
filename: "cli.js", filename: "cli.js",
path: path.join(__dirname, "out"),
libraryTarget: "commonjs", libraryTarget: "commonjs",
}, },
node: { node: {

View File

@ -7,6 +7,7 @@ const vsFills = path.join(root, "packages/vscode/src/fill");
module.exports = merge( module.exports = merge(
require(path.join(root, "scripts/webpack.node.config.js"))({ require(path.join(root, "scripts/webpack.node.config.js"))({
dirname: __dirname,
typescriptCompilerOptions: { typescriptCompilerOptions: {
target: "es6", target: "es6",
}, },
@ -15,7 +16,6 @@ module.exports = merge(
mode: "development", mode: "development",
output: { output: {
chunkFilename: "[name].bundle.js", chunkFilename: "[name].bundle.js",
path: path.resolve(__dirname, "out"),
publicPath: "/", publicPath: "/",
filename: "bootstrap-fork.js", filename: "bootstrap-fork.js",
libraryTarget: "commonjs", libraryTarget: "commonjs",

View File

@ -23,15 +23,15 @@
return; return;
} }
document.body.style.background = bg; document.body.style.background = bg;
})(); })();
// Check that service workers are registered // Check that service workers are registered
if ("serviceWorker" in navigator) { if ("serviceWorker" in navigator) {
// Use the window load event to keep the page load performant // Use the window load event to keep the page load performant
window.addEventListener("load", () => { window.addEventListener("load", () => {
navigator.serviceWorker.register("/service-worker.js"); navigator.serviceWorker.register("/service-worker.js");
}); });
} }
</script> </script>
</body> </body>
</html> </html>

View File

@ -7,7 +7,9 @@ const vsFills = path.join(root, "packages/vscode/src/fill");
module.exports = merge( module.exports = merge(
require(path.join(root, "scripts/webpack.client.config.js"))({ require(path.join(root, "scripts/webpack.client.config.js"))({
dirname: __dirname,
entry: path.join(root, "packages/web/src/index.ts"), entry: path.join(root, "packages/web/src/index.ts"),
name: "ide",
template: path.join(root, "packages/web/src/index.html"), template: path.join(root, "packages/web/src/index.html"),
typescriptCompilerOptions: { typescriptCompilerOptions: {
"target": "es5", "target": "es5",
@ -15,11 +17,6 @@ module.exports = merge(
}, },
}, },
), { ), {
output: {
chunkFilename: "[name]-[hash:6].bundle.js",
path: path.join(__dirname, "out"),
filename: "[hash:6].bundle.js",
},
node: { node: {
module: "empty", module: "empty",
crypto: "empty", crypto: "empty",

View File

@ -7,102 +7,82 @@ const HtmlWebpackPlugin = require("html-webpack-plugin");
const WebpackPwaManifest = require("webpack-pwa-manifest"); const WebpackPwaManifest = require("webpack-pwa-manifest");
const { GenerateSW } = require("workbox-webpack-plugin"); const { GenerateSW } = require("workbox-webpack-plugin");
// const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
const root = path.join(__dirname, ".."); const root = path.join(__dirname, "..");
const prod = process.env.NODE_ENV === "production" || process.env.CI === "true"; const prod = process.env.NODE_ENV === "production" || process.env.CI === "true";
const cachePattern = /\.(?:png|jpg|jpeg|svg|css|js|ttf|woff|eot|woff2|wasm)$/;
module.exports = (options = {}) => merge( module.exports = (options = {}) => merge(
require("./webpack.general.config")(options), { require("./webpack.general.config")(options), {
devtool: prod ? "none" : "cheap-module-eval-source-map", devtool: prod ? "none" : "cheap-module-eval-source-map",
mode: prod ? "production" : "development", mode: prod ? "production" : "development",
entry: prod ? options.entry : [ entry: prod ? options.entry : [
"webpack-hot-middleware/client?reload=true&quiet=true", "webpack-hot-middleware/client?reload=true&quiet=true",
options.entry, options.entry,
], ],
module: { module: {
rules: [{ rules: [{
test: /\.s?css$/, test: /\.s?css$/,
// This is required otherwise it'll fail to resolve CSS in common. // This is required otherwise it'll fail to resolve CSS in common.
include: root, include: root,
use: [{ use: [{
loader: MiniCssExtractPlugin.loader, loader: MiniCssExtractPlugin.loader,
}, { }, {
loader: "css-loader", loader: "css-loader",
}, { }, {
loader: "sass-loader", loader: "sass-loader",
}], }],
}, { }, {
test: /\.(png|ttf|woff|eot|woff2)$/, test: /\.(png|ttf|woff|eot|woff2)$/,
use: [{ use: [{
loader: "file-loader", loader: "file-loader",
options: { options: {
name: "[path][name].[ext]", name: "[path][name].[ext]",
}, },
}], }],
}, { }, {
test: /\.svg$/, test: /\.svg$/,
loader: 'url-loader' loader: 'url-loader'
}], }],
}, },
plugins: [ plugins: [
new MiniCssExtractPlugin({ new MiniCssExtractPlugin({
filename: "[name].css", chunkFilename: `${options.name || "client"}.[name].[hash:6].css`,
chunkFilename: "[id].css" filename: `${options.name || "client"}.[name].[hash:6].css`
}), }),
new HtmlWebpackPlugin({ new HtmlWebpackPlugin({
template: options.template template: options.template
}), }),
new PreloadWebpackPlugin({ new PreloadWebpackPlugin({
rel: "preload", rel: "preload",
as: "script" as: "script"
}), }),
new WebpackPwaManifest({ new WebpackPwaManifest({
name: "Coder", name: "Coder",
short_name: "Coder", short_name: "Coder",
description: "Run VS Code on a remote server", description: "Run VS Code on a remote server",
background_color: "#e5e5e5", background_color: "#e5e5e5",
icons: [ icons: [{
{ src: path.join(root, "packages/web/assets/logo.png"),
src: path.join(root, "packages/web/assets/logo.png"), sizes: [96, 128, 192, 256, 384],
sizes: [96, 128, 192, 256, 384] }],
} })
] ].concat(prod ? [
}) new GenerateSW({
].concat(prod ? [ include: [cachePattern],
new GenerateSW({ runtimeCaching: [{
exclude: [/\.map$/, /^manifest.*\.js$/, /\.html$/], urlPattern: cachePattern,
runtimeCaching: [ handler: "StaleWhileRevalidate",
{ options: {
urlPattern: new RegExp("^(?!.*(html))"), cacheName: "code-server",
handler: "StaleWhileRevalidate", expiration: {
options: { maxAgeSeconds: 86400,
cacheName: "code-server", },
expiration: { cacheableResponse: {
maxAgeSeconds: 86400 statuses: [0, 200],
}, },
cacheableResponse: { },
statuses: [0, 200] },
} ]}),
} ] : [new webpack.HotModuleReplacementPlugin()]),
} target: "web"
// Network first caching is also possible. });
/*{
urlPattern: new RegExp("^(?!.*(html))"),
handler: "NetworkFirst",
options: {
networkTimeoutSeconds: 4,
cacheName: "code-server",
expiration: {
maxAgeSeconds: 86400,
},
cacheableResponse: {
statuses: [0, 200],
},
},
}*/
]
})
] : [new webpack.HotModuleReplacementPlugin()]),
target: "web"
});

View File

@ -13,6 +13,11 @@ module.exports = (options = {}) => ({
externals: { externals: {
fsevents: "fsevents", fsevents: "fsevents",
}, },
output: {
path: path.join(options.dirname || __dirname, "out"),
chunkFilename: `${options.name || "general"}.[name].[hash:6].js`,
filename: `${options.name || "general"}.[name].[hash:6].js`
},
module: { module: {
rules: [{ rules: [{
loader: "string-replace-loader", loader: "string-replace-loader",