🔒Web安全：深入探究CSP

原文链接：dev.to/vashnavicha...

内容安全策略（CSP）就像你的网站的保镖一样，它告诉浏览器去哪加载像脚本、样式和图片这样的资源。通过配置 CSP，你可以通过限制可以在你站点加载的外部源去阻止像XSS这样有害的攻击。把它当作一个可以将好的和坏的东西拒之门外的安全栅栏，这会使得你的网站对用户来说更安全。

为什么CSP对网络应用来说很重要。

将 CSP（内容安全策略）视为 Web 应用程序的安全卫士。这就像制定规则来保护您的网站免受数字麻烦制造者的侵害。通过 CSP，您可以决定谁可以进入，谁不能进入，确保只有好的东西才能通过。这就像为黑客和网络骗子竖起"禁止进入"🚫 标志👾，确保您的网络应用程序保持安全。

客户端呈现 (CSR)：Web 应用程序通常依赖于客户端呈现，其中浏览器运行 JavaScript 来显示内容。如果恶意脚本被注入到应用程序中，它可以在用户的浏览器中运行，从而面临数据泄露或未经授权的操作的风险。
动态内容：Web 应用程序通常处理动态内容，例如用户输入或来自外部 API 的数据。如果没有 CSP 等安全措施，攻击者就可以利用这些动态部分来运行有害脚本，从而面临安全漏洞或数据被盗的风险。
基于组件的架构：Web 应用程序使用基于组件的结构，让我们可以为 UI 和功能创建可重用的部分。这使得代码更容易重用和维护。然而，它对处理不同组件的安全性提出了挑战，特别是在添加第三方工具时。
防御 XSS 攻击：XSS 是 Web 应用程序中的常见威胁。 CSP 通过设置严格的脚本运行规则、阻止未经授权的脚本以及防御脚本注入攻击来帮助对抗 XSS。

了解 CSP 指令 🧠

default-src：如果未指定其他指令，则设置内容类型的默认源。
script-src：控制哪些脚本可以在页面上执行。
style-src：确定哪些样式表和 CSS 文件可以应用于页面。
img-src：指定允许加载图像的来源。
font-src：控制可以加载字体的源。
connect-src：定义允许发出网络请求的来源。
frame-src：指定页面可以嵌入框架或 iframe 的来源。
media-src：确定加载音频和视频文件的允许来源。
form-action：控制可以发送表单提交的目的地。
base-uri：指定用于解析文档内相对 URL 的基本 URL。

在 Web 应用程序中实施 CSP🛡️

你可以通过元标记（meta标签）或使用 HTTP 标头来实现 CSP。

html 复制代码

<head>
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self'; font-src 'self'; img-src 'self'; frame-src 'self'">
</head>

别担心😉我会解释一下。想象一下你的 HTML 部分就像你网页的安全卫士。这个元标签是它的一组规则，就像一个专门的清单😎告诉什么东西是被允许的。

default-src 'self'：这意味着只允许来自我们网站的内容。任何外部元素都无法潜入！
script-src 'self'：脚本很酷，但前提是它们来自我们的网站。没有来源不明的脚本！
style-src 'self'：样式可以，但同样，它必须来自我们的网站。不要向陌生人借用时尚秘诀！
font-src 'self'：字体可以，但前提是它们属于我们的网站。不要从其他地方借用花哨的字体！
img-src 'self'：欢迎提供图片，但前提是它们来自我们的网站。禁止从其他地方导入照片！
frame-src 'self'：允许使用框架，但必须来自我们的网站。不，他们允许来自陌生网站的框架！

元标记确保我们网页上的所有内容都来自我们自己的网站，使我们免受外界任何意外的影响！⚠️如果您需要允许来自其他来源的内容，您只需将它们添加到现有指令旁边，例如提供的示例。例如：

js 复制代码

script-src 'self' https://vookie.netlify.app/

允许从同一源（网站本身）以及指定的 URL (vookie.netlify.app/) 加载脚本。

当涉及到使用 CSP 保护 Web 应用程序时，安全处理内联脚本至关重要。内联脚本是直接在 HTML 文件中编写的 JavaScript 代码片段，如下所示：

html 复制代码

<script>
  alert("Hello, world! I'm inline script and I'm not allowed if you're using CSP 😒");
</script>

现在，出于安全原因，CSP 通常可能会阻止这些内联脚本。但不要害怕！我们有一个解决方案：使用随机数。

"随机数"就像一个秘密代码，告诉 CSP，"嘿，允许运行这个特定的内联脚本。"

html 复制代码

<head>
  <!-- CSP policy with a nonce -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'nonce-dfghj1234'; style-src 'self'; font-src 'self'; img-src 'self'; frame-src 'self'">

</head>
<body>
  <!-- Include an inline script with the nonce -->
  <script nonce="dfghj1234">
    alert("Hey, I'm an inline script and I'm allowed thanks to CSP! 😄");
  </script>
</body>

在此示例中，"dfghj1234"是我们的随机数。通过将其包含在我们的 CSP 策略中并将其添加到内联脚本中，我们确保允许该脚本运行，即使它是内联的。

HTTP 标头

您还可以将 CSP 标头添加到服务器的 HTTP 响应中。此方法更具可扩展性，并且允许对 CSP 策略进行集中控制。

js 复制代码

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

const app = express();
app.use(helmet.contentSecurityPolicy({
    directives: {
        defaultSrc: ["'self'"],
        scriptSrc: ["'self'", "https://vookie.netlify.app/"]
        // you can add other directives here ...
    }
}));

这将使用 Express 中的头盔中间件配置 CSP 策略。它允许仅从同源（"self"）和 vookie.netlify.app/ 加载脚本。

总之，在 Web 应用程序中实施内容安全策略 (CSP) 对于防范 XSS 攻击和数据注入漏洞等安全威胁至关重要。因此，立即采取必要的步骤，通过 CSP 强化您的 Web 项目并确保您的用户在线安全！🙋‍♀️