Disable specific localstorage access at runtime (#1079)

Accessing localstorage (eg. `localstorage.getItem('authKey')`) is a
potential security risk when running code that has been shared between
individuals / is untrusted.

This change overrides the specific localstorage method / key access and
provides feedback in the browser console.

Access to localstorage is not entirely blocked as it is used in many
projects / resources eg. [Share Your
World](https://projects.raspberrypi.org/en/projects/share-your-world)
(https://github.com/search?q=repo%3Araspberrypilearning%2Fshare-your-world%20localstorage&type=code)

For more context, see:
https://github.com/RaspberryPiFoundation/documentation/pull/112/files

***

The change can be tested by creating a new HTML project in the editor,
inputting the following and inspecting the console for the output:

```
<script>
localStorage.setItem("foo", "bar")
console.log(localStorage.getItem("foo"))
localStorage.setItem("authKey", "secret")
console.log(localStorage.getItem("authKey"))
</script>
```

As demonstrated here:

![Screenshot 2024-09-25 at 11 47
54](https://github.com/user-attachments/assets/c145fc04-e2c2-4df6-bb87-5d88ee8ea5e5)

Author: grega

CHANGELOG.md

@@ -4,6 +4,12 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## Unreleased
+
+### Added
+
+- Disabling of `localstorage.getItem()` access to `authKey`, `oidc.user:https://staging-auth-v1.raspberrypi.org:editor-api` and `oidc.user:https://auth-v1.raspberrypi.org:editor-api` at runtime (#1079)
+
 ## [0.26.0] - 2024-09-13
 
 ### Added

README.md

@@ -56,7 +56,11 @@ See the section about [deployment](https://facebook.github.io/create-react-app/d
 
 Automated unit tests can be run via the `yarn test` command. These unit tests are written using the JavaScript testing framework `Jest` and make use of the tools provided by the [React Testing Library](https://testing-library.com/docs/). Automated accessibility testing for components is available via the `jest-axe` library. This can be achieved using the `haveNoViolations` matcher provided by `jest-axe`, although this does not guarantee that the tested components have no accessibility issues.
 
-Integration testing is carried out via `cypress` and can be run using the `yarn exec cypress run` commmand. Currently, there are basic `cypress` tests for the standalone editor site, the web component and Mission Zero-related functionality. These can be found in the `cypress/e2e` directory. Screenshots and videos related to the most recent `cypress` test run can be found in `cypress/screenshots` and `cypress/videos` respectively.
+Integration testing is carried out via `cypress` and can be run using:
+* `yarn exec cypress run` to run in the CLI
+* `yarn exec cypress open` to run in the GUI
+
+Currently, there are basic `cypress` tests for the standalone editor site, the web component and Mission Zero-related functionality. These can be found in the `cypress/e2e` directory. Screenshots and videos related to the most recent `cypress` test run can be found in `cypress/screenshots` and `cypress/videos` respectively.
 
 ## Web Component
 

cypress/e2e/spec-html.cy.js

@@ -20,6 +20,46 @@ const makeNewFile = (filename = "new.html") => {
   cy.get("div[class=modal-content__buttons]").contains("Add file").click();
 };
 
+it("blocks access to specific localStorage keys but allows other keys", () => {
+  localStorage.clear();
+  localStorage.setItem("foo", "bar");
+  localStorage.setItem("authKey", "secret");
+  localStorage.setItem(
+    "oidc.user:https://staging-auth-v1.raspberrypi.org:editor-api",
+    "staging-token",
+  );
+  localStorage.setItem(
+    "oidc.user:https://auth-v1.raspberrypi.org:editor-api",
+    "prod-token",
+  );
+
+  cy.visit(baseUrl);
+  cy.get(".btn--run").click();
+  cy.get("iframe#output-frame").should("exist");
+
+  cy.get("iframe#output-frame").then(($iframe) => {
+    const iframeWindow = $iframe[0].contentWindow;
+
+    cy.wrap(iframeWindow).then((win) => {
+      const authKeyResult = win.localStorage.getItem("authKey");
+      expect(authKeyResult).to.equal(null);
+
+      const stagingOidcResult = win.localStorage.getItem(
+        "oidc.user:https://staging-auth-v1.raspberrypi.org:editor-api",
+      );
+      expect(stagingOidcResult).to.equal(null);
+
+      const prodOidcResult = win.localStorage.getItem(
+        "oidc.user:https://auth-v1.raspberrypi.org:editor-api",
+      );
+      expect(prodOidcResult).to.equal(null);
+
+      const fooResult = win.localStorage.getItem("foo");
+      expect(fooResult).to.equal("bar");
+    });
+  });
+});
+
 it("renders the html runner", () => {
   cy.visit(baseUrl);
   cy.get(".btn--run").click();

src/components/Editor/Runners/HtmlRunner/HtmlRunner.jsx

@@ -297,6 +297,55 @@ function HtmlRunner() {
       const indexPage = parse(focussedComponent(previewFile).content);
       const body = indexPage.querySelector("body") || indexPage;
 
+      // insert script to disable access to specific localStorage keys
+      // localstorage.getItem() is a potential security risk when executing untrusted code
+      const disableLocalStorageScript = `
+      <script>
+        (function() {
+          const disallowedKeys = ['authKey', 'oidc.user:https://staging-auth-v1.raspberrypi.org:editor-api', 'oidc.user:https://auth-v1.raspberrypi.org:editor-api'];
+
+          const originalGetItem = window.localStorage.getItem.bind(window.localStorage);
+          const originalSetItem = window.localStorage.setItem.bind(window.localStorage);
+          const originalRemoveItem = window.localStorage.removeItem.bind(window.localStorage);
+          const originalClear = window.localStorage.clear.bind(window.localStorage);
+
+          Object.defineProperty(window, 'localStorage', {
+            value: {
+              getItem: function(key) {
+                if (disallowedKeys.includes(key)) {
+                  console.log(\`localStorage.getItem for "\${key}" is disabled\`);
+                  return null;
+                }
+                return originalGetItem(key);
+              },
+              setItem: function(key, value) {
+                if (disallowedKeys.includes(key)) {
+                  console.log(\`localStorage.setItem for "\${key}" is disabled\`);
+                  return;
+                }
+                return originalSetItem(key, value);
+              },
+              removeItem: function(key) {
+                if (disallowedKeys.includes(key)) {
+                  console.log(\`localStorage.removeItem for "\${key}" is disabled\`);
+                  return;
+                }
+                return originalRemoveItem(key);
+              },
+              clear: function() {
+                console.log('localStorage.clear is disabled');
+                return;
+              }
+            },
+            writable: false,
+            configurable: false
+          });
+        })();
+      </script>
+    `;
+
+      body.insertAdjacentHTML("afterbegin", disableLocalStorageScript);
+
       replaceHrefNodes(indexPage, projectCode);
       replaceSrcNodes(indexPage, projectImages, projectCode);
       replaceSrcNodes(indexPage, projectImages, projectCode, "data-src");

src/components/Editor/Runners/HtmlRunner/HtmlRunner.test.js

@@ -273,25 +273,43 @@ describe("When run is triggered", () => {
   });
 
   test("Runs HTML code and adds meta tag", () => {
-    const indexPageContent =
-      '<head></head><body><p>hello world</p><meta filename="index.html" ></body>';
-    expect(Blob).toHaveBeenCalledWith([indexPageContent], {
-      type: "text/html",
-    });
+    const [generatedHtml] = Blob.mock.calls[0][0];
+
+    expect(generatedHtml).toContain("<p>hello world</p>");
+    expect(generatedHtml).toContain('<meta filename="index.html"');
   });
 
   test("Dispatches action to end code run", () => {
     expect(store.getActions()).toEqual(
       expect.arrayContaining([codeRunHandled()]),
     );
   });
+
+  test("Includes localStorage disabling script for disallowed keys in the iframe", () => {
+    const [generatedHtml] = Blob.mock.calls[0][0];
+
+    expect(generatedHtml).toContain("<script>");
+    expect(generatedHtml).toContain(
+      "Object.defineProperty(window, 'localStorage'",
+    );
+    expect(generatedHtml).toContain("getItem: function(key) {");
+
+    expect(generatedHtml).toContain(
+      "const disallowedKeys = ['authKey', 'oidc.user:https://staging-auth-v1.raspberrypi.org:editor-api', 'oidc.user:https://auth-v1.raspberrypi.org:editor-api']",
+    );
+    expect(generatedHtml).toContain("if (disallowedKeys.includes(key))");
+    expect(generatedHtml).toContain(
+      'localStorage.getItem for "${key}" is disabled',
+    );
+    expect(generatedHtml).toContain("return null;");
+    expect(generatedHtml).toContain("</script>");
+  });
 });
 
 describe("When a non-permitted external link is rendered", () => {
   let store;
   const input =
     '<head></head><body><a href="https://google.test/">EXTERNAL LINK!</a></body>';
-  const output = `<head></head><body><a href="javascript:void(0)" onclick="window.parent.postMessage({msg: 'ERROR: External link'})">EXTERNAL LINK!</a><meta filename="index.html" ></body>`;
 
   beforeEach(() => {
     const middlewares = [];
@@ -326,18 +344,22 @@ describe("When a non-permitted external link is rendered", () => {
     );
   });
 
-  test("Runs HTML code without the link", () => {
-    expect(Blob).toHaveBeenCalledWith([output], {
-      type: "text/html",
-    });
+  test("Transforms the external link and includes the meta tag", () => {
+    const [generatedHtml] = Blob.mock.calls[0][0];
+
+    expect(generatedHtml).toContain('<a href="javascript:void(0)"');
+    expect(generatedHtml).toContain(
+      "onclick=\"window.parent.postMessage({msg: 'ERROR: External link'})\"",
+    );
+    expect(generatedHtml).toContain("EXTERNAL LINK!");
+    expect(generatedHtml).toContain('<meta filename="index.html"');
   });
 });
 
 describe("When a new tab link is rendered", () => {
   let store;
   const input =
     '<head></head><body><a href="index.html" target="_blank">NEW TAB LINK!</a></body>';
-  const output = `<head></head><body><a href="javascript:void(0)" onclick="window.parent.postMessage({msg: 'RELOAD', payload: { linkTo: 'index' }})">NEW TAB LINK!</a><meta filename="some_file.html" ></body>`;
 
   beforeEach(() => {
     const middlewares = [];
@@ -373,16 +395,21 @@ describe("When a new tab link is rendered", () => {
     );
   });
 
-  test("Runs HTML code removes target attribute", () => {
-    expect(Blob).toHaveBeenCalledWith([output], {
-      type: "text/html",
-    });
+  test("Removes target attribute and adds onclick event", () => {
+    const [generatedHtml] = Blob.mock.calls[0][0];
+
+    expect(generatedHtml).not.toContain('target="_blank"');
+    expect(generatedHtml).toContain('<a href="javascript:void(0)"');
+    expect(generatedHtml).toContain(
+      "onclick=\"window.parent.postMessage({msg: 'RELOAD', payload: { linkTo: 'index' }})\"",
+    );
+    expect(generatedHtml).toContain("NEW TAB LINK!");
+    expect(generatedHtml).toContain('<meta filename="some_file.html"');
   });
 });
 
 describe("When an internal link is rendered", () => {
   let store;
-  const output = `<head></head><body><a href="javascript:void(0)" onclick="window.parent.postMessage({msg: 'RELOAD', payload: { linkTo: 'test' }})">ANCHOR LINK!</a><meta filename="internal_link.html" ></body>`;
   beforeEach(() => {
     const middlewares = [];
     const mockStore = configureStore(middlewares);
@@ -417,18 +444,20 @@ describe("When an internal link is rendered", () => {
     );
   });
 
-  test("Runs HTML code without changes apart from meta tag", () => {
-    expect(Blob).toHaveBeenCalledWith([output], {
-      type: "text/html",
-    });
+  test("Transforms internal link and includes meta tag", () => {
+    const [generatedHtml] = Blob.mock.calls[0][0];
+
+    expect(generatedHtml).toContain('<a href="javascript:void(0)"');
+    expect(generatedHtml).toContain(
+      "onclick=\"window.parent.postMessage({msg: 'RELOAD', payload: { linkTo: 'test' }})\"",
+    );
+    expect(generatedHtml).toContain("ANCHOR LINK!");
+    expect(generatedHtml).toContain('<meta filename="internal_link.html"');
   });
 });
 
 describe("When an allowed external link is rendered", () => {
   let store;
-
-  const output = `<head></head><body><a href="https://rpf.io/seefood" onclick="window.parent.postMessage({msg: 'Allowed external link', payload: { linkTo: 'https://rpf.io/seefood' }})">RPF link</a><meta filename="allowed_external_link.html" ></body>`;
-
   beforeEach(() => {
     const middlewares = [];
     const mockStore = configureStore(middlewares);
@@ -456,10 +485,17 @@ describe("When an allowed external link is rendered", () => {
     );
   });
 
-  test("Runs HTML code with the link included", () => {
-    expect(Blob).toHaveBeenCalledWith([output], {
-      type: "text/html",
-    });
+  test("Transforms allowed external link and includes meta tag", () => {
+    const [generatedHtml] = Blob.mock.calls[0][0];
+
+    expect(generatedHtml).toContain('<a href="https://rpf.io/seefood"');
+    expect(generatedHtml).toContain(
+      "onclick=\"window.parent.postMessage({msg: 'Allowed external link', payload: { linkTo: 'https://rpf.io/seefood' }})\"",
+    );
+    expect(generatedHtml).toContain("RPF link");
+    expect(generatedHtml).toContain(
+      '<meta filename="allowed_external_link.html"',
+    );
   });
 });