Gatsby XSS Prevention

Question

Я читал, что React предотвращает только XSS у детей, а не реквизит.Является ли этот код уязвимостью XSS?

import React from "react"
import { graphql } from "gatsby"import Layout from "../components/layout"

export default ({ data }) => (  <Layout>
    <h1>About {data.site.siteMetadata.title}</h1>
    <p>{data.body}</p>
    <img src={data.url} />
  </Layout>
)

Должен ли я использовать дочерние элементы и называть компонент следующим образом?

(data) => <Component>
  <h1>About {data.site.siteMetadata.title}</h1>
  <p>{data.body}</p>
  <img src={data.url} />
</Component>

вместо:

(data) => <Component {data} />

Answer 1

Этот фрагмент не является уязвимым для XSS, вы можете проверить его самостоятельно.

// import React and others ...

function MyComponent({ inject, children }) {
  return (
    <main>
      <div>{inject}</div>
      <div>{children}</div>
    </main>
  );
}

function App() {
  return (
    <MyComponent inject="<script>console.log('Executed from prop')</script>">
      {'<script>console.log("Executed from children")</script>'}
    </MyComponent>
  );
}

Теги скрипта отображаются как строковые узлы.Единственный способ обойти это, используя prop dangerouslySetInnerHTML, сделать вас уязвимым для XSS, отсюда и название.

Надеюсь, это поможет!