Remove inline scripts from scraped articles

src/renderers/abstract.renderer.ts

@@ -120,69 +120,69 @@
     const videoDisplayedWidth = Number(videoEl.getAttribute('width'))
     let bestWidthDiff = 424242
     let chosenVideoSourceEl: DominoElement
     videoSourceEls.forEach((videoSourceEl: DominoElement) => {
       // Ignore non-webm && non-audio sources
       const videoSourceType = videoSourceEl.getAttribute('type')
       if (!videoSourceEl.getAttribute('src').endsWith('.webm') && !videoSourceType.startsWith('audio')) {
         DOMUtils.deleteNode(videoSourceEl)
         return
       }
 
       // Handle audio content
       if (videoSourceType.startsWith('audio/ogg')) {
         chosenVideoSourceEl = videoSourceEl
         return
       } else if (videoSourceType.startsWith('audio')) {
         DOMUtils.deleteNode(videoSourceEl)
         return
       }
 
       // If undefined displayed width, then take the best <source> resolution
       const videoSourceElWidth = Number(videoSourceEl.getAttribute('data-file-width') || videoSourceEl.getAttribute('data-width') || 0)
       if (!videoDisplayedWidth) {
         const chosenVideoSourceElWidth = chosenVideoSourceEl ? chosenVideoSourceEl.getAttribute('data-file-width') || chosenVideoSourceEl.getAttribute('data-width') || 0 : 0
         if (videoSourceElWidth > chosenVideoSourceElWidth || (videoSourceElWidth === chosenVideoSourceElWidth && videoSourceEl.getAttribute('src').endsWith('.vp9.webm'))) {
           DOMUtils.deleteNode(chosenVideoSourceEl)
           chosenVideoSourceEl = videoSourceEl
           return
         }
       }
 
       // Otherwise, choose <source> with better (smaller) width diff
       else {
         const widthDiff = Number(videoSourceElWidth - videoDisplayedWidth)
 
         // If no source has been picked so far, just take this one
         if (!chosenVideoSourceEl) {
           chosenVideoSourceEl = videoSourceEl
           bestWidthDiff = widthDiff
           return
         }
 
         // Resolution of source is higher than displayed resolution
         else if (widthDiff >= 0) {
           if (bestWidthDiff < 0 || widthDiff < bestWidthDiff || (widthDiff === bestWidthDiff && videoSourceEl.getAttribute('src').endsWith('.vp9.webm'))) {
             DOMUtils.deleteNode(chosenVideoSourceEl)
             chosenVideoSourceEl = videoSourceEl
             bestWidthDiff = widthDiff
             return
           }
         }
 
         // Resolution of source is smaller than displayed resolution
         else {
           if (widthDiff > bestWidthDiff || (widthDiff === bestWidthDiff && videoSourceEl.getAttribute('src').endsWith('.vp9.webm'))) {
             DOMUtils.deleteNode(chosenVideoSourceEl)
             chosenVideoSourceEl = videoSourceEl
             bestWidthDiff = widthDiff
             return
           }
         }
       }
 
       // Delete all other nodes
       DOMUtils.deleteNode(videoSourceEl)
     })
 
     return chosenVideoSourceEl
   }
@@ -698,6 +698,14 @@
       }
     })
 
+    /*
+     * Because of CSP, some ZIM reader environments do not allow inline JS. See issues/2096.
+     */
+    const scripts = Array.from(parsoidDoc.getElementsByTagName('script')) as DominoElement[]
+    for (const script of scripts) {
+      script.parentNode.removeChild(script)
+    }
+
     /* Force display of element with that CSS class */
     filtersConfig.cssClassDisplayList.map((classname: string) => {
       const nodes: DominoElement[] = Array.from(parsoidDoc.getElementsByClassName(classname))

test/unit/saveArticles.test.ts

@@ -212,6 +212,36 @@ describe('saveArticles', () => {
       // Prague was correctly post-processed
       expect(PragueDocument.querySelector('#POST_PROCESSOR')).toBeDefined()
     })
+
+    test('Removes inline JS', async () => {
+      const { downloader, dump } = await setupScrapeClasses({ mwUrl: 'https://en.wikipedia.org' }) // en wikipedia
+      downloader.setUrlsDirectors(rendererInstance, rendererInstance)
+      const articleId = 'Potato'
+      const articleUrl = downloader.getArticleUrl(articleId)
+      const _articleDetailsRet = await downloader.getArticleDetailsIds([articleId])
+      const articlesDetail = mwRetToArticleDetail(_articleDetailsRet)
+      const { articleDetailXId } = RedisStore
+      const articleDetail = { title: articleId, timestamp: '2023-08-20T14:54:01Z' }
+      const _moduleDependencies = await downloader.getModuleDependencies(articleDetail.title)
+      articleDetailXId.setMany(articlesDetail)
+      const result = await downloader.getArticle(
+        downloader.webp,
+        _moduleDependencies,
+        articleId,
+        articleDetailXId,
+        rendererInstance,
+        articleUrl,
+        dump,
+        articleDetail,
+        dump.isMainPage(articleId),
+      )
+
+      const articleDoc = domino.createDocument(result[0].html)
+
+      // Document has scripts that we added, but shouldn't have any without a `src` (inline).
+      const remainingInlineScripts = Array.from(articleDoc.querySelectorAll('script:not([src])'))
+      expect(remainingInlineScripts.length).toBe(0)
+    })
   }
 
   describe('applyOtherTreatments', () => {
@@ -280,37 +310,37 @@ describe('saveArticles', () => {
       expect(fewestChildren).toBeLessThanOrEqual(1)
     })
     */
-  })
 
-  test('Test deleted article rendering (Visual editor renderer)', async () => {
-    const { downloader, dump } = await setupScrapeClasses() // en wikipedia
-    const { articleDetailXId } = RedisStore
-    const articleId = 'deletedArticle'
+    test('Test deleted article rendering (Visual editor renderer)', async () => {
+      const { downloader, dump } = await setupScrapeClasses() // en wikipedia
+      const { articleDetailXId } = RedisStore
+      const articleId = 'deletedArticle'
 
-    const articleJsonObject = {
-      visualeditor: { oldid: 0 },
-    }
+      const articleJsonObject = {
+        visualeditor: { oldid: 0 },
+      }
 
-    const articleDetail = { title: articleId, missing: '' }
-    const _moduleDependencies = await downloader.getModuleDependencies(articleDetail.title)
-
-    const visualEditorRenderer = new VisualEditorRenderer()
-
-    const renderOpts = {
-      data: articleJsonObject,
-      RedisStore,
-      webp: downloader.webp,
-      _moduleDependencies,
-      articleId,
-      articleDetailXId,
-      articleDetail,
-      isMainPage: dump.isMainPage(articleId),
-      dump,
-    }
+      const articleDetail = { title: articleId, missing: '' }
+      const _moduleDependencies = await downloader.getModuleDependencies(articleDetail.title)
 
-    expect(async () => {
-      await visualEditorRenderer.render(renderOpts)
-    }).rejects.toThrow(new Error(DELETED_ARTICLE_ERROR))
+      const visualEditorRenderer = new VisualEditorRenderer()
+
+      const renderOpts = {
+        data: articleJsonObject,
+        RedisStore,
+        webp: downloader.webp,
+        _moduleDependencies,
+        articleId,
+        articleDetailXId,
+        articleDetail,
+        isMainPage: dump.isMainPage(articleId),
+        dump,
+      }
+
+      expect(async () => {
+        await visualEditorRenderer.render(renderOpts)
+      }).rejects.toThrow(new Error(DELETED_ARTICLE_ERROR))
+    })
   })
 
   test('Load inline js from HTML', async () => {