fix: Remove .innerHTML from <my-indie-auth> (#29) (#28)

package.json

@@ -28,8 +28,10 @@
   "scripts": {
     "build": "node ./src/build/template.js > ./template.html",
     "start": "npx servor . 8080 --reload",
+    "inner:grep": "grep -rn '\\.innerHTML' src",
+    "inner:count": "grep -r '\\.innerHTML =' src | wc -l",
     "fix": "npx semistandard --fix",
-    "test": "npx semistandard"
+    "test": "npx semistandard && npm run inner:count"
   },
   "semistandard": {
     "XX_globals": [

src/MyElement.js

@@ -60,7 +60,10 @@ export class MyElement extends HTMLElement {
     return `${BASE}/src/components/${id}.tpl.html`;
   }
 
-  // https://gomakethings.com/getting-html-with-fetch-in-vanilla-js/
+  /**
+   * Fetch and attach HTML template from external file.
+   * @see https://gomakethings.com/getting-html-with-fetch-in-vanilla-js/
+   */
   async getTemplate (tag, id = null) {
     // const template = document.getElementById('my-map-template');
     // const templateContent = template.content;
@@ -86,6 +89,21 @@ export class MyElement extends HTMLElement {
     return allTemplates;
   }
 
+  /**
+   * Attach HTML template from local (M)JS file.
+   *
+   * Security: safer than `innerHTML`
+   */
+  _attachLocalTemplate (html) {
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(html, 'text/html');
+
+    const template = doc.querySelector('template');
+    const rootElem = template.content.cloneNode(true);
+
+    this.attachShadow({ mode: 'open' }).appendChild(rootElem);
+  }
+
   _postMessage (data = {}, _type = null) {
     if (!this.channel) {
       this.channel = new BroadcastChannel(CHANNEL_NAME);

src/components/MyIndieAuthElement.js

@@ -1,6 +1,8 @@
 /**
  * Implementation of an "IndieAuth" client in the browser.
-
+ *
+ * @disclaimer Experimental - not for production. Use at your own risk!
+ *
  * @see https://indielogin.com/api
  * @see https://indieauth.net/
  * @copyright © Nick Freear, 03-Oct-2022.
@@ -10,13 +12,8 @@ import { MyElement } from '../MyElement.js';
 
 const { crypto, fetch, location, sessionStorage, URLSearchParams } = window;
 
-/* const KEY_STATE = 'my-indie-auth.state';
-const KEY_SUBMIT = 'my-indie-auth.submit';
-const KEY_AUTH = 'my-indie-auth.auth';
-const KEY_LOGOUT = 'my-indie-auth.logout';
-*/
-
 const TEMPLATE = `
+<template>
 <style>
   form p > * { line-height: 1.5; margin: .4rem 0; }
   button,input { font: inherit; }
@@ -39,6 +36,7 @@ const TEMPLATE = `
   <input type="hidden" name="state" value="[todo]" />
 </form>
 <div id="wrap" hidden><slot><!-- Logged in content. --></slot></div>
+</template>
 `;
 
 export class MyIndieAuthElement extends MyElement {
@@ -48,13 +46,8 @@ export class MyIndieAuthElement extends MyElement {
 
   async connectedCallback () {
     this.$$ = {};
-    // const name = this.getAttribute('name') || 'A name attribute';
-
-    const ROOT = document.createElement('div');
-    ROOT.innerHTML = TEMPLATE;
-
-    this.attachShadow({ mode: 'open' }).appendChild(ROOT);
 
+    this._attachLocalTemplate(TEMPLATE);
     this._initializeLoginForm();
 
     if (this._authenticated) {