From fa6a22c27e786c88c314efe532871ff15d5089e0 Mon Sep 17 00:00:00 2001 From: Arty Gus Date: Mon, 23 Sep 2024 20:11:07 +0100 Subject: [PATCH] [BREAKING] Disable overrides via query string by default (#104) * Option to toggle overrides via query string * pnpm chageset * add mention its disabled by default now to summary * update test/url.html * Update changeset, add documentation * Update changeset --------- Co-authored-by: Joel Denning --- .changeset/purple-hornets-kneel.md | 5 +++ docs/configuration.md | 14 +++++++++ docs/security.md | 1 + src/api/js-api.imo.test.js | 50 ++++++++++++++++++++++++++++++ src/api/js-api.js | 39 +++++++++++++---------- test/url.html | 6 +++- 6 files changed, 97 insertions(+), 18 deletions(-) create mode 100644 .changeset/purple-hornets-kneel.md diff --git a/.changeset/purple-hornets-kneel.md b/.changeset/purple-hornets-kneel.md new file mode 100644 index 0000000..9e412e8 --- /dev/null +++ b/.changeset/purple-hornets-kneel.md @@ -0,0 +1,5 @@ +--- +"import-map-overrides": major +--- + +Disable query parameter overrides, by default. Add support for `allow-query-param-override` attribute to `` element, to opt-in to query parameter overrides. diff --git a/docs/configuration.md b/docs/configuration.md index 2b673e3..60532f1 100644 --- a/docs/configuration.md +++ b/docs/configuration.md @@ -161,3 +161,17 @@ To configure domains, add a `` element content="allowlist:*.example.com,example-*.com" /> ``` + +## Query Parameter Overrides + +import-map-overrides has an opt-in feature that allows users to set overrides via the `imo` query parameter on the current page. When enabled, the `imo` query parameter value should be a URL-encoded import map. For example, an override map of `{"imports": {"module1": "/module1.js"}}` would be encoded via https://example.com?imo=%7B%22imports%22%3A%7B%22module1%22%3A%22%2Fmodule1.js%22%7D%7D + +To enable query parameter overrides, add the `allow-query-param-override` attribute to the `` element: + +```html + +``` diff --git a/docs/security.md b/docs/security.md index d16e257..ff59af2 100644 --- a/docs/security.md +++ b/docs/security.md @@ -8,6 +8,7 @@ However, there are things you can do to protect your users from self XSS. Consid 1. (**Most Important and Highly Recommended**) Configure your server to set a [Content-Security-Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) HTTP header for your HTML file. In it, consider safelisting the domains that you trust. Doing so is important to protect your users from XSS and other attacks. 1. Consider removing import-map-overrides from your production application's HTML file, or [configuring a domain list](/docs/configuration.md#domain-list) that disables import map overrides in production. If you properly set a Content-Security-Policy header, this provides no extra security. However, if you have not configured CSP, this will at least make it a bit harder for the user to self XSS. My recommendation is to do CSP instead of this whenever possible. +1. Consider disabling query parameter overrides by removing the `allow-query-param-override` attribute on the `` element for import-map-overrides. See [query parameter overrides documentation](/docs/configuration.md#query-parameter-overrides). ## Node diff --git a/src/api/js-api.imo.test.js b/src/api/js-api.imo.test.js index 6948636..f0d3dc4 100644 --- a/src/api/js-api.imo.test.js +++ b/src/api/js-api.imo.test.js @@ -206,6 +206,56 @@ describe("window.importMapOverrides", () => { scopes: {}, }); }); + + describe("with overrides via query string", () => { + const metaElement = document.createElement("meta"); + const url = new URL(window.location.href); + + beforeEach(() => { + url.searchParams.set( + "imo", + JSON.stringify({ + imports: { package3: "https://cdn.skypack.dev/package33" }, + }) + ); + window.history.replaceState({}, "", url); + document.body.appendChild(metaElement); + }); + + afterEach(() => { + url.searchParams.delete("imo"); + window.history.replaceState({}, "", url); + document.body.removeChild(metaElement); + }); + + it("should return an override map", async () => { + metaElement.setAttribute("name", "importmap-type"); + metaElement.setAttribute("content", "importmap"); + metaElement.setAttribute("allow-query-param-override", ""); + + await setDocumentAndLoadScript(); + + const map = await window.importMapOverrides.getOverrideMap(); + + expect(map).toEqual({ + imports: { package3: "https://cdn.skypack.dev/package33" }, + scopes: {}, + }); + }); + + it("disabled by default", async () => { + metaElement.removeAttribute("allow-query-param-override"); + + await setDocumentAndLoadScript(); + + const map = await window.importMapOverrides.getOverrideMap(); + + expect(map).toEqual({ + imports: {}, + scopes: {}, + }); + }); + }); }); describe("Add/Remove/Enable/Disable overrides", () => { diff --git a/src/api/js-api.js b/src/api/js-api.js index 0da4d48..dc7c606 100644 --- a/src/api/js-api.js +++ b/src/api/js-api.js @@ -70,6 +70,9 @@ function init() { const serverOnly = importMapMetaElement ? importMapMetaElement.hasAttribute("server-only") : false; + const allowQueryParamOverride = importMapMetaElement + ? importMapMetaElement.hasAttribute("allow-query-param-override") + : false; let defaultMapPromise; @@ -109,25 +112,27 @@ function init() { } // get from url if query param exist - const queryParam = getParameterByName( - queryParamOverridesName, - window.location != window.parent.location - ? document.referrer - : window.location.href - ); + if (allowQueryParamOverride) { + const queryParam = getParameterByName( + queryParamOverridesName, + window.location != window.parent.location + ? document.referrer + : window.location.href + ); - if (queryParam) { - let queryParamImportMap; - try { - queryParamImportMap = JSON.parse(queryParam); - } catch (e) { - throw Error( - `Invalid importMap query param - text content must be json` - ); + if (queryParam) { + let queryParamImportMap; + try { + queryParamImportMap = JSON.parse(queryParam); + } catch (e) { + throw Error( + `Invalid importMap query param - text content must be json` + ); + } + Object.keys(queryParamImportMap.imports).forEach((moduleName) => { + setOverride(moduleName, queryParamImportMap.imports[moduleName]); + }); } - Object.keys(queryParamImportMap.imports).forEach((moduleName) => { - setOverride(moduleName, queryParamImportMap.imports[moduleName]); - }); } return overrides; diff --git a/test/url.html b/test/url.html index 61d6932..258ac23 100644 --- a/test/url.html +++ b/test/url.html @@ -6,7 +6,11 @@ Import Map Overrides test - +