First pass of CSP-compliance for mousetrap

Since the preference for the keyboard shortcuts
is set server-side, I had to shove them into a non-javascript
context, and then access them via javascript,
in a separate file.

Since I'm not a javascript expert, I'm more than open
to alternatives if this isn't the right way™ to do it.

airsonic-main/src/main/webapp/WEB-INF/jsp/head.jsp

@@ -16,39 +16,10 @@
 <link rel="stylesheet" href="<c:url value="/${styleSheet}"/>" type="text/css">
 <title>Airsonic</title>
 
-<!-- Import Mousetrap and enable shortcuts if necessary -->
+<script id="preferencesConfig" type="application/x-configuration">
-<script>
+  {
-function isKeyboardShortcutsEnabled() {
+    "keyboardShortcutsEnabled": ${model.keyboardShortcutsEnabled ? 'true' : 'false'}
-    if (window === parent.frames.top) {
-        return ${model.keyboardShortcutsEnabled ? 'true' : 'false'};
-    } else {
-        return parent.frames.top.isKeyboardShortcutsEnabled();
   }
-}
-</script>
-
-<!-- Bind shortcuts if enabled -->
-<script type="text/javascript" src="<c:url value="/script/mousetrap-1.6.0.js"/>"></script>
-<script type="text/javascript">
-if (isKeyboardShortcutsEnabled()) {
-    Mousetrap.bind('space', function() { parent.frames.playQueue.onToggleStartStop(); return false; });
-    Mousetrap.bind('left',  function() { parent.frames.playQueue.onPrevious(); });
-    Mousetrap.bind('right', function() { parent.frames.playQueue.onNext(); });
-    Mousetrap.bind('*',     function() { parent.frames.playQueue.onStarCurrent(); });
-    Mousetrap.bind('plus',  function() { parent.frames.playQueue.onGainAdd(+5); });
-    Mousetrap.bind('-',     function() { parent.frames.playQueue.onGainAdd(-5); });
-    Mousetrap.bind('q',     function() { parent.frames.playQueue.onTogglePlayQueue(); });
-
-    Mousetrap.bind('/',     function() { parent.frames.upper.$("#query").focus(); });
-    Mousetrap.bind('m',     function() { parent.frames.upper.toggleLeftFrameVisible(); });
-
-    Mousetrap.bind('g h', function() { parent.frames.main.location.href = "home.view?"; });
-    Mousetrap.bind('g p', function() { parent.frames.main.location.href = "playlists.view?"; });
-    Mousetrap.bind('g o', function() { parent.frames.main.location.href = "podcastChannels.view?"; });
-    Mousetrap.bind('g s', function() { parent.frames.main.location.href = "settings.view?"; });
-    Mousetrap.bind('g t', function() { parent.frames.main.location.href = "starred.view?"; });
-    Mousetrap.bind('g r', function() { parent.frames.main.location.href = "more.view?"; });
-    Mousetrap.bind('g a', function() { parent.frames.main.location.href = "help.view?"; });
-    Mousetrap.bind('?',   function() { parent.frames.main.location.href = "more.view#shortcuts"; });
-}
 </script>
+<script defer type="text/javascript" src="<c:url value="/script/mousetrap-1.6.0.js"/>"></script>
+<script defer type="text/javascript" src="<c:url value="/script/keyboard_shortcuts.js"/>"></script>

airsonic-main/src/main/webapp/script/keyboard_shortcuts.js

@@ -0,0 +1,30 @@
+function isKeyboardShortcutsEnabled() {
+  if (window === parent.frames.top) {
+    var config = JSON.parse(document.getElementById('preferencesConfig').textContent)
+    return config['keyboardShortcutsEnabled'];
+  } else {
+    return parent.frames.top.isKeyboardShortcutsEnabled();
+  }
+}
+
+if (isKeyboardShortcutsEnabled()) {
+  Mousetrap.bind('space', function() { parent.frames.playQueue.onToggleStartStop(); return false; });
+  Mousetrap.bind('left',  function() { parent.frames.playQueue.onPrevious(); });
+  Mousetrap.bind('right', function() { parent.frames.playQueue.onNext(); });
+  Mousetrap.bind('*',     function() { parent.frames.playQueue.onStarCurrent(); });
+  Mousetrap.bind('plus',  function() { parent.frames.playQueue.onGainAdd(+5); });
+  Mousetrap.bind('-',     function() { parent.frames.playQueue.onGainAdd(-5); });
+  Mousetrap.bind('q',     function() { parent.frames.playQueue.onTogglePlayQueue(); });
+
+  Mousetrap.bind('/',     function() { parent.frames.upper.$("#query").focus(); });
+  Mousetrap.bind('m',     function() { parent.frames.upper.toggleLeftFrameVisible(); });
+
+  Mousetrap.bind('g h', function() { parent.frames.main.location.href = "home.view?"; });
+  Mousetrap.bind('g p', function() { parent.frames.main.location.href = "playlists.view?"; });
+  Mousetrap.bind('g o', function() { parent.frames.main.location.href = "podcastChannels.view?"; });
+  Mousetrap.bind('g s', function() { parent.frames.main.location.href = "settings.view?"; });
+  Mousetrap.bind('g t', function() { parent.frames.main.location.href = "starred.view?"; });
+  Mousetrap.bind('g r', function() { parent.frames.main.location.href = "more.view?"; });
+  Mousetrap.bind('g a', function() { parent.frames.main.location.href = "help.view?"; });
+  Mousetrap.bind('?',   function() { parent.frames.main.location.href = "more.view#shortcuts"; });
+}