Merge ea0b5d7b9d into 52db03b73a

nitter.example.conf

@@ -21,6 +21,7 @@ redisMaxConnections = 30
 
 [Config]
 hmacKey = "secretkey"  # random key for cryptographic signing of video urls
+nonceString = "secretstring" # random string for the Content-Security-Policy header with script-src
 base64Media = false  # use base64 encoding for proxied media urls
 enableRSS = true  # set this to false to disable RSS feeds
 enableDebug = false  # enable request logs and debug endpoints (/.accounts)

public/js/hlsPlayback.js

@@ -1,25 +1,40 @@
 // @license http://www.gnu.org/licenses/agpl-3.0.html AGPL-3.0
 // SPDX-License-Identifier: AGPL-3.0-only
-function playVideo(overlay) {
-    const video = overlay.parentElement.querySelector('video');
-    const url = video.getAttribute("data-url");
-    video.setAttribute("controls", "");
-    overlay.style.display = "none";
+function playVideo() {
+    const video_overlay = document.getElementsByClassName("video-overlay");
+    
+    for (var i = 0 ; i < video_overlay.length; i++) {
+        video_overlay[i].addEventListener('click', function () {
 
-    if (Hls.isSupported()) {
-        var hls = new Hls({autoStartLoad: false});
-        hls.loadSource(url);
-        hls.attachMedia(video);
-        hls.on(Hls.Events.MANIFEST_PARSED, function () {
-            hls.loadLevel = hls.levels.length - 1;
-            hls.startLoad();
-            video.play();
-        });
-    } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
-        video.src = url;
-        video.addEventListener('canplay', function() {
-            video.play();
+            const video = this.parentElement.querySelector('video');
+            const url = video.getAttribute("data-url");
+            video.setAttribute("controls", "");
+            this.style.display = "none";
+
+            if (Hls.isSupported()) {
+                var hls = new Hls({autoStartLoad: false});
+                hls.loadSource(url);
+                hls.attachMedia(video);
+                hls.on(Hls.Events.MANIFEST_PARSED, function () {
+                    hls.loadLevel = hls.levels.length - 1;
+                    hls.startLoad();
+                    video.play();
+                });
+            } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
+                video.src = url;
+                video.addEventListener('canplay', function() {
+                    video.play();
+                });
+            }
         });
     }
 }
+
+var observer = new MutationObserver(function () {
+    playVideo()
+});
+
+playVideo()
+
+observer.observe(document.body, {childList: true, subtree: true});
 // @license-end

src/config.nim

@@ -35,6 +35,7 @@ proc getConfig*(path: string): (Config, parseCfg.Config) =
 
     # Config
     hmacKey: cfg.get("Config", "hmacKey", "secretkey"),
+    nonceString: cfg.get("Config", "nonceString", "secretstring"),
     base64Media: cfg.get("Config", "base64Media", false),
     minTokens: cfg.get("Config", "tokenCount", 10),
     enableRss: cfg.get("Config", "enableRSS", true),

src/types.nim

@@ -261,6 +261,7 @@ type
     staticDir*: string
 
     hmacKey*: string
+    nonceString*: string
     base64Media*: bool
     minTokens*: int
     enableRss*: bool

src/views/general.nim

@@ -73,11 +73,11 @@ proc renderHead*(prefs: Prefs; cfg: Config; req: Request; titleText=""; desc="";
       link(rel="alternate", type="application/rss+xml", href=rss, title="RSS feed")
 
     if prefs.hlsPlayback:
-      script(src="/js/hls.light.min.js", `defer`="")
-      script(src="/js/hlsPlayback.js", `defer`="")
+      script(nonce=cfg.nonceString, src="/js/hls.light.min.js", `defer`="")
+      script(nonce=cfg.nonceString, src="/js/hlsPlayback.js", `defer`="")
 
     if prefs.infiniteScroll:
-      script(src="/js/infiniteScroll.js", `defer`="")
+      script(nonce=cfg.nonceString, src="/js/infiniteScroll.js", `defer`="")
 
     title:
       if titleText.len > 0:

src/views/tweet.nim

@@ -109,7 +109,7 @@ proc renderVideo*(video: Video; prefs: Prefs; path: string): VNode =
               source(src=source, `type`="video/mp4")
           of m3u8, vmap:
             video(poster=thumb, data-url=source, data-autoload="false", muted=prefs.muteVideos)
-            verbatim "<div class=\"video-overlay\" onclick=\"playVideo(this)\">"
+            verbatim "<div class=\"video-overlay\">"
             tdiv(class="overlay-circle"): span(class="overlay-triangle")
             verbatim "</div>"
       if container.len > 0: