Merge pull request #768 from wurmlab/tt/csp-setup

Refactor inline JS for better CSP

public/js/search.js

@@ -1,32 +1,41 @@
-import "./jquery_world";
-import React, { Component } from "react";
-import { createRoot } from "react-dom/client";
-import { DnD } from "./dnd";
-import { Form } from "./form";
-import { SearchHeaderPlugin } from "search_header_plugin";
+import './jquery_world';
+import React, { Component } from 'react';
+import { createRoot } from 'react-dom/client';
+import { DnD } from './dnd';
+import { Form } from './form';
+import { SearchHeaderPlugin } from 'search_header_plugin';
 
 /**
  * Clear sessionStorage on reload.
  */
 if (performance.navigation.type == performance.navigation.TYPE_RELOAD) {
-  sessionStorage.clear();
-  history.replaceState(null, "", location.href.split("?")[0]);
+    sessionStorage.clear();
+    history.replaceState(null, '', location.href.split('?')[0]);
 }
 
 class Page extends Component {
-  componentDidMount() {
-    this.refs.dnd.setState({ query: this.refs.form.refs.query });
-  }
-  render() {
-    return (
-      <div>
-        <SearchHeaderPlugin />
-        <DnD ref="dnd" />
-        <Form ref="form" />
-      </div>
-    );
-  }
+    componentDidMount() {
+        this.refs.dnd.setState({ query: this.refs.form.refs.query });
+    }
+    render() {
+        return (
+            <div>
+                <SearchHeaderPlugin />
+                <DnD ref="dnd" />
+                <Form ref="form" />
+            </div>
+        );
+    }
 }
 
-const root = createRoot(document.getElementById("view"));
+const root = createRoot(document.getElementById('view'));
 root.render(<Page />);
+
+document.addEventListener('DOMContentLoaded', () => {
+    const closeButton = document.querySelector('.js--close-help');
+    if (closeButton) {
+        closeButton.addEventListener('click', function() {
+            document.querySelector('[data-help-modal]').classList.add('hidden');
+        });
+    }
+});

views/layout.erb

@@ -108,7 +108,7 @@
     </div> <!-- /container -->
   </div>
 
-  <script>
+  <script nonce="<%= env['csp.nonce'] %>">
     document.addEventListener('DOMContentLoaded', function() {
 
         function suggestNewVersion(element, version) {

views/search.erb

@@ -38,7 +38,7 @@
       </div>
 
       <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse border-t">
-        <button type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-seqblue text-base font-medium text-white hover:bg-seqorange focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-seqorange sm:ml-3 sm:w-auto sm:text-sm" onclick="document.querySelector('[data-help-modal]').classList.add('hidden')">
+        <button type="button" class="js--close-help w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-seqblue text-base font-medium text-white hover:bg-seqorange focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-seqorange sm:ml-3 sm:w-auto sm:text-sm">
           Close
         </button>
       </div>