Make sure to read this post before raising a thread here:
Then tell us:
-
What language is this for?
Javascript / Typescript
MERN stack with Server Side Rendering (Next.js) -
Which rule?
S5334 -
Why do you believe it’s a false-positive/false-negative?
False-Negative on two injection flaws.
- React page uses
dangerouslySetInnerHTML
to render what is coming from a request is an obvious XSS which is not flagged. ctx.req.params?.slug
is coming from Express dynamic route and using tainted data to make a server side call.
-
Are you using
SonarQube - which version?
Enterprise Edition Version 9.9.2 (build 77730) -
How can we reproduce the problem? Give us a self-contained snippet of code (formatted text, no screenshots)
// pages/cms-pages/category-page.page.tsx
import React from 'react';
import getCmsService from '@webapp/shared/src/utils/cms-service';
...
const Page = withLayout((props: any) => {
const {
document: { title, content },
} = props;
return (
<div>
<Wrapper mobileWidth={10} mobileOffset={1} desktopWidth={12} desktopOffset={6}>
<h1 dangerouslySetInnerHTML={{ __html: title }} />
<div dangerouslySetInnerHTML={{ __html: content }} />
</Wrapper>
</div>
);
});
Page.getInitialProps = async (ctx: any) => {
const document = (await getCmsService().getPage(ctx.req.params?.slug)) || [];
return { document, pageClass: 'plz-page' };
};
export default Page;
// @webapp/shared/src/utils/cms-service.ts
import axios from 'axios';
...
class CmsService {
constructor(apiUrl) {
this.api = axios.create({
baseURL: apiUrl,
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
},
});
}
async getPage(slug) {
const response = await this.api.get(`/cms2/pages/${slug}`);
return response.data;
}
}
export default function getCmsService() {
return new CmsService(publicEnv.BASE_URL);
}