Gatsby XSS 预防

Question

我读过，React 只能防止 children 中的 XSS，而不是 props。此代码是否存在 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>
)

我应该使用 children 并像这样调用组件吗？

(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 攻击，因此得名。

希望对您有所帮助！

Gatsby XSS 预防

Gatsby XSS Prevention

security

xss

reactjs

gatsby