Comments (4)
frenetic43
commented on June 12, 2024
UPDATE
I just found this also affects internal CSS style tags.
<style>
#settings {
& .content {
quotes: "" "";
& .icon {}
}
}
</style>from preact-render-to-string.
marvinhagemeister
commented on June 12, 2024
Yes, this affects any text content in HTML, regardless of the element used. We basically have two choices:
- Remove the restriction for
styleandscriptwhich will lead to people opening themselves and their users up to XSS injections attacks. This would lead to folks saying that "Preact is insecure" - Keep the current way which means it's a little more tedious, but also forces the developer to acknowledge that this is a potentially dangerous path and that they need to ensure proper security practices on their own.
For completely static strings like in your examples this would be perfectly fine. But from Preact's point of view we don't know how the string was created.
let username = getUserNameFromRequest();
<script>
// Without escaping this line is a XSS vulnerability
let username = {username};
console.log(username)
</script>Since Preact isn't tied to a compiler and only sees the final string, it cannot make any assumptions that it's secure to use. For this reason the current behavior exists. This behavior could be changed in meta-frameworks which typically use compilers to inspect the original source code. But in Preact itself this is something very risky to change in regards to security of users. It's very unlikely that we will change that in Preact.
from preact-render-to-string.
frenetic43
commented on June 12, 2024
Yeah, I pretty much expected that was the case.
Honestly, the entire reason for opening this issue was, as a new user to preact, it didn't occur to me that this might even be a problem, and documentation is scarce enough that it took an entire day just to figure out why my code wasn't working.
Hopefully, just by making this post any others that run into the same issue can save themselves some time.
At the very least documentation on dangerouslySetInnerHTML should be improved. The only official documentation (for preact) I could find was here. It took a combination of looking at the source code (to even know it was an option), StackOverflow posts, and React's documentation to figure out the right syntax to make it work.
As for making the code pretty again, it's easy enough to write a wrapper function.
Also, since the reason for this post is to save some time for others, I should probably add an example of using dangerouslySetInnerHTML. I just forgot.
NOTE: this example is using both HTM and a did-it-myself CSS (strips comments, minifies, returns string) tagged template literals.
const STYLES = css`
#settings {
& .content {
quotes: "" "";
& .icon {}
}
}
`;
// Must use an object as { __html: 'content to inject' }
const innerHTMLCSS = { __html: STYLES };
function injectCSS () {
return html`
<style dangerouslySetInnerHTML=${ innerHTMLCSS } ></style>
`;
}
const IMPORT_MAP = {
imports: {
lazyload: "./lazyload.js"
}
};
function injectImportMap () {
return html`
<script
type="importmap"
dangerouslySetInnerHTML=${ { __html: JSON.stringify(IMPORT_MAP) } }
></script>
`;
}
export class Head extends Component {
render (_props: unknown) {
return html`
<head>
<meta charset="UTF-8" />
${injectImportMap()}
<script src="./core/index.ts" type="module"></script>
${injectCSS()}
</head>
`;
}
}from preact-render-to-string.
Related Issues (20)
- Async Render for Async Components in the tree?
- Behavior for falsy data attributes not same as preact.
- 5.2.5 breaks server side rendering of @preact/signals HOT 2
- renderToString with {pretty: true} causes undesirable newlines with text nodes HOT 1
- Rendering asynchronous component throws an error HOT 9
- Meta charset not rendered as expected HOT 1
- Void elements have whitespace at closing
- Using effects from @preact/signals causes memory leak HOT 2
- CommonJS bundle broken for v6 HOT 1
- unpkg package seems failed HOT 2
- Unable to import shallowRender from preact-render-to-string/jsx due to TypeScript type errors
- preact and htm function does not return html when ssr rendered from mjs file HOT 3
- xlink:href becomes xlink::href
- `options._diff` not called for implicit Fragments HOT 2
- `preact/debug` warnings not thrown because `vnode.__k` is not set
- Stream Rendering Roadmap HOT 2
- Invalid nesting detection with `preact/debug` HOT 1
- Incorrect jsx type definition HOT 2
- renderToStringAsync seems to be unexported
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from preact-render-to-string.