-
Notifications
You must be signed in to change notification settings - Fork 319
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Adds unsafeCss
for composing values into css
#474
Conversation
Some documentation about what common security issues to be aware of, would be a nice addition |
export const unsafeCss = (value: any) => { | ||
return new CSSResult(String(value), constructionToken); | ||
}; | ||
|
||
const textFromCSSResult = (value: CSSResult) => { | ||
if (value instanceof CSSResult) { | ||
return value.cssText; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Consider mentioning unsafeCss in the error message here.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Done.
src/lib/css-tag.ts
Outdated
@@ -37,6 +44,10 @@ export class CSSResult { | |||
} | |||
} | |||
|
|||
export const unsafeCss = (value: any) => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Prefer unknown
to any
here (and generally).
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Done.
src/lib/css-tag.ts
Outdated
@@ -37,6 +44,10 @@ export class CSSResult { | |||
} | |||
} | |||
|
|||
export const unsafeCss = (value: any) => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Documentation? Maybe:
/**
* Wrap a value for interpolation in a css tagged template literal.
*
* This is unsafe because untrusted CSS text can be used to phone home
* or exfiltrate data to an attacker controlled site. Take care to only use
* this with trusted input.
*/
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Done, thanks.
* add docs * refine error message
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM
@kenchris: Good point. Some documentation was added to the function, but I've also filed lit/lit.dev#868 to add some further detail and examples. |
Fixes #451 and #471. Non-literal values can now be included in styling with
css
by using theunsafeCss
function. This is named "unsafe" so users know this they must use this carefully to avoid security issues.