🏛️ The Typescript LSP plugin to catch XSS vulnerabilities.
Home Page: https://github.com/kitajs/html
License: MIT License
Caution
This repository was moved to the kitajs/html monorepo as of 10/03/2024.
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
Example:
const postList: JSX.Element[] = posts.map((post) => (
<li>
<PostCard
author={post.author.name}
post={post}
authored={userId === post.authorId}
/>
</li>
));
return <>{postList}</>;
// ~~~~~~~~
// Usage of xss-prone content without `safe` attribute. https://kitajs.github.io/ts-html-plugin#k601ts(0 K601)Its common to write components like the following:
<div>{check ? thingA : thingB}</div>or inside a OR condition
<div>
{thingA || thingB}
{thingA ?? thingB}
</div>Expressions/JSX inside parenthesis should also be "unwrapped"
<div>
Valid: {(<div></div>)}
Valid: {<div></div>}
Error: {('<div></div>')}
Error: {'<div></div>'}
</div>This plugin should not combine their results and emit errors, instead, it should evaluate both thingA and thingB separately. Emitting errors, if any, for each operation. Multiple ternaries and || should also be supported.
It may sound stupid that I'm opening an issue that is exactly the opposite as #1 , but I think this is a simpler one.
I think that the checker is taking the name of the property into account when deciding what is safe and what is not.
Here is the example that is having a false positive:
<div class={`chat-bubble ${message.fromMe ? 'is-me' : ''}`}>
<div safe>{message.body}</div> // <- Here is the error
<footer >
<span safe>type: {message.type}</span>
<span safe>id: {message.whatId}</span>
<span safe>from: {message.from}</span>
</footer>
</div>I'm getting this warning:
You are using the safe attribute on expressions that does not contain any XSS vulnerabilities. Please remove the safe attribute or prepend your variable with `unsafe`. [17091977]
As you can probably deduce from the context, message.body is just a string like type, from and whatId are, exactly the same thing coming from the same object:
(parameter) message: {
id: number;
data: unknown;
type: string;
body: string | null;
whatId: string;
chat_id: string;
from: string;
fromMe: boolean;
timestamp: number;
isForwarded: boolean | null;
}I think the name body is being interpreted as some kind of dom node or something like that, hence it is not being reported as unsafe.
{check && <div />} throws XSS error and should not
Hello, thank you for this nice server-side jsx alternative and plugin for safer operation.
I'm getting what I think it is a false positive in one quite common JSX usage, mapping over a list of elements. I'm just iterating a list and using a component, which has the required safe attributes, but the compiler is complaining at the mapping site. Here are the component and the part where it errors:
/// <reference types="@kitajs/html/htmx.d.ts" />
import '@kitajs/html/register';
import { Elysia } from 'elysia'
import { html } from '@elysiajs/html'
import { SelectChat } from './db/schema'
import { getAllChats, getChatMessages } from './db/db'
const Chat = (chat: SelectChat) => (
<article>
<hgroup>
<h3>
<a
hx-get={`/chats/${chat.id}`}
hx-target="#chats"
>
{chat.name}</a>
</h3>
<h4>
<span> {chat.isGroup ? '👥' : ''} </span>
<span>{chat.automaticAudioTranscription ? '🎤' : ''}</span>
</h4>
</hgroup>
<p safe>{chat.id}</p>
</article >
)
const app = new Elysia()
.use(html())
.get('/', async () => {
const chats = await getAllChats()
return (
<html lang="en">
<head>
<meta charset="utf-8" />
</head>
<body>
<main class='container'>
<div class='grid container-fluid'>
<div class='chats-list'>
{chats.map(({ chats }) => <Chat chat={chats} />)} // <- Error here
</div>
<article id='chats'> </article>
</div>
</main>
</body>
</html>
)
})As you can see, the component is already taking care of escaping any potential issue, so, how can I workaround this?
I am encountering the following warning/error with the tsserver LSP:
error is string | undefined by the way, not an object. I would expect the exact opposite behaviour: no xss-prone warning on the "error" variable, but one on the p tag if it didn't have a safe attribute.
Any thoughts? Thank you!
This plugin should ignore anything put inside a script tag.
// All valid!
<div>
<script>{userInput}</script>
<script>{'alert("hacked")'}</script>
</div>If we are rendering inside a script tag, we really want to execute the code anyways, so no checking should be done anyways.
This behavior should be clearly documented.
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 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.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
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.