Content-Security-Policy (#4456)

* とりあえず

* Remove v-animate-css

* Remove safe.js

* じしんがない

* Revert "Remove v-animate-css"

This reverts commit 3f78642.

* v-animate-cssがCDNを参照しないように

* wss

* Tune

* a

gulpfile.js

@@ -62,7 +62,7 @@ gulp.task('cleanall', gulp.parallel('clean', cb =>
 gulp.task('build:client:script', () => {
 	// eslint-disable-next-line node/no-unpublished-require
 	const client = require('./built/meta.json');
-	return gulp.src(['./src/client/app/boot.js', './src/client/app/safe.js'])
+	return gulp.src(['./src/client/app/boot.js'])
 		.pipe(replace('VERSION', JSON.stringify(client.version)))
 		.pipe(replace('ENV', JSON.stringify(env)))
 		.pipe(replace('LANGS', JSON.stringify(Object.keys(locales))))

package.json

@@ -154,7 +154,7 @@
 		"twemoji-parser": "git+https://github.com/mei23/twemoji-parser.git#15.0.1",
 		"typescript": "4.9.5",
 		"uuid": "9.0.0",
-		"v-animate-css": "0.0.5",
+		"v-animate-css": "0.0.6",
 		"v-debounce": "0.1.2",
 		"vue": "2.7.14",
 		"vue-color": "2.8.1",

src/client/app/init.ts

@@ -298,7 +298,7 @@ library.add(
 
 Vue.use(Vuex);
 Vue.use(VueRouter);
-Vue.use(VAnimateCss);
+Vue.use(VAnimateCss, { animateCSSPath: '/assets/animate.min.css?3.5.1' });
 Vue.use(VModal);
 Vue.use(VueHotkey);
 Vue.use(VueSize);

src/client/assets/redoc.html

@@ -5,7 +5,6 @@
 		<!-- needed for adaptive design -->
 		<meta charset="utf-8"/>
 		<meta name="viewport" content="width=device-width, initial-scale=1">
-		<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,700|Roboto:300,400,700" rel="stylesheet">
 
 		<!--
 		ReDoc doesn't change outer page styles

src/server/web/index.ts

@@ -32,6 +32,19 @@ const env = process.env.NODE_ENV;
 const staticAssets = `${__dirname}/../../../assets/`;
 const client = `${__dirname}/../../client/`;
 
+const csp
+	= `base-uri 'none'; `
+	+ `default-src 'none'; `
+	+ `script-src 'self'; `
+	+ `img-src 'self' https: data: blob:; `
+	+ `media-src 'self' https:; `
+	+ `style-src 'self' 'unsafe-inline'; `
+	+ `font-src 'self'; `
+	+ `frame-src 'self' https:; `
+	+ `manifest-src 'self'; `
+	+ `connect-src 'self' data: blob: ${config.wsUrl}; `	// wssを指定しないとSafariで動かない https://github.com/w3c/webappsec-csp/issues/7#issuecomment-1086257826
+	+ `frame-ancestors 'none'`;
+
 // Init app
 const app = new Koa();
 
@@ -50,6 +63,7 @@ app.use(favicon(`${client}/assets/favicon.ico`));
 app.use(async (ctx, next) => {
 	// IFrameの中に入れられないようにする
 	ctx.set('X-Frame-Options', 'DENY');
+	ctx.set('Content-Security-Policy', csp);
 	await next();
 });
 
@@ -67,7 +81,7 @@ router.get('/static-assets/*', async ctx => {
 router.get('/assets/*', async ctx => {
 	await send(ctx as any, ctx.path, {
 		root: client,
-		maxage: ms('7 days'),
+		maxage: ctx.path === 'boot.js' ? ms('5m') : ms('7 days'),
 	});
 });
 
@@ -190,6 +204,7 @@ router.get(['/@:user', '/@:user/:sub'], async (ctx, next) => {
 			: [];
 
 		await ctx.render('user', {
+			version: config.version,
 			initialMeta: htmlescape(builded),
 			user,
 			me,
@@ -282,6 +297,7 @@ router.get('/notes/:note', async (ctx, next) => {
 	const height = 255;
 
 	await ctx.render('note', {
+		version: config.version,
 		initialMeta: htmlescape(builded),
 		note: _note,
 		summary: getNoteSummary(_note),
@@ -296,7 +312,6 @@ router.get('/notes/:note', async (ctx, next) => {
 
 	ctx.set('Cache-Control', 'public, max-age=180');
 
-
 	return;
 });
 
@@ -358,6 +373,7 @@ router.get('/@:user/pages/:page', async ctx => {
 		const meta = await fetchMeta();
 		const builded = await buildMeta(meta, false);
 		await ctx.render('page', {
+			version: config.version,
 			initialMeta: htmlescape(builded),
 			page: _page,
 			instanceName: meta.name || 'Misskey',
@@ -438,6 +454,7 @@ router.get('*', async ctx => {
 	const noindex = ctx.path.match(/^[/](search|tags[/]|explore|featured)/);
 
 	await ctx.render('base', {
+		version: config.version,
 		initialMeta: htmlescape(builded),
 		img: meta.bannerUrl,
 		title: meta.name || 'Misskey',

src/server/web/views/base.pug

@@ -33,11 +33,8 @@ html
 
 		style
 			include ./../../../../built/client/assets/init.css
-		script
-			include ./../../../../built/client/assets/boot.js
 
-		script
-			include ./../../../../built/client/assets/safe.js
+		script(src=`/assets/boot.js?${version}`)
 
 		script(type='application/json' id='initial-meta').
 			!{initialMeta}