前端面试题48（有哪些常见的前端安全措施可以防止XSS攻击？）

防止XSS（Cross-Site Scripting）攻击是前端安全中的一个重要方面，以下是一些常见的安全措施：

1. 输入验证与过滤：
   对所有用户输入的数据进行严格的验证和过滤，确保它们不包含恶意脚本。这可以通过白名单或黑名单方法实现：

   • 白名单验证：只允许已知安全的字符或格式通过。
   • 黑名单验证：虽然不如白名单安全，但可以作为辅助手段过滤已知的恶意模式。

2. 输出编码：
   在将用户提供的数据输出到HTML之前，对其进行适当的编码，以防止浏览器将其解释为可执行的脚本。常用的编码方法有：

   • HTML实体编码（例如，<转换为<）。
   • JavaScript编码：如果数据被嵌入到JavaScript字符串中，使用\u转义序列或其它适用的转义规则。
   • CSS编码：当数据用于CSS属性值时，应使用CSS转义规则。

3. Content Security Policy (CSP)：
   设置Content-Security-Policy HTTP头部，限制哪些来源的资源可以加载到网页上，从而减少XSS攻击的风险。例如，你可以指定只有特定域名下的脚本才能执行。

4. HttpOnly Cookie：
   为存储敏感信息的Cookie设置HttpOnly标志，这样脚本就不能通过document.cookie访问这些Cookie，即使存在XSS漏洞，也能保护Cookie不被盗取。

5. Secure Flag for Cookies：
   确保敏感Cookie只通过HTTPS发送，防止在传输过程中被截取。

6. 同源策略（Same-origin Policy）：
   利用浏览器的同源策略限制不同源之间的交互，但需要注意的是，某些类型的请求可能绕过这一策略，因此需要结合其他防护措施。

7. 框架沙箱（Sandboxing IFrames）：
   当使用IFrame嵌入第三方内容时，通过sandbox属性限制其行为，比如禁止脚本执行。

8. 使用安全的API：
   避免使用那些容易引起XSS的危险API，比如eval()，并使用更安全的替代方案。

9. 教育与培训：
   前端开发者应了解XSS攻击的原理和防范措施，进行定期的安全培训。

下面是一个简单的示例，展示如何使用Node.js的express框架设置Content-Security-Policy头部：

const express = require('express');
const app = express();

app.use((req, res, next) => {
    res.setHeader("Content-Security-Policy", "default-src 'self'; script-src 'self' https://trustedscripts.example.com; style-src 'self' https://trustedstyles.example.com;");
    next();
});

app.get('/', (req, res) => {
    res.send('Hello, this page has CSP set up.');
});

app.listen(3000, () => console.log('Example app listening on port 3000!'));

这段代码设置了CSP头部，仅允许从自身源加载默认资源，以及从特定源加载脚本和样式。这只是一个基本示例，实际应用中需要根据实际情况调整策略。