Remove inline js

config/config.default.php

@@ -423,7 +423,10 @@ return [
         'X-Content-Type-Options'  => 'nosniff',
         'X-Frame-Options'         => 'sameorigin',
         'Referrer-Policy'         => 'strict-origin-when-cross-origin',
-        'Content-Security-Policy' => 'default-src \'self\' \'unsafe-inline\' \'unsafe-eval\'; img-src \'self\' data:;',
+        'Content-Security-Policy' =>
+            'default-src \'self\'; '
+            . ' style-src \'self\' \'unsafe-inline\'; '
+            . 'img-src \'self\' data:;',
         'X-XSS-Protection'        => '1; mode=block',
         'Feature-Policy'          => 'autoplay \'none\'',
         //'Strict-Transport-Security' => 'max-age=7776000',

resources/assets/js/design.js

@@ -0,0 +1,13 @@
+import { ready } from './ready';
+
+ready(() => {
+  [...document.getElementsByClassName('prevent-default')].forEach((element) => {
+    let preventDefault = (e) => {
+      e.preventDefault();
+      return false;
+    };
+
+    element.addEventListener('submit', preventDefault);
+    element.addEventListener('click', preventDefault);
+  });
+});

resources/assets/js/vendor.js

@@ -3,3 +3,4 @@ window.bootstrap = require('bootstrap');
 import './forms';
 import './countdown';
 import './dashboard';
+import './design';

resources/views/pages/design.twig

@@ -19,7 +19,7 @@
 {% set types_buttons=['link']|merge(types) %}
 {% set shortsum='Lorem ipsum dolor…' %}
 {% set lipsum='Lorem ipsum dolor sit amet, consectetur adipisici elit…' %}
-{% set linksum='Lorem ipsum! Dolor <a href="#" onclick="return false">link</a> amet, consectetur adipisici elit!' %}
+{% set linksum='Lorem ipsum! Dolor <a href="#" class="prevent-default">link</a> amet, consectetur adipisici elit!' %}
 
 {% block content %}
     <div class="col-12">
@@ -94,13 +94,13 @@
                 <h3>Navigation Tabs</h3>
                 <ul class="nav nav-tabs">
                     <li class="nav-item">
-                        <a class="nav-link active" href="#" onclick="return false">Lorem</a>
+                        <a class="nav-link active prevent-default" href="#">Lorem</a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link" href="#" onclick="return false">Ipsum</a>
+                        <a class="nav-link prevent-default" href="#">Ipsum</a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link" href="#" onclick="return false">Dolor</a>
+                        <a class="nav-link prevent-default" href="#">Dolor</a>
                     </li>
                 </ul>
             </div>
@@ -108,13 +108,13 @@
                 <h3>Navigation Pills</h3>
                 <ul class="nav nav-pills flex-column">
                     <li class="nav-item">
-                        <a class="nav-link active" href="#" onclick="return false">Some</a>
+                        <a class="nav-link active prevent-default" href="#">Some</a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link" href="#" onclick="return false">Test</a>
+                        <a class="nav-link prevent-default" href="#">Test</a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link" href="#" onclick="return false">Menu</a>
+                        <a class="nav-link prevent-default" href="#">Menu</a>
                     </li>
                 </ul>
             </div>
@@ -250,7 +250,7 @@
                                 <h4 class="card-header bg-{{ type }}">{{ type|capitalize }}</h4>
                                 <div class="card-body">
                                     <p class="card-text">{{ shortsum }}</p>
-                                    <p class="card-text"><a href="#" onclick="return false" class="card-link">Some link</a></p>
+                                    <p class="card-text"><a href="#" class="card-link prevent-default">Some link</a></p>
                                 </div>
                                 <div class="card-footer text-muted">
                                     Footer
@@ -525,13 +525,13 @@ Por scientie, musica, sport etc, litot Europa usa li sam vocabular.</code></pre>
                 <h4>Pagination</h4>
                 <ul class="pagination">
                     <li class="page-item active">
-                        <a class="page-link" href="#" onclick="return false">1</a>
+                        <a class="page-link prevent-default" href="#">1</a>
                     </li>
                     <li class="page-item">
-                        <a class="page-link" href="#" onclick="return false">2</a>
+                        <a class="page-link prevent-default" href="#">2</a>
                     </li>
                     <li class="page-item">
-                        <a class="page-link" href="#" onclick="return false">3</a>
+                        <a class="page-link prevent-default" href="#">3</a>
                     </li>
                 </ul>
             </div>
@@ -594,12 +594,4 @@ Por scientie, musica, sport etc, litot Europa usa li sam vocabular.</code></pre>
         {{ bar_chart | raw }}
     </div>
     </div>
-    <script>
-        [...document.getElementsByClassName('prevent-default')].forEach((element) => {
-            element.addEventListener('submit', (e) => {
-                e.preventDefault();
-                return false;
-            });
-        })
-    </script>
 {% endblock %}