一、使用内容安全策略

完善的内容安全策略(CSP)是前端应用程序安全的基石。CSP是浏览器中引入的一种标准，用于检测和缓解某些类型的代码注入攻击，包括跨站点脚本（XSS）和点击劫持。

<meta http-equiv="Content-Security-Policy" content="default-src 'none'; script-src 'self'; img-src 'self'; style-src 'self'; connect-src 'self'">

MDN手册：https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy

二、启用XSS保护模式

如果用户输入确实注入了恶意代码，我们可以通过提供 "X-XSS-Protection": "1; mode = block" 头指令来指示浏览器阻止响应。

header("X-XSS-Protection: 1; mode=block"); // php header头

MDN手册：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/X-XSS-Protection

三、禁用iframe嵌入以防止点击劫持攻击

点击劫持是一种攻击，网站A上的用户被诱骗对网站B执行某些操作。为了实现这一点，恶意用户将网站B嵌入到一个不可见的iframe中，然后将iframe放置在网站A上毫无防备的用户的光标之下，因此当用户单击，或者更确切地说，认为他们单击了网站A上的元素时，他们实际上是单击了网站B上的某个东西。

我们可以通过提供 X-Frame-Options 响应头来防止此类攻击，该响应头禁止在框架中呈现网站：

add_header X-Frame-Options sameorigin always; # nginx配置

MDN手册：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/X-Frame-Options

四、限制对浏览器功能和api的访问

使用 Feature-Policy 头指示浏览器拒绝访问我们的应用不需要的某些功能和API。

const helmet = require('helmet');
const app = express();
app.use(helmet.frameguard({ action: "sameorigin" }));

MDN手册：https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Feature-Policy

五、不要泄露referrer值

为了防止referrer 值泄漏，我们将 Referrer-Policy 标头设置为 no-referrer ：

<meta name="referrer" content="no-referrer">

MDN手册：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/meta

六、对第三方脚本使用子资源完整性

对于您使用的所有第三方脚本，请确保在可能的情况下包括 integrity 属性。浏览器具有 Subresource Integrity 功能，该功能可以验证您正在加载的脚本的加密哈希，并确保它未被篡改。

你的 script 标签如下所示：

<script src="https://example.com/example-framework.js"
        integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxy9rx7HNQlGYl1kPzQho1wx4JwY8wC"
        crossorigin="anonymous"></script>

值得说明的是，此技术对第三方库有用，但对第三方服务的作用较小。大多数情况下，当你为第三方服务添加脚本时，该脚本仅用于加载另一个从属脚本。无法检查依赖脚本的完整性，因为可以随时对其进行修改，因此在这种情况下，我们必须依靠严格的内容安全策略。

MDN手册：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/script

链接: https://www.fly63.com/article/detial/8801