All left angle brackets are HTML encoded?

ooker777 commented 9 months ago

routes/_app.tsx:

import { type PageProps } from "$fresh/server.ts";
export default function App({ Component }: PageProps) {
  return (
        <Component />
  );
}

routes/test.tsx:

import { CSS, render } from "https://deno.land/x/gfm/mod.ts";

const markdown = `# Hello, world!`

const body = render(markdown, {
  baseUrl: "https://example.com",
});

export default function a() {
    return <main data-color-mode="light" data-light-theme="light" data-dark-theme="dark" class="markdown-body">
    {body}
    </main>
}

Result: <!DOCTYPE html><html><head><title>fresh-project2</title><meta charset="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1.0"/><link rel="stylesheet" href="[/styles.css](view-source:http://localhost:8000/styles.css)"/><script src="[/_frsh/fresh_dev_client.js](view-source:http://localhost:8000/_frsh/fresh_dev_client.js)" nonce="dd12d46ea6e34fee90f20e87b35e0ec6" type="module"></script></head><body><main data-color-mode="light" data-light-theme="light" data-dark-theme="dark" class="markdown-body"><h1 id="hello-world"><a class="anchor" aria-hidden="true" tabindex="-1" href="#hello-world"><svg class="octicon octicon-link" viewbox="0 0 16 16" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg></a>Hello, world!</h1></main></body></html>

Is there anything I did wrong?

Jabolol commented 9 months ago

Is there anything I did wrong?

fresh escapes those tags, you'll need to use dangerouslySetInnerHTML.

export default function a() {
  return (
    <main
      data-color-mode="light"
      data-light-theme="light"
      data-dark-theme="dark"
      class="markdown-body"
      dangerouslySetInnerHTML={{ __html: body }}
    >
      {body}
    </main>
  );
}

marvinhagemeister commented 9 months ago

Like @Jabolol said, raw unescaped HTML can only be rendered in Preact via dangerouslySetInnerHTML. It's intentionally made a little more difficult to inject raw HTML as it could accidentally open users of your app up to XSS vulnerabilities.

Closing as it's working as expected.

ooker777 commented 9 months ago

@Jabolol thanks. I see that you link to the old doc of React. Why don't you link to the new one?

denoland / deno-gfm

All left angle brackets are HTML encoded? #101