feat: improve security via iframe sandbox, less CSP mods, mdjs/fetching in background

Author: daKmoR

README.md

@@ -11,18 +11,25 @@ You can see live demos in
 - Preview of new issues
 - ... more is planned but not yet implemented
 
-## Warning
+## Security
 
-This extension modifies the CSP (Content Security Policy) for github.com with the following rules:
+This extension takes care of security by
+
+- not executing any code without user action (e.g. requires a click of a button first)
+- shows demos/executes code within an iframe
+  - that uses [sandbox](https://www.w3schools.com/tags/att_iframe_sandbox.asp) with the following settings `sandbox="allow-scripts"`
+  - populates the iframe with a data uri
+  - does not allow any requests (except unpkg) to got outside of the iframe
+
+This prevents [all known attack vectors](https://github.com/open-wc/mdjs-viewer/issues/2). If you come up with new once please [report them](https://github.com/open-wc/mdjs-viewer/issues/new).
+
+### Warning
+
+In order to function this extension modifies the CSP (Content Security Policy) for github.com with the following rules:
 
 - adds to script-src
-  - `'unsafe-eval'` to allow [wasm](https://webassembly.org/) to analyze the code (moving action background will remove that need)
-  - `'unsafe-inline'` to execute code within the mdjs iframe
-  - `unpkg.com` to load dependencies from
-- adds to connect-src
-  - `raw.githubusercontent.com` to fetch raw md content and package.json
-- adds to frame-src
-  - `data:` to enable setting the content of the mdjs iframe
+  - `'unsafe-inline'` to execute code blocks within the mdjs iframe
+  - `unpkg.com` to load user dependencies from within the mdjs iframe
 
 ## Installation
 
@@ -53,12 +60,11 @@ Finally we create an iframe with the content of the mdjs html and js output.
 
 ## Issues/ToDos/Future work
 
-- Security review!!!
+- Even more security checks
 - Support relative imports from not root md files
 - Support relative links
 - Support github page switches (without manual reload)
-- Do the mdjs processing in the "background" (extension context or web worker) and not in the content window
 - Support in github pull request
 - Support npmjs
 - Support gitlab
-- Allow to define on which pages mdjs gets executed
+- Allow users to define on which urls mdjs-viewer gets loaded/executed

esm-loaders/esm-loader-content.js

@@ -1,8 +1,8 @@
 /* global chrome */
 
 // This file is a workaround to be able to use es modules
-const script = document.createElement('script');
-script.setAttribute('type', 'module');
-script.setAttribute('src', chrome.extension.getURL('./src/content.js'));
-const head = document.head || document.getElementsByTagName('head')[0] || document.documentElement;
-head.insertBefore(script, head.lastChild);
+(async () => {
+  const src = chrome.extension.getURL('./src/content.js');
+  const contentMain = await import(src);
+  contentMain.main();
+})();

manifest.json

@@ -10,7 +10,8 @@
       "js": ["esm-loaders/esm-loader-content.js"]
     }
   ],
-  "web_accessible_resources": ["src/*.js", "dist/index.js"],
+  "web_accessible_resources": ["src/*.js", "dist/index.js", "dist/github-markdown.css"],
+  "content_security_policy": "script-src 'self' 'unsafe-eval' unpkg.com; object-src 'self'",
   "background": {
     "page": "esm-loaders/esm-loader-background.html",
     "persistent": true

package.json

@@ -14,7 +14,7 @@
   "author": "open-wc",
   "homepage": "https://github.com/open-wc/mdjs-viewer/",
   "scripts": {
-    "build": "rollup -c ./rollup.config.js",
+    "build": "rollup -c ./rollup.config.js && cp node_modules/github-markdown-css/github-markdown.css ./dist",
     "lint:eslint": "eslint --ext .js,.html . --ignore-path .gitignore",
     "format:eslint": "eslint --ext .js,.html . --fix --ignore-path .gitignore",
     "lint:prettier": "prettier \"**/*.js\" --check --ignore-path .gitignore",
@@ -62,6 +62,7 @@
     ]
   },
   "dependencies": {
-    "@mdjs/core": "^0.1.0"
+    "@mdjs/core": "^0.1.0",
+    "github-markdown-css": "^4.0.0"
   }
 }

src/background.js

@@ -1,4 +1,5 @@
 /* global chrome */
+import { resolveToUnpkg, mdjsProcess } from '../dist/index.js';
 
 // chrome.browserAction.onClicked.addListener(async tab => {
 //   // Send a message to the active tab
@@ -10,26 +11,53 @@
 //   });
 // });
 
+chrome.runtime.onMessage.addListener(({ action, ...options }, sender, sendResponse) => {
+  if (action === 'mdjs+unpkg') {
+    const { mdjs, pkgJson } = options;
+    (async () => {
+      const data = await mdjsProcess(mdjs);
+      const executeCode = await resolveToUnpkg(data.jsCode, pkgJson);
+      sendResponse({ jsCode: executeCode, html: data.html });
+    })();
+  }
+  if (action === 'fetch') {
+    const { url, fetchProcess } = options;
+    (async () => {
+      const response = await fetch(url);
+
+      // if HTTP-status is 200-299
+      if (response.ok) {
+        let data;
+        switch (fetchProcess) {
+          case 'text':
+            data = await response.text();
+            break;
+          case 'json':
+            data = await response.json();
+            break;
+          /* no default */
+        }
+        sendResponse({ ok: response.ok, data });
+      } else {
+        sendResponse({ ok: response.ok });
+      }
+    })();
+  }
+
+  // mark this message as async
+  return true;
+});
+
 function onHeadersReceived(details) {
   const responseHeaders = [];
   for (const header of details.responseHeaders) {
     const { name } = header;
     let { value } = header;
     if (name.toLowerCase() === 'content-security-policy') {
       // adds to script-src
-      // - `'unsafe-eval'` to allow [wasm](https://webassembly.org/) to analyze the code (moving action background will remove that need)
-      // - `'unsafe-inline'` to execute code within the mdjs iframe
-      // - `unpkg.com` to load dependencies from
-      value = value.replace('script-src', "script-src 'unsafe-eval' 'unsafe-inline' unpkg.com");
-      // adds to connect-src
-      // - `raw.githubusercontent.com` to fetch raw md content and package.json
-      value = value.replace('connect-src', 'connect-src raw.githubusercontent.com');
-      // adds to frame-src
-      // - `data:` to enable setting the content of the mdjs iframe
-      value = value.replace('frame-src', 'frame-src data:');
-      // adds to style-src
-      // - raw.githubusercontent.com to fetch raw md content and package.json
-      value = value.replace('style-src', 'style-src unpkg.com');
+      // - `'unsafe-inline'` to execute code blocks within the mdjs iframe
+      // - `unpkg.com` to load user dependencies from within the mdjs iframe
+      value = value.replace('script-src', "script-src 'unsafe-inline' unpkg.com");
     }
     responseHeaders.push({ name, value });
   }

src/content.js

@@ -1,7 +1,8 @@
 import { handleIssuePage } from './handleIssuePage.js';
 import { handleMarkdownPage } from './handleMarkdownPage.js';
 
-async function main() {
+// main gets executed by the esm-loader
+export async function main() {
   await handleIssuePage();
   await handleMarkdownPage();
 
@@ -24,5 +25,3 @@ async function main() {
     }
   });
 }
-
-main();

src/createViewer.js

@@ -1,15 +1,20 @@
-import { resolveToUnpkg, mdjsProcess } from '../dist/index.js';
+/* global chrome */
+
+import { getFromBackground } from './getFromBackground.js';
 
 let counter = 0;
 
 export async function createViewer(mdjs, { type, width, height, pkgJson = {} }) {
   counter += 1;
-  const data = await mdjsProcess(mdjs);
-  const executeCode = await resolveToUnpkg(data.jsCode, pkgJson);
+  const data = await getFromBackground({
+    action: 'mdjs+unpkg',
+    mdjs,
+    pkgJson,
+  });
   const iframeViewer = document.createElement('iframe');
   const iframeContent = `
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="https://unpkg.com/github-markdown-css@4.0.0/github-markdown.css">
+    <link rel="stylesheet" href="${chrome.extension.getURL('./dist/github-markdown.css')}">
     <style>
       body {
         margin: 0;
@@ -32,7 +37,7 @@ export async function createViewer(mdjs, { type, width, height, pkgJson = {} })
         parent.postMessage(JSON.stringify(data), '*');
       });
       observer.observe(document.body);
-      ${executeCode}
+      ${data.jsCode}
     </script>
     <body>
       <div class="markdown-body">
@@ -41,13 +46,10 @@ export async function createViewer(mdjs, { type, width, height, pkgJson = {} })
     </body>
   `;
 
-  iframeViewer.src = `data:text/html;charset=utf-8,${escape(iframeContent)}`;
-
   const position =
     type === 'issue-show' || type === 'readme-show'
       ? `position: absolute; left: 15px; top: 15px;`
       : '';
-
   iframeViewer.setAttribute(
     'style',
     `
@@ -58,8 +60,13 @@ export async function createViewer(mdjs, { type, width, height, pkgJson = {} })
     min-height: ${height}px;
   `,
   );
+  iframeViewer.setAttribute('sandbox', 'allow-scripts');
   iframeViewer.setAttribute('csp', "script-src unpkg.com 'unsafe-inline'; connect-src 'none'");
-
   iframeViewer.setAttribute('iframe-viewer-id', counter);
+
+  // Uses a data url as when using srcdoc the iframe csp rules get ignored?
+  // iframeViewer.setAttribute('srcdoc', iframeContent);
+  iframeViewer.src = `data:text/html;charset=utf-8,${escape(iframeContent)}`;
+
   return { iframe: iframeViewer, id: counter };
 }

src/getFromBackground.js

@@ -0,0 +1,9 @@
+/* global chrome */
+
+export function getFromBackground(options) {
+  return new Promise(resolve => {
+    chrome.runtime.sendMessage(options, response => {
+      resolve(response);
+    });
+  });
+}

src/handleIssuePage.js

@@ -1,5 +1,5 @@
 /* eslint-disable no-await-in-loop */
-import { isMdjsContent } from '../dist/index.js';
+import { isMdjsContentFork } from './isMdjsContentFork.js';
 import { createViewer } from './createViewer.js';
 import { createTriggerViewer } from './createTriggerViewer.js';
 
@@ -26,7 +26,7 @@ function handleCommentPreviews() {
         '.js-preview-body',
       );
 
-      if (textarea && textarea.value && isMdjsContent(textarea.value)) {
+      if (textarea && textarea.value && isMdjsContentFork(textarea.value)) {
         childMutationToHappen(previewBody).then(() => {
           const dimensions = previewBody.getBoundingClientRect();
           createViewer(textarea.value, {
@@ -55,7 +55,7 @@ export async function handleIssuePage({ node = document } = {}) {
     const textarea = issueMsgNode.querySelector(
       '[name=issue_comment\\[body\\]], [name=issue\\[body\\]], [name=commit_comment\\[body\\]], [name=pull_request\\[body\\]]',
     );
-    if (textarea && textarea.value && isMdjsContent(textarea.value)) {
+    if (textarea && textarea.value && isMdjsContentFork(textarea.value)) {
       const issueBody = issueMsgNode.querySelector('.d-block.js-comment-body');
       issueBody.style.position = 'relative';
       const button = createTriggerViewer(textarea.value, {

src/handleMarkdownPage.js

@@ -1,5 +1,6 @@
-import { isMdjsContent } from '../dist/index.js';
+import { isMdjsContentFork } from './isMdjsContentFork.js';
 import { createTriggerViewer } from './createTriggerViewer.js';
+import { getFromBackground } from './getFromBackground.js';
 
 function getPkgJsonUrl(urlString) {
   const lengthToFirstSlashAfterBlob = urlString.indexOf('/', urlString.indexOf('blob/') + 5);
@@ -21,15 +22,23 @@ export async function handleMarkdownPage({ url = document.location.href, root =
   const fetchUrl = url.includes('/blob/') ? url : `${url}/blob/master/README.md`;
   const mdBody = root.querySelector('#readme .markdown-body');
   if (mdBody) {
-    const responseMdjs = await fetch(getMdjsUrl(fetchUrl));
-    const responsePkgJson = await fetch(getPkgJsonUrl(fetchUrl));
+    const responseMdjs = await getFromBackground({
+      action: 'fetch',
+      fetchProcess: 'text',
+      url: getMdjsUrl(fetchUrl),
+    });
+    const responsePkgJson = await getFromBackground({
+      action: 'fetch',
+      fetchProcess: 'json',
+      url: getPkgJsonUrl(fetchUrl),
+    });
 
     // if HTTP-status is 200-299
     if (responseMdjs.ok && responsePkgJson.ok) {
-      const text = await responseMdjs.text();
-      if (isMdjsContent(text)) {
+      const text = await responseMdjs.data;
+      if (isMdjsContentFork(text)) {
         mdBody.style.position = 'relative';
-        const pkgJson = await responsePkgJson.json();
+        const pkgJson = await responsePkgJson.data;
         const viewer = createTriggerViewer(text, { type: 'readme-show', pkgJson });
         mdBody.appendChild(viewer);
       }

src/ideas/mdjsInBackground.js

@@ -0,0 +1,19 @@
+/**
+ * Check if a given text uses any of the mdjs features
+ *
+ * @param {string} text
+ * @returns {boolean}
+ */
+export function isMdjsContentFork(text) {
+  if (!text) {
+    return false;
+  }
+  switch (true) {
+    case text.includes('```js script'):
+    case text.includes('```js story'):
+    case text.includes('```js preview-story'):
+      return true;
+    default:
+      return false;
+  }
+}

src/isMdjsContentFork.js

@@ -3037,6 +3037,11 @@ github-markdown-css@^3.0.1:
   resolved "https://registry.yarnpkg.com/github-markdown-css/-/github-markdown-css-3.0.1.tgz#d08db1060d2e182025e0d07d547cfe2afed30205"
   integrity sha512-9G5CIPsHoyk5ObDsb/H4KTi23J8KE1oDd4KYU51qwqeM+lKWAiO7abpSgCkyWswgmSKBiuE7/4f8xUz7f2qAiQ==
 
+github-markdown-css@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/github-markdown-css/-/github-markdown-css-4.0.0.tgz#be9f4caf7a389228d4c368336260ffc909061f35"
+  integrity sha512-mH0bcIKv4XAN0mQVokfTdKo2OD5K8WJE9+lbMdM32/q0Ie5tXgVN/2o+zvToRMxSTUuiTRcLg5hzkFfOyBYreg==
+
 github-slugger@^1.1.1:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/github-slugger/-/github-slugger-1.3.0.tgz#9bd0a95c5efdfc46005e82a906ef8e2a059124c9"