Fixed #128: removed inline JS to comply with some CSP

openzim · Aug 1, 2022 · de7b7f1 · de7b7f1
1 parent af06f9a
commit de7b7f1
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 29 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fixed dependency issue (markupsafe)
 - Don't fail on missing whoTheyAre
 - Updated scraperlib (1.6.2) to fix mime guessing bug
+- Removed inline JS to comply with some CSP (#128)
 
 ## [2.0.10]
 

diff --git a/ted2zim/templates/article.html b/ted2zim/templates/article.html
@@ -18,10 +18,11 @@
         <script src="assets/article.js"></script>
         <script src="assets/polyfills.js"></script>
         <script src="assets/webp-hero.bundle.js"></script>
+        <script src="assets/webp-trigger.js"></script>
     </head>
     <body>
         <div id="content">
-            <img id="backtolist" src="assets/img/TED_small.png" title="{{ back_to_list }}" onclick="history.go(-1)" />
+            <img id="backtolist" src="assets/img/TED_small.png" title="{{ back_to_list }}"/>
             <p id="speaker">{{ speaker }}</p>
             {% for title in titles %}
             <p class="title lang-{{ title.lang }}">{{ title.text }}</p>
@@ -57,21 +58,5 @@
                     </div>
                 </div>
             </div>
-            <script>
-                $(document).ready(function() {
-                    webpHero.detectWebpSupport().then(function (support_webp){
-                        if (!support_webp) {
-                            console.log("no WebP support, polyfilling.");
-                            // un-hide ogvjs-poster so the polyfill can transform it
-                            $(".ogvjs-poster").css("visibility", "");
-                            // hide video-js poster (which uses background-image)
-                            $(".vjs-poster").css("display", "none");
-
-                            let webpMachine = new webpHero.WebpMachine();
-                            webpMachine.polyfillDocument();
-                        }
-                    });
-                });
-            </script>
         </body>
     </html>
diff --git a/ted2zim/templates/assets/app.js b/ted2zim/templates/assets/app.js
@@ -147,3 +147,7 @@ function refreshVideos(language, pageData) {
       videoList.appendChild(li);
     }
 }
+
+$(document).ready(function() {
+  $(".backtotop").on("click", function() { $('html, body').animate({ scrollTop: 0 }, 'slow'); });
+});
diff --git a/ted2zim/templates/assets/article.js b/ted2zim/templates/assets/article.js
@@ -14,3 +14,7 @@ window.onload = function() {
         $(".lang-" + lang).css("display", "block");
     }
 };
+
+$(document).ready(function() {
+    $("#backtolist").on("click", function() { history.go(-1) });
+});
diff --git a/ted2zim/templates/assets/webp-trigger.js b/ted2zim/templates/assets/webp-trigger.js
@@ -0,0 +1,16 @@
+trigger_webp_polyfill = function () {
+    webpHero.detectWebpSupport().then(function (support_webp){
+        if (!support_webp) {
+            console.log("no WebP support, polyfilling.");
+            // un-hide ogvjs-poster so the polyfill can transform it
+            $(".ogvjs-poster").css("visibility", "");
+            // hide video-js poster (which uses background-image)
+            $(".vjs-poster").css("display", "none");
+
+            let webpMachine = new webpHero.WebpMachine();
+            webpMachine.polyfillDocument();
+        }
+    });
+}
+
+$(document).ready(function() { trigger_webp_polyfill(); });
diff --git a/ted2zim/templates/home.html b/ted2zim/templates/home.html
@@ -28,7 +28,7 @@
       <ul id="video-items" class="rig grid"></ul>
     </div>
     <hr/>
-    <div class="backtotop" onclick="$('html, body').animate({ scrollTop: 0 }, 'slow');">
+    <div class="backtotop">
       <span style="margin: auto;">{{ back_to_top }}</span>
     </div>
     <div id="pagination" style="visibility: hidden; margin-bottom: 1em;">
@@ -42,16 +42,6 @@
   <script src="assets/data.js"></script>
   <script src="assets/db.js"></script>
   <script src="assets/app.js"></script>
-  <script>
-    $(document).ready(function() {
-      webpHero.detectWebpSupport().then(function (support_webp){
-          if (!support_webp) {
-              console.log("no WebP support, polyfilling.");
-              let webpMachine = new webpHero.WebpMachine();
-              webpMachine.polyfillDocument();
-          }
-      });
-  });
-  </script>
+  <script src="assets/webp-trigger.js"></script>
 </body>
 </html>