React中使用dangerouslySetInnerHTML渲染API数据时移除无关文本的方法

针对接口返回商品文本开头带无关注入脚本、需保留后续商品参数内容的需求，可通过前置文本清洗逻辑实现，具体方案如下：

核心思路 #

• 无效脚本段与有效商品内容边界清晰：当前返回结构中，脚本段固定以with(document)开头，有效商品内容固定以Package included:为起始标识，两段内容以空行分隔
• 所有传入dangerouslySetInnerHTML的内容必须先经过滤+安全校验，禁止直接渲染原始接口返回值，避免无关内容展示及XSS安全风险
• 优先用固定标识匹配的方式做截取，稳定性最高，避免误删有效商品信息

代码实现 #

1. 文本清洗工具函数 #

/**
 * 清洗商品详情原始返回值，移除开头注入的无效脚本
 * @param {string} rawContent 接口返回的原始文本
 * @returns {string} 可直接渲染的有效商品内容
 */
const formatProductContent = (rawContent) => {
  if (typeof rawContent !== 'string' || !rawContent.trim()) return ''

  // 匹配有效内容的固定起始标识
  const VALID_CONTENT_START = 'Package included:'
  const startIndex = rawContent.indexOf(VALID_CONTENT_START)
  if (startIndex === -1) {
    console.warn('商品内容格式异常，未匹配到有效信息起始标记')
    return ''
  }

  // 截取有效片段，同时清理多余空行、尺码行末尾冗余逗号
  return rawContent
    .slice(startIndex)
    .trim()
    .replace(/(Size:.*?),,+/g, (match, sizeLine) => sizeLine.trim())
}

2. React 中的使用示例 #

import { useState, useEffect } from 'react'

const ProductDetail = () => {
  const [productParams, setProductParams] = useState('')

  useEffect(() => {
    const getProductData = async () => {
      // 替换为实际的接口请求逻辑
      const res = await fetch('/api/product/detail')
      const rawText = await res.text()
      // 先清洗数据，再存入状态
      setProductParams(formatProductContent(rawText))
    }
    getProductData()
  }, [])

  return (
    <div className="product-params-wrapper">
      {/* 把换行替换为<br/>保证页面换行展示效果，再传入渲染 */}
      <div 
        dangerouslySetInnerHTML={{ 
          __html: productParams.replace(/\n/g, '<br/>') 
        }} 
      />
    </div>
  )
}

export default ProductDetail

适配规则变动的备选方案 #

如果后续接口注入的脚本内容不固定、但始终与有效内容以连续空行分隔，可以换用分段匹配逻辑，适配性更强：

const formatProductContentFlex = (rawContent) => {
  if (typeof rawContent !== 'string' || !rawContent.trim()) return ''
  // 按连续换行拆分内容块，过滤空块
  const blocks = rawContent.split(/\n{2,}/).map(block => block.trim()).filter(Boolean)
  // 过滤掉以注入脚本特征开头的块，剩余即为有效内容
  const validBlocks = blocks.filter(block => !block.startsWith('with(document)'))
  return validBlocks.join('<br/>')
}

安全提示 #

• 若接口返回的商品内容本身包含HTML标签，建议在清洗后额外使用DOMPurify等专业HTML消毒库做安全处理，彻底阻断XSS注入风险
• 尽量推动后端在接口层直接过滤掉注入的无关脚本，从源头减少前端处理成本与安全隐患

内容的提问来源于stack exchange，提问作者Ebn Sina