diff index.html @ 56:c95a96b61d9a

html: Add Content Security Policy headers
author Paper <mrpapersonic@gmail.com>
date Mon, 19 Dec 2022 17:54:07 -0500
parents 9be255c52344
children ac1900c0e376
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">