Merge pull request #3 from nint8835/no-xss

Resolve XSS / incorrectly displayed tags

Author: patrick91

packages/astro-meta-tags/package.json

@@ -1,6 +1,6 @@
 {
     "name": "astro-meta-tags",
-    "version": "0.1.3",
+    "version": "0.2.0",
     "author": "Patrick Arminio",
     "license": "MIT",
     "description": "A Dev Toolbar extension to debug meta tags in your Astro website",
@@ -36,4 +36,4 @@
     "peerDependencies": {
         "astro": "^4.0.0"
     }
-}
+}

packages/astro-meta-tags/src/toolbar.ts

@@ -24,31 +24,51 @@ const getWindowContent = () => {
     document.querySelectorAll("meta[property^='twitter:']")
   ).map(getTagTuple);
 
-  console.log(twitterMetaTags);
-
   const getSingleTagHtml = ([property, content]: [string, string]) => {
+    let contentTag: HTMLElement | Text;
     if (["og:image", "twitter:image"].includes(property)) {
-      content = `<img src="${content}" />`;
+      contentTag = document.createElement("img");
+      contentTag.setAttribute("src", content);
+    } else {
+      contentTag = document.createTextNode(content);
     }
 
-    return /* html */ `<dt>${property}</dt><dd>${content}</dd>`;
+    const tagHtml = document.createDocumentFragment();
+
+    const propertyName = document.createElement("dt");
+    propertyName.textContent = property;
+
+    const propertyValue = document.createElement("dd");
+    propertyValue.append(contentTag);
+
+    tagHtml.append(propertyName, propertyValue);
+
+    return tagHtml
   };
 
   const getTagsHtml = (
     title: string,
     tags: [string, string][],
     wrapWithDetails = true
   ) => {
-    const dl = `<dl>${tags.map((tag) => getSingleTagHtml(tag)).join("")}</dl>`;
+    const dl = document.createElement("dl");
+
+    for (const tag of tags) {
+      dl.append(getSingleTagHtml(tag));
+    }
 
     if (!wrapWithDetails) {
-      return dl;
+      return dl.outerHTML;
     }
 
-    return `<details>
-      <summary>${title}</summary>
-      ${dl}
-    </details>`;
+    const details = document.createElement("details");
+    
+    const summary = document.createElement("summary");
+    summary.textContent = title;
+
+    details.append(summary, dl);
+
+    return details.outerHTML;
   };
 
   const standardTags = [