Mercurial > web

changeset 56:c95a96b61d9a

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
html: Add Content Security Policy headers
author Paper <mrpapersonic@gmail.com>
date Mon, 19 Dec 2022 17:54:07 -0500
parents aee91b195871
children ac1900c0e376
files index.html music.html projects.html
diffstat 3 files changed, 84 insertions(+), 66 deletions(-) [+]
line wrap: on
line diff
--- a/index.html	Mon Dec 19 17:18:07 2022 -0500
+++ b/index.html	Mon Dec 19 17:54:07 2022 -0500
@@ -2,17 +2,23 @@
 <head>
 	<title>Home - Paper's website</title>
 	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+	<meta http-equiv="Content-Security-Policy" content="default-src 'self' https://fonts.gstatic.com; style-src 'self' 'nonce-paper-web-inline' https://maxcdn.bootstrapcdn.com https://fonts.googleapis.com; img-src data:; script-src 'nonce-paper-web-inline'">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 	<meta name="google-site-verification" content="rILPN0Fit17u21ImKQW-ZHQMvx_Ak7qcuM3ewqtrJg8" />
+	<!-- bootstrap 2.3.2 gives an error that the `zoom` css property isn't supported,
+	     but we don't have anything that uses it anyway -->
 	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet" media="screen">
     <link rel="shortcut icon" type="image/x-icon" href="favicon.ico?">
-    <!-- <script src="https://code.jquery.com/jquery.js"></script>
-    <script src="js/bootstrap/js/bootstrap.min.js"></script> -->
-	<style>
+	<style nonce="paper-web-inline">
 		@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@300&display=swap');
 		.navbar {
 			font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
 			text-align: left; /* Override body text align */
+			box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
+		}
+		.container {
+			width: 98%;
+			margin-top: 1%;
 		}
 		@media (min-aspect-ratio: 16/9) {
 			#bg {
@@ -66,8 +72,11 @@
 		div.logos {
 			filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.5));
 		}
+		image#mod-archive {
+			image-rendering: pixelated;
+		}
 	</style>
-	<script>
+	<script nonce="paper-web-inline">
 		function setbg() {
 			document.getElementById("bg").style.display = "none";
 			document.body.style.background = "url('landscapeposter.jpg') no-repeat center center fixed";
@@ -101,7 +110,7 @@
 				<path d="M5.026 15c6.038 0 9.341-5.003 9.341-9.334 0-.14 0-.282-.006-.422A6.685 6.685 0 0 0 16 3.542a6.658 6.658 0 0 1-1.889.518 3.301 3.301 0 0 0 1.447-1.817 6.533 6.533 0 0 1-2.087.793A3.286 3.286 0 0 0 7.875 6.03a9.325 9.325 0 0 1-6.767-3.429 3.289 3.289 0 0 0 1.018 4.382A3.323 3.323 0 0 1 .64 6.575v.045a3.288 3.288 0 0 0 2.632 3.218 3.203 3.203 0 0 1-.865.115 3.23 3.23 0 0 1-.614-.057 3.283 3.283 0 0 0 3.067 2.277A6.588 6.588 0 0 1 .78 13.58a6.32 6.32 0 0 1-.78-.045A9.344 9.344 0 0 0 5.026 15z"/>
 			</svg></a>
 			&nbsp;
-			<a target="_blank" href="https://modarchive.org/index.php?request=view_profile&query=92603"><svg version="1.1" id="svg108" width="32" height="32" fill="white" viewBox="0 0 32 32" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"><defs id="defs112"/> <g id="g114"><image width="32" height="32" preserveAspectRatio="none" style="image-rendering:pixelated;" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACx
+			<a target="_blank" href="https://modarchive.org/index.php?request=view_profile&query=92603"><svg version="1.1" id="svg108" width="32" height="32" fill="white" viewBox="0 0 32 32" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"><defs id="defs112"/> <g id="g114"><image id="mod-archive" width="32" height="32" preserveAspectRatio="none"  xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACx
 jwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAABvSURBVDhP1ZDRCYAwDERjp3AER3EUN+q48RLu
 o5JIbQXBB7E+rhxR+QRVXW2oEYSbDTWAzKFGmN9eYJzmhecF3N1tqH28HlC73pJu0ANdhw11fAOq
 +9QGLQVFle/WXEd9wSP9OU95/wk8p/l9gcgJo2aKKBW4giYAAAAASUVORK5CYII=
@@ -114,8 +123,8 @@
 		</div>
 	</div>
     <div class="navbar-wrapper">
-		<div class="container" style="width: 98%;margin-top:1%;">
-			<div class="navbar navbar-inverse" style="box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5)">
+		<div class="container paper-navbar">
+			<div class="navbar navbar-inverse">
 				<div class="navbar-inner">
 					<a class="brand" href="#">Paper's website</a>
 					<ul class="nav">
--- a/music.html	Mon Dec 19 17:18:07 2022 -0500
+++ b/music.html	Mon Dec 19 17:54:07 2022 -0500
@@ -1,10 +1,49 @@
 <!DOCTYPE html>
 <head>
+	<title>Music - Paper's website</title>
+	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+	<meta http-equiv="Content-Security-Policy" content="default-src 'self' https://fonts.gstatic.com; style-src 'self' 'nonce-paper-web-inline' https://maxcdn.bootstrapcdn.com https://fonts.googleapis.com; img-src data:; script-src 'nonce-paper-web-inline' https://cdn.jsdelivr.net">
     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet" media="screen">
     <link rel="shortcut icon" type="image/x-icon" href="favicon.ico?">
-    <!-- <script src="https://code.jquery.com/jquery.js"></script>
-    <script src="js/bootstrap/js/bootstrap.min.js"></script> -->
-	<script>
+	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+	<style nonce="paper-web-inline">
+		@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@300&display=swap');
+		.navbar {
+			font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
+			text-align: left; /* Override body text align */
+			box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
+		}
+		.container {
+			width: 98%;
+			margin-top: 1%;
+		}
+		body {
+			background-size: cover;
+			background: url("forest.png") no-repeat center center fixed;
+			color: white;
+			font-family: 'Source Sans 3', sans-serif;
+			text-align: center;
+			text-shadow: 5px 0 10px rgba(0, 0, 0, 0.5);
+		}
+		div.box {
+			background-color: rgba(0, 0, 0, 0.7);
+			box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5) inset;
+			color: white;
+			left: 0;
+			margin: 1% auto;
+			max-width: 500px;
+			padding: 10px;
+			right: 0;
+			text-align: center;
+			top: 50%;
+		}
+		a:link, a:visited, a:hover, a:active {
+			color: #ff6600;
+		}
+	</style>
+	<script type="application/javascript" src="https://cdn.jsdelivr.net/gh/deskjet/chiptune2.js@a97e04cc7e98924f6ad17980d6eeca3f764378b5/chiptune2.js"></script>
+	<script type="application/javascript" src="./js/libopenmpt.js"></script>
+	<script nonce="paper-web-inline">
 		window['libopenmpt'] = {};
 
 		libopenmpt.locateFile = function(filename) {
@@ -51,46 +90,11 @@
 			});
 		};
 	</script>
-	<script type="application/javascript" src="//cdn.jsdelivr.net/gh/deskjet/chiptune2.js@a97e04cc7e98924f6ad17980d6eeca3f764378b5/chiptune2.js"></script>
-	<script type="application/javascript" src="./js/libopenmpt.js"></script>
-	<title>Music - Paper's website</title>
-	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-	<style>
-		@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@300&display=swap');
-		.navbar {
-			font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
-			text-align: left; /* Override body text align */
-		}
-		body {
-			background-size: cover;
-			background: url("forest.png") no-repeat center center fixed;
-			color: white;
-			font-family: 'Source Sans 3', sans-serif;
-			text-align: center;
-			text-shadow: 5px 0 10px rgba(0, 0, 0, 0.5);
-		}
-		div.box {
-			background-color: rgba(0, 0, 0, 0.7);
-			box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5) inset;
-			color: white;
-			left: 0;
-			margin: 1% auto;
-			max-width: 500px;
-			padding: 10px;
-			right: 0;
-			text-align: center;
-			top: 50%;
-		}
-		a:link, a:visited, a:hover, a:active {
-			color: #ff6600;
-		}
-	</style>
 </head>
 <body>
     <div class="navbar-wrapper">
-		<div class="container" style="width: 98%;margin-top:1%;">
-			<div class="navbar navbar-inverse" style="box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5)">
+		<div class="container">
+			<div class="navbar navbar-inverse">
 				<div class="navbar-inner">
 					<a class="brand" href="./">Paper's website</a>
 					<ul class="nav">
@@ -117,16 +121,16 @@
 			<p><a href="#" class="song" data-modurl="https://api.modarchive.org/downloads.php?moduleid=193607">Reaching the World Border [.IT]</a>&nbsp;<a href="https://api.modarchive.org/downloads.php?moduleid=193607#paper_-_reaching_the_world_border.it">(Download)</a></p>
 			<p><a href="#" class="song" data-modurl="https://api.modarchive.org/downloads.php?moduleid=192651">THIS IS SARTA [.MPTM]</a>&nbsp;<a href="https://api.modarchive.org/downloads.php?moduleid=192651#paper_-_sarta.mptm">(Download)</a></p>
 	</div>
-	<div>
+	<div class="box">
 		<h2>Collabs</h2>
-			<p><a href="#" class="song" data-modurl="https://api.modarchive.org/downloads.php?moduleid=198747">USA Keyboard [.IT] (co-op with ishineee, rainbow, and quyu)</a>&nbsp;<a href="https://api.modarchive.org/downloads.php?moduleid=198747#usa_keyboard_final.it">(Download)</a></p>
+			<p><a href="#" class="song" data-modurl="https://api.modarchive.org/downloads.php?moduleid=198747">USA Keyboard (co-op with ishineee, rainbow, and quyu) [.IT]</a>&nbsp;<a href="https://api.modarchive.org/downloads.php?moduleid=198747#usa_keyboard_final.it">(Download)</a></p>
 	</div>
 	<div class="box">
 		<h2>Covers</h2>
-			<p><a href="#" class="song" data-modurl="https://api.modarchive.org/downloads.php?moduleid=199486">huxchx [.IT]</a>&nbsp;<a href="https://api.modarchive.org/downloads.php?moduleid=199486#paper_-_huxchx.it">(Download)</a></p>
+			<p><a href="#" class="song" data-modurl="https://api.modarchive.org/downloads.php?moduleid=199486">Razerek - huxchx [.IT]</a>&nbsp;<a href="https://api.modarchive.org/downloads.php?moduleid=199486#paper_-_huxchx.it">(Download)</a></p>
 			<p><a href="#" class="song" data-modurl="https://api.modarchive.org/downloads.php?moduleid=196945">Gerudo Valley (OPL2) [.S3M]</a>&nbsp;<a href="https://api.modarchive.org/downloads.php?moduleid=196945#gerudo_valley.s3m">(Download)</a></p>
-			<p><a href="#" class="song" data-modurl="https://api.modarchive.org/downloads.php?moduleid=194255">TinTin on the Moon [.MOD]</a>&nbsp;<a href="https://api.modarchive.org/downloads.php?moduleid=194255#paper_-_tintin_on_the_moon.mod">(Download)</a></p>
-			<p><a href="#" class="song" data-modurl="https://api.modarchive.org/downloads.php?moduleid=194152">Dance in the universe cover [.MOD]</a>&nbsp;<a href="https://api.modarchive.org/downloads.php?moduleid=194152#paper_-_dance_in_the_universe_cover.mod">(Download)</a></p>
+			<p><a href="#" class="song" data-modurl="https://api.modarchive.org/downloads.php?moduleid=194255">Jeroen Tel - TinTin on the Moon [.MOD]</a>&nbsp;<a href="https://api.modarchive.org/downloads.php?moduleid=194255#paper_-_tintin_on_the_moon.mod">(Download)</a></p>
+			<p><a href="#" class="song" data-modurl="https://api.modarchive.org/downloads.php?moduleid=194152">Adeq - Dance in the universe [.MOD]</a>&nbsp;<a href="https://api.modarchive.org/downloads.php?moduleid=194152#paper_-_dance_in_the_universe_cover.mod">(Download)</a></p>
 			<p><a href="#" class="song" data-modurl="https://api.modarchive.org/downloads.php?moduleid=194058">Super Mario 64 - Bob-omb Battlefield Remix [.IT]</a>&nbsp;<a href="https://api.modarchive.org/downloads.php?moduleid=194058#paper_-_bob-omb_battlefield_remix.it">(Download)</a></p>
 			<p><a href="#" class="song" data-modurl="https://api.modarchive.org/downloads.php?moduleid=192921">(mashup) Drax - Tiger Mission Hi-score + ESCHATOS OST - Point of No Return [.IT]</a>&nbsp;<a href="https://api.modarchive.org/downloads.php?moduleid=192921#paper_-_point_of_no_hi-score.it">(Download)</a></p>
 			<p><a href="#" class="song" data-modurl="https://api.modarchive.org/downloads.php?moduleid=192722">(remake) Naruto - VRC6N001 [.IT]</a>&nbsp;<a href="https://api.modarchive.org/downloads.php?moduleid=192722#paper_-_vrc6n001_remake.it">(Download)</a></p>
--- a/projects.html	Mon Dec 19 17:18:07 2022 -0500
+++ b/projects.html	Mon Dec 19 17:54:07 2022 -0500
@@ -1,17 +1,21 @@
 <!DOCTYPE html>
 <head>
+	<title>Projects - Paper's website</title>
+	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+	<meta http-equiv="Content-Security-Policy" content="default-src 'self' https://fonts.gstatic.com; style-src 'self' 'nonce-paper-web-inline' https://maxcdn.bootstrapcdn.com https://fonts.googleapis.com; img-src data:; script-src 'nonce-paper-web-inline'">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet" media="screen">
     <link rel="shortcut icon" type="image/x-icon" href="favicon.ico?">
-    <!-- <script src="https://code.jquery.com/jquery.js"></script>
-    <script src="js/bootstrap/js/bootstrap.min.js"></script> -->
-	<title>Projects - Paper's website</title>
-	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-	<style>
+	<style nonce="paper-web-inline">
 		@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@300&display=swap');
 		.navbar {
 			font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
 			text-align: left; /* Override body text align */
+			box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
+		}
+		.container {
+			width: 98%;
+			margin-top: 1%;
 		}
 		body {
 			background-size: cover;
@@ -22,6 +26,7 @@
 			text-shadow: 5px 0 10px rgba(0, 0, 0, 0.5);
 		}
 		div.box {
+			background-color: rgba(0, 128, 0, 0.5);
 			box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5) inset;
 			color: white;
 			left: 0;
@@ -32,7 +37,7 @@
 			text-align: center;
 			top: 50%;
 		}
-		.poop {
+		a {
 			display: block-inline;
 			color: yellow;
 			background: radial-gradient(ellipse, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.0) 75%);
@@ -43,8 +48,8 @@
 </head>
 <body>
     <div class="navbar-wrapper">
-		<div class="container" style="width: 98%;margin-top:1%;">
-			<div class="navbar navbar-inverse" style="box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5)">
+		<div class="container">
+			<div class="navbar navbar-inverse">
 				<div class="navbar-inner">
 					<a class="brand" href="./">Paper's website</a>
 					<ul class="nav">
@@ -57,14 +62,14 @@
 		</div>
     </div>
 	<h1>Projects</h1>
-	<div class="box" style="background-color: rgba(0, 128, 0, 0.5);">
+	<div class="box">
 		<h1>msvpvf</h1>
 		<p>msvpvf is a tool used to "downgrade" VEGAS Pro project files, written entirely in C. It has no runtime libraries, making it incredibly lightweight. On macOS, the CLI compiles to 50 KB, and on Windows the GUI app is only 19 KB.</p>
-		<p><a class="poop" href="https://github.com/mrpapersonic/msvpvf/releases/latest">Download</a></p>
+		<p><a href="https://github.com/mrpapersonic/msvpvf/releases/latest">Download</a></p>
 	</div>
-	<div class="box" style="background-color: rgba(0, 128, 0, 0.5);">
+	<div class="box">
 		<h1>utagoe30en</h1>
-		<p>A project to translate <a class="poop" href="https://www.vector.co.jp/soft/dl/win95/art/se127635.html">Utagoe</a>, an app that extracts vocals from songs, into English</p>
-		<p><a class="poop" href="https://github.com/mrpapersonic/utagoe30en/releases/latest">Download</a></p>
+		<p>A project to translate <a href="https://www.vector.co.jp/soft/dl/win95/art/se127635.html">Utagoe</a>, an app that extracts vocals from songs, into English</p>
+		<p><a href="https://github.com/mrpapersonic/utagoe30en/releases/latest">Download</a></p>
 	</div>
 </body>