Merge pull request #30 from sirenkovladd/escaping-tags

add escaping title and meta tags, fixes #21

Author: ryansolid

src/index.tsx

@@ -14,6 +14,7 @@ export const MetaContext = createContext<MetaContextType>();
 interface TagDescription {
   tag: string;
   props: Record<string, unknown>;
+  setting?: { escape?: boolean };
   id: string;
   name?: string;
   ref?: Element;
@@ -174,14 +175,15 @@ const MetaProvider: ParentComponent<{ tags?: Array<TagDescription> }> = props =>
   return <MetaContext.Provider value={actions}>{props.children}</MetaContext.Provider>;
 };
 
-const MetaTag = (tag: string, props: { [k: string]: any }) => {
+const MetaTag = (tag: string, props: { [k: string]: any }, setting?: { escape?: boolean }) => {
   const id = createUniqueId();
   const c = useContext(MetaContext);
   if (!c) throw new Error("<MetaProvider /> should be in the tree");
 
   useHead({
     tag,
     props,
+    setting,
     id,
     get name() {
       return props.name || props.property;
@@ -193,12 +195,7 @@ const MetaTag = (tag: string, props: { [k: string]: any }) => {
 
 export { MetaProvider };
 
-export function useHead(tagDesc: {
-  tag: string;
-  props: { [k: string]: any };
-  id: string;
-  name: any;
-}) {
+export function useHead(tagDesc: TagDescription) {
   const { addClientTag, removeClientTag, addServerTag } = useContext(MetaContext)!;
 
   createRenderEffect(() => {
@@ -214,30 +211,44 @@ export function useHead(tagDesc: {
   }
 }
 
+function escapeHTML(html: string) {
+  return html.replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+
+function escapeString(str: any) {
+  if (typeof str === "string") {
+      return str.replace(/"/g, '&quot;');
+  }
+  return str;
+}
+
 export function renderTags(tags: Array<TagDescription>) {
   return tags
     .map(tag => {
       const keys = Object.keys(tag.props);
-      const props = keys.map(k => (k === "children" ? "" : ` ${k}="${tag.props[k]}"`)).join("");
-      return tag.props.children
-        ? `<${tag.tag} data-sm="${tag.id}"${props}>${
+      const props = keys.map(k => (k === "children" ? "" : ` ${k}="${escapeString(tag.props[k])}`)).join("");
+      if (tag.props.children) {
             // Tags might contain multiple text children:
             //   <Title>example - {myCompany}</Title>
-            Array.isArray(tag.props.children) ? tag.props.children.join("") : tag.props.children
-          }</${tag.tag}>`
-        : `<${tag.tag} data-sm="${tag.id}"${props}/>`;
+            const children = Array.isArray(tag.props.children) ? tag.props.children.join("") : tag.props.children;
+            if (tag.setting?.escape && typeof children === "string") {
+                return `<${tag.tag} data-sm="${tag.id}"${props}>${escapeHTML(children)}</${tag.tag}>`;
+            }
+            return `<${tag.tag} data-sm="${tag.id}"${props}>${children}</${tag.tag}>`;
+        }
+        return `<${tag.tag} data-sm="${tag.id}"${props}/>`;
     })
     .join("");
 }
 
 export const Title: Component<JSX.HTMLAttributes<HTMLTitleElement>> = props =>
-  MetaTag("title", props);
+  MetaTag("title", props, { escape: true });
 
 export const Style: Component<JSX.StyleHTMLAttributes<HTMLStyleElement>> = props =>
   MetaTag("style", props);
 
 export const Meta: Component<JSX.MetaHTMLAttributes<HTMLMetaElement>> = props =>
-  MetaTag("meta", props);
+  MetaTag("meta", props, { escape: true });
 
 export const Link: Component<JSX.LinkHTMLAttributes<HTMLLinkElement>> = props =>
   MetaTag("link", props);

test/index.spec.tsx

@@ -273,3 +273,38 @@ test("throws error if head tag is rendered without MetaProvider", () => {
     render(() => <Style>{`body {}`}</Style>, div);
   }).toThrowError(/<MetaProvider \/> should be in the tree/);
 });
+
+test("Escaping the title tag", () => {
+  let div = document.createElement("div");
+  const snapshot = '<title>Hello&lt;/title&gt;&lt;script&gt;alert("inject");&lt;/script&gt;&lt;title&gt; World</title>';
+  const dispose = render(
+    () => (
+      <MetaProvider>
+        <div>
+          <Title>{'Hello</title><script>alert("inject");</script><title> World'}</Title>
+        </div>
+      </MetaProvider>
+    ),
+    div
+  );
+  expect(document.head.innerHTML).toBe(snapshot);
+  dispose();
+});
+
+test("Escaping the title meta", () => {
+  let div = document.createElement("div");
+  const snapshot = '<meta content="Text in &quot;quotes&quot;">';
+
+  const dispose = render(
+    () => (
+      <MetaProvider>
+        <div>
+          <Meta content={'Text in "quotes"'} />
+        </div>
+      </MetaProvider>
+    ),
+    div
+  );
+  expect(document.head.innerHTML).toBe(snapshot);
+  dispose();
+});