react如何安全请求图片

使用 HTTPS 协议

确保图片资源通过 HTTPS 协议加载，避免中间人攻击或数据篡改。在 React 中直接使用 HTTPS URL 即可：

<img src="https://example.com/image.jpg" alt="Secure Image" />

校验图片来源

通过 Content-Security-Policy (CSP) 头限制图片加载的域名，防止恶意资源注入。在 HTML 或服务器配置中添加：

<meta http-equiv="Content-Security-Policy" content="img-src 'self' https://trusted.cdn.com" />

处理动态图片 URL

若图片 URL 来自用户输入或动态数据，需进行转义或验证：

const sanitizeUrl = (url) => {
  try {
    new URL(url); // 验证 URL 格式
    return url.startsWith('https://') ? url : null;
  } catch {
    return null;
  }
};

// 使用
<img src={sanitizeUrl(userInput)} alt="Dynamic Image" />

添加错误和加载状态

通过 onError 和 onLoad 事件处理异常情况，例如替换为备用图片：

<img
  src="https://example.com/image.jpg"
  onError={(e) => (e.target.src = '/fallback.jpg')}
  alt="Fallback Image"
/>

使用 crossorigin 属性

对于跨域图片，设置 crossorigin="anonymous" 避免污染 Canvas 或 CORS 问题：

<img src="https://cross-origin.com/image.jpg" crossorigin="anonymous" />