在当今的 web 开发领域，安全已不仅仅是一个时髦词——它变得至关重要。作为全栈开发人员，我们面临着各种各样的威胁，从后端漏洞到客户端漏洞。下面，我们将探讨 JavaScript 安全的三个关键领域：CSRF、点击劫持攻击和内容安全。我们将讨论每种威胁的含义及其影响，并提供实用的建议，在 Node.js 和浏览器环境中如何防范这些威胁。
此处略去部分内容
或者
以下略
CSRF是什么呢？
CSRF 是一种跨站请求伪造攻击，其中恶意网站诱使用户的浏览器在用户已认证的受信任网站上执行不必要的动作。这可能导致意外的更改、未经授权的转账，或数据泄露。
如何防止 CSRF（跨站请求伪造）
在 Node.js（服务器端）这边
- CSRF 令牌（比如 Express.js 中的 csurf 中间件）: 使用中间件（例如 csurf）为每个会话或表单提交生成唯一的 CSRF 令牌。在每次状态改变的请求中验证这些令牌。
用 Express.js 和 csurf 的一个例子：
使用npm安装csurf和cookie-parser中间件：
npm install --save csurf cookie-parser切换到全屏，退出全屏
const express = require('express');
const csurf = require('csurf');
const cookieParser = require('cookie-parser');
const app = express();
app.use(cookieParser());
// 设置 csurf 中间件
const csrfProtection = csurf({ cookie: true });
app.use(csrfProtection);
app.get('/form', (req, res) => {
// 令牌需包含在表单中
res.send(`<form action="/process" method="POST">
<input type="hidden" name="_csrf" value="${req.csrfToken()}">
<input type="text" name="data">
<button type="submit">点击提交</button>
</form>`);
});
app.post('/process', (req, res) => {
// 只在 CSRF 令牌有效时才处理请求
res.send('表单数据已安全处理完毕。');
});
app.listen(3000, () => console.log('服务器运行在 http://localhost:3000'));
全屏查看 退出全屏
在浏览器中
-
SameSite Cookies: 将 SameSite 属性设置为 Lax 或 Strict，以防止它们在跨域请求中被发送。
- 自定义头： 在发送 AJAX 请求时，包含自定义头（如 X-Requested-With），并在服务器端验证这些头信息，以帮助区分合法请求。
2. 点击劫持
点击劫持是什么？
点击劫持攻击这指的是攻击者通过诱使用户点击页面上的某个元素，实际上点击了另一个隐藏的元素，从而达到窃取用户信息或其他恶意目的等。
点击劫持涉及诱使用户点击伪装的UI元素，这些元素通常被其他元素隐藏或遮挡，这可能导致意外操作，比如授权操作、分享数据，甚至执行管理任务。
如何防范点击劫持
-
X-Frame-Options Header: 使用 X-Frame-Options HTTP 头来控制您的内容是否可以嵌入框架中。选项包括：
-
DENY：禁止所有嵌入。 SAMEORIGIN：仅允许同源嵌入。
在 Express.js 中的示例：
app.use((req, res, next) => {
res.setHeader('X-Frame-Options', 'SAMEORIGIN');
// 设置X-Frame-Options头为SAMEORIGIN，防止点击劫持
next();
});
进入全屏，退出全屏
- 内容安全策略 (CSP) ： 在您的 CSP 标头中添加
frame-ancestors指令来控制哪些域可以嵌入您的页面。例如：
app.use((req, res, next) => {
res.setHeader("Content-Security-Policy", "frame-ancestors 'self'");
// 设置Content-Security-Policy头以限制frame-ancestors为自身域
next();
});
全屏模式（点击进入/退出）
- 跳出框架的脚本: 虽然可以使用JavaScript来“跳出”框架，但这些方法不如服务器端的HTTP头部来得可靠。应在服务器端措施之后作为次要手段使用。
……
3. 内容的完整性什么是内容完整度？
内容完整性确保您的网站上提供的内容（例如脚本，样式表）保持其最初来源的完整性，不受篡改。这这对于防止篡改和中间人攻击非常重要，尤其是在使用第三方资源时。
为什么我们应该添加它。
- 信任: 用户可以信任数据和代码来自可信赖的来源。
- 安全: 防止第三方内容受损。
- 合规: 符合要求保证完整性的安全和合规标准。
如何实施内容的完整性
- 子资源完整性 (SRI): SRI 让浏览器可以确认获取的文件（如 JavaScript 库）在传输过程中没有被意外篡改。它需要在链接资源的 HTML 标签中加入一个加密哈希值。
例子：
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="https://example.com/library.js"
integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9Wu0g6a3JmGDXVbDt+u6p1mCA/t9zqXQGHbQ8c"
crossorigin="anonymous"></script>切换到全屏模式 退出全屏
- CSP 哈希: 当必须使用内嵌脚本时，你可以使用 CSP 哈希来指定脚本内容的预期哈希，确保只有经过批准的代码才会被执行。
此处省略内容
结论如下：将坚实的安全实践融入您的JavaScript应用程序不是可选的，而是必不可少的。了解CSRF（跨站请求伪造）、点击劫持以及内容完整性的重要性及其带来的风险，您就可以采取有效的措施来保护您的应用及其用户。
无论你是优化你的 Node.js 后端还是加强客户端防御，这些策略有助于确保你的应用程序在日益敌对的在线环境中保持安全。安全是一个持续的过程——保持警觉，确保你的依赖项保持最新，并始终留意新兴威胁。
推荐阅读
要进一步探索本文中的概念，可以阅读这些资源，以获取关于CSRF、点击劫匪和内容完整性的更详细信息。这些资源提供了更详细的信息。
- 了解 CSRF 攻击详情，请参阅 https://owasp.org/www-community/attacks/csrf
- 查看防止 CSRF 攻击的技巧，请参阅 https://cheatsheetseries.owasp.org/cheatsheets/Cross-Site_Request_Forgery_Prevention_Cheat_Sheet.html
- 了解 Clickjacking 攻击详情，请参阅 https://owasp.org/www-community/attacks/Clickjacking
- 查看防止 Clickjacking 攻击的技巧，请参阅 https://cheatsheetseries.owasp.org/cheatsheets/Clickjacking_Defense_Cheat_Sheet.html
- 了解子资源完整性的详细信息，请参阅 https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity
共同學習，寫下你的評論
評論加載中...
作者其他優(yōu)質(zhì)文章
