From df22e7760f7bb342160fd15b78ae709ddf23a02a Mon Sep 17 00:00:00 2001 From: Justin Date: Thu, 8 Oct 2020 16:21:23 -0700 Subject: [PATCH 1/2] feat: add nonce attribute --- src/index.test.ts | 14 +++++++++++--- src/index.ts | 20 ++++++++++++++++++-- 2 files changed, 29 insertions(+), 5 deletions(-) diff --git a/src/index.test.ts b/src/index.test.ts index 727cff25..fede38f0 100644 --- a/src/index.test.ts +++ b/src/index.test.ts @@ -17,7 +17,7 @@ import { Loader, LoaderOptions } from "."; afterEach(() => { - document.getElementsByTagName('html')[0].innerHTML = ''; + document.getElementsByTagName("html")[0].innerHTML = ""; }); test.each([ @@ -65,8 +65,8 @@ test("setScript adds a script to head with correct attributes", () => { }); test("setScript does not add second script with same id", () => { - new Loader({ apiKey: "foo", id: "bar" })['setScript'](); - new Loader({ apiKey: "foo", id: "bar" })['setScript'](); + new Loader({ apiKey: "foo", id: "bar" })["setScript"](); + new Loader({ apiKey: "foo", id: "bar" })["setScript"](); expect(document.head.childNodes.length).toBe(1); }); @@ -143,3 +143,11 @@ test("loader should wait if already loading", () => { loader.load(); }); + +test("setScript adds a nonce", () => { + const nonce = "bar"; + const loader = new Loader({ apiKey: "foo", nonce }); + loader["setScript"](); + const script = document.head.childNodes[0] as HTMLScriptElement; + expect(script.nonce).toBe(nonce); +}); diff --git a/src/index.ts b/src/index.ts index 35ed9262..02e2076a 100644 --- a/src/index.ts +++ b/src/index.ts @@ -144,6 +144,10 @@ export interface LoaderOptions { * Use a custom url and path to load the Google Maps API script. */ url?: string; + /** + * Use a cryptographic nonce attribute. + */ + nonce?: string; } /** @@ -197,6 +201,11 @@ export class Loader { */ mapIds: string[]; + /** + * See [[LoaderOptions.nonce]] + */ + nonce: string | null; + /** * See [[LoaderOptions.url]] */ @@ -225,6 +234,7 @@ export class Loader { region, version, mapIds, + nonce, url = "https://maps.googleapis.com/maps/api/js", }: LoaderOptions) { this.version = version; @@ -234,6 +244,7 @@ export class Loader { this.language = language; this.region = region; this.mapIds = mapIds; + this.nonce = nonce; this.url = url; } /** @@ -311,9 +322,9 @@ export class Loader { private setScript(): void { if (this.id && document.getElementById(this.id)) { this.callback(); - return; + return; } - + const url = this.createUrl(); const script = document.createElement("script"); script.id = this.id; @@ -322,6 +333,11 @@ export class Loader { script.onerror = this.loadErrorCallback.bind(this); script.defer = true; script.async = true; + + if (this.nonce) { + script.nonce = this.nonce; + } + document.head.appendChild(script); } From c5ff981a4dbf159dd90f3485a11d7cbf2b460da8 Mon Sep 17 00:00:00 2001 From: Justin Date: Thu, 8 Oct 2020 16:33:24 -0700 Subject: [PATCH 2/2] docs: update example with nonce --- examples/index.html | 18 +++++++++++++++--- 1 file changed, 15 insertions(+), 3 deletions(-) diff --git a/examples/index.html b/examples/index.html index ffbf6f29..dfa8abb5 100644 --- a/examples/index.html +++ b/examples/index.html @@ -18,6 +18,11 @@ + + Loader Example - + -