保护网页免受点击劫持的Content Security Policy（CSP）

最新推荐文章于 2024-04-09 13:37:09 发布
最新推荐文章于 2024-04-09 13:37:09 发布
阅读量478 收藏
点赞数
分类专栏： 计算机网络 html dairy 文章标签： 前端 javascript 开发语言 网络
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42560424/article/details/131419947
版权
dairy 同时被 3 个专栏收录
100 篇文章 12 订阅
订阅专栏
计算机网络
7 篇文章 0 订阅
订阅专栏
html
6 篇文章 0 订阅
订阅专栏

84. 保护网页免受点击劫持的Content Security Policy（CSP）

什么是点击劫持？

点击劫持（Clickjacking）是一种网络安全攻击技术，通过在一个网页上放置透明的或误导性的内容，诱使用户在不知情的情况下点击恶意操作。这种攻击技术可以欺骗用户并执行他们不想执行的操作，如点击隐藏的按钮或链接，可能导致敏感信息泄露、支付信息被篡改等风险。

Content Security Policy（CSP）的作用

Content Security Policy（CSP）是一种用于增强网页安全性的安全策略。它通过定义可信任的资源源和加载行为，限制了网页中的内容来源，从而防止点击劫持等攻击。CSP提供了一系列的指令，允许网页开发者明确控制浏览器加载和执行的资源。

设置CSP策略

要设置CSP策略，可以通过添加<meta>标签或响应头的方式来告知浏览器该网页的安全策略。

使用<meta>标签设置CSP策略

在网页的头部添加以下<meta>标签来设置CSP策略：

<meta http-equiv="Content-Security-Policy" content="指令1; 指令2; ...">

具体的CSP指令根据实际需求进行配置。以下是一个简单的示例，只允许加载同源的资源：

<meta http-equiv="Content-Security-Policy" content="default-src 'self'">

上述示例中，default-src指令设置了默认策略，其中'self'表示只允许加载同源的资源。这样可以防止网页被其他域名的恶意页面嵌套，减少点击劫持的风险。

使用响应头设置CSP策略

在服务器端，可以通过设置响应头来指定CSP策略。以下是一个Node.js Express框架的示例：

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

app.use((req, res, next) => {
  res.setHeader('Content-Security-Policy', "default-src 'self'");
  next();
});

// 网页路由和其他逻辑...

app.listen(3000, () => {
  console.log('服务器已启动，监听端口 3000');
});

上述示例中，我们使用Express框架在每个请求的响应中设置了Content-Security-Policy头部，将默认策略设置为只允许加载同源的资源。

通过根据实际需求设置适当的CSP策略，我们可以有效地保护网页免受点击劫持等攻击的影响，提升网页的安全性。

每日一游 - 大型端游之俄罗斯方块

俄罗斯方块

<!DOCTYPE html>
<html>
<head>
  <title>俄罗斯方块</title>
  <style>
    .block {
      width: 29px;
      height: 29px;
      border: 1px solid #000;
      position: absolute;
    }
    body {
      background-color: #f8f9fa;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      font-family: Arial, sans-serif;
    }

    #game-area {
      width: 300px;
      height: 600px;
      margin: 0 auto;
      position: relative;
      background-color: #fff;
      border: 4px solid #ced4da;
      border-radius: 8px;
      box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    }

    #score {
      text-align: center;
      font-size: 24px;
      margin-top: 16px;
    }
  </style>
</head>
<body>
  <h1>俄罗斯方块</h1>
  <div id="game-area"></div>

  <div id="score">Score: 0</div>
  <button id="start-button">Start</button>


  <script>
    // 计分系统
    let gameStarted = false;

    function startGame() {
      if (!gameStarted) {
        gameStarted = true;
        score = 0;
        grid = [];
        for (let i = 0; i < 20; i++) {
          grid.push(new Array(10).fill(0));
        }
        clearGameArea();
        generateNewTetromino();
        gameInterval = setInterval(moveDown, 1000);
        document.getElementById('start-button').disabled = true;
      }
    }

    function restartGame() {
      score = 0;
      grid = [];
      for (let i = 0; i < 20; i++) {
        grid.push(new Array(10).fill(0));
      }
      clearGameArea();
      generateNewTetromino();
      gameInterval = setInterval(moveDown, 1000);
      document.getElementById('start-button').disabled = true;
    }

    document.getElementById('start-button').addEventListener('click', startGame);



    let gameInterval;
    const gameArea = document.getElementById('game-area');

    const tetrominoShapes = [
      [
        [1, 1, 1, 1],
        [0, 0, 0, 0],
        [0, 0, 0, 0],
        [0, 0, 0, 0]
      ],
      [
        [1, 1],
        [1, 1]
      ],
      [
        [1, 1, 1],
        [0, 1, 0]
      ],
      [
        [ 1, 1 ],
        [ 0, 1 ],
        [ 0, 1 ],
      ],
      // 添加更多方块形状...
    ];

    let currentTetromino = tetrominoShapes[0];  // 初始方块形状
    let currentX = 0;  // 初始方块横向位置
    let currentY = 0;  // 初始方块纵向位置

    function createBlock() {
      const block = document.createElement('div');
      block.className = 'block';
      return block;
    }

    function drawBlock(x, y) {
      const block = createBlock();
      block.style.left = x + 'px';
      block.style.top = y + 'px';
      gameArea.appendChild(block);
    }

    function clearGameArea() {
      while (gameArea.firstChild) {
        gameArea.removeChild(gameArea.firstChild);
      }
    }

    function drawTetromino() {
      clearGameArea();
      for (let i = 0; i < grid.length; i++) {
        const row = grid[i];
        for (let j = 0; j < row.length; j++) {
          if (row[j]) {
            const x = j * 30;
            const y = i * 30;
            drawBlock(x, y);
          }
        }
      }
      for (let i = 0; i < currentTetromino.length; i++) {
        const row = currentTetromino[i];
        for (let j = 0; j < row.length; j++) {
          if (row[j]) {
            const x = (j + currentX) * 30;
            const y = (i + currentY) * 30;
            drawBlock(x, y);
          }
        }
      }
    }

    function moveDown() {
      if (!checkCollision(0, 1, currentTetromino)) {
        currentY++;
        drawTetromino();
      } else {
        mergeTetromino();
        clearFullRows();
        generateNewTetromino();
        checkGameOver();
      }
    }

    function moveLeft() {
      if (!checkCollision(-1, 0, currentTetromino)) {
        currentX--;
        drawTetromino();
      }
    }

    function moveRight() {
      if (!checkCollision(1, 0, currentTetromino)) {
        currentX++;
        drawTetromino();
      }
    }

    function rotateTetromino() {
      const rotatedTetromino = [];
      for (let i = 0; i < currentTetromino[0].length; i++) {
        const newRow = [];
        for (let j = currentTetromino.length - 1; j >= 0; j--) {
          newRow.push(currentTetromino[j][i]);
        }
        rotatedTetromino.push(newRow);
      }

      if (!checkCollision(0, 0, rotatedTetromino)) {
        currentTetromino = rotatedTetromino;
        drawTetromino();
      }
    }

    function checkCollision(offsetX, offsetY, tetromino) {
      for (let i = 0; i < tetromino.length; i++) {
        for (let j = 0; j < tetromino[i].length; j++) {
          if (tetromino[i][j]) {
            const newX = j + currentX + offsetX;
            const newY = i + currentY + offsetY;
            if (newX < 0 || newX >= 10 || newY >= 20 || (newY >= 0 && grid[newY][newX])) {
              return true;
            }
          }
        }
      }
      return false;
    }

    function mergeTetromino() {
      for (let i = 0; i < currentTetromino.length; i++) {
        for (let j = 0; j < currentTetromino[i].length; j++) {
          if (currentTetromino[i][j]) {
            const x = j + currentX;
            const y = i + currentY;
            grid[y][x] = 1;
          }
        }
      }
    }

    function generateNewTetromino() {
      currentTetromino = tetrominoShapes[Math.floor(Math.random() * tetrominoShapes.length)];
      currentX = Math.floor((10 - currentTetromino[0].length) / 2);
      currentY = 0;
    }

    function clearFullRows() {
      const fullRows = [];
      for (let y = 0; y < grid.length; y++) {
        if (grid[y].every(cell => cell === 1)) {
          fullRows.push(y);
        }
      }

      for (let i = 0; i < fullRows.length; i++) {
        const row = fullRows[i];
        grid.splice(row, 1);
        grid.unshift(new Array(10).fill(0));
      }
    }

    let grid = [];
    for (let i = 0; i < 20; i++) {
      grid.push(new Array(10).fill(0));
    }

    gameInterval = setInterval(moveDown, 1000);

    document.addEventListener('keydown', (event) => {
      if (event.code === 'ArrowLeft') {
        moveLeft();
      } else if (event.code === 'ArrowRight') {
        moveRight();
      } else if (event.code === 'ArrowUp') {
        rotateTetromino();
      } else if (event.code === 'ArrowDown') {
        moveDown()
      }
    });

    function checkGameOver() {
      const topRow = grid[0];
      if (topRow.some(cell => cell === 1)) {
        clearInterval(gameInterval);
        alert('游戏结束! 你的分数为: ' + score);
      }
    }

    function updateScore(linesCleared) {
      score += linesCleared * 10;
    }

    function clearGameArea() {
      while (gameArea.firstChild) {
        gameArea.removeChild(gameArea.firstChild);
      }
    }

    function drawTetromino() {
      clearGameArea();
      for (let i = 0; i < grid.length; i++) {
        const row = grid[i];
        for (let j = 0; j < row.length; j++) {
          if (row[j]) {
            const x = j * 30;
            const y = i * 30;
            drawBlock(x, y);
          }
        }
      }
      for (let i = 0; i < currentTetromino.length; i++) {
        const row = currentTetromino[i];
        for (let j = 0; j < row.length; j++) {
          if (row[j]) {
            const x = (j + currentX) * 30;
            const y = (i + currentY) * 30;
            drawBlock(x, y);
          }
        }
      }
    }

    function mergeTetromino() {
      for (let i = 0; i < currentTetromino.length; i++) {
        for (let j = 0; j < currentTetromino[i].length; j++) {
          if (currentTetromino[i][j]) {
            const x = j + currentX;
            const y = i + currentY;
            grid[y][x] = 1;
          }
        }
      }
      checkGameOver();
    }

    function clearFullRows() {
      const fullRows = [];
      for (let y = 0; y < grid.length; y++) {
        if (grid[y].every(cell => cell === 1)) {
          fullRows.push(y);
        }
      }

      for (let i = 0; i < fullRows.length; i++) {
        const row = fullRows[i];
        grid.splice(row, 1);
        grid.unshift(new Array(10).fill(0));
      }

      updateScore(fullRows.length);
    }

    let score = 0;

    drawTetromino();
  </script>
</body>
</html>
前端每日三省
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
前端安全配置之Content-Security-Policy(csp)
weixin_30326745的博客
12-23 1942
什么是CSP CSP全称Content Security Policy ,可以直接翻译为内容安全策略,说白了,就是为了页面内容安全而制定的一系列防护策略. 通过CSP所约束的的规责指定可信的内容来源（这里的内容可以指脚本、图片、iframe、fton、style等等可能的远程的资源）。通过CSP协定，让WEB处于一个安全的运行环境中。 有什么用? 我们知道前端有个很著名的”同源策略”,...
前端安全那些事
Innocence_0的博客
02-15 148
前端安全那些事
有了这个网络安全面试题，面试就像开了挂！（附PDF）
lvaolan的博客
02-26 441
还有兄弟不知道网络安全面试可以提前刷题吗？费时一周整理的160+网络安全面试题，金九银十，做网络安全面试里的显眼包！王岚嵚工程师面试题（附答案），只能帮兄弟们到这儿了！如果你能答对70%，找一个安全工作，问题不大。对于有1-3年工作经验，想要跳槽的朋友来说，也是很好的温习资料！【完整版领取方式在文末！！​​​​内容实在太多，不一一截图了。
前端内容安全策略（csp）
最新发布
2401_84152317的博客
04-09 594
正值金三银四招聘旺季，很多小伙伴都询问我有没有前端方面的面试题，特地整理出来赠送给大家！资料领取方式：点击这里前往获取正值金三银四招聘旺季，很多小伙伴都询问我有没有前端方面的面试题，特地整理出来赠送给大家！资料领取方式：点击这里前往获取资料领取方式：点击这里前往获取。
Vue进阶（三十三）Content-Security-Policy（CSP）详解
IT全栈 华强工作室
09-05 5653
跨域脚本攻击（XSS）是最常见、危害最大的网页安全漏洞。XSS 攻击利用了浏览器对于从服务器所获取的内容的信任。恶意脚本在受害者的浏览器中得以运行，因为浏览器信任其内容来源，即使有的时候这些脚本并非来自于它本该来的地方。为了防止它，要采取很多编程措施（比如大多数人都知道的转义、过滤HTML）。很多人提出，能不能根本上解决问题，即浏览器自动禁止外部注入恶意脚本？这就是"内容安全策略"（，缩写CSP）的由来。CSP。
内容安全策略 Content-Security-Policy
qq_30436011的博客
10-24 3万+
1、限制资源获取：限制网页当中一系列的资源获取的情况，从哪里获取，请求发到哪个地方限制方式：default-src限制全局的和链接有关的作用范围根据资源类型（connect-src、img-src等），限制资源范围2、报告资源获取越权：在网页当中获取了一些我们不应该获取的资源的时候，给服务进行报告，报告资源获取越权，然后做出调整之所以报这个错误，就是我们加了这个头的作用。这个时候 inline脚本还是不能执行的。如果引入外链的脚本文件，则会报错，这样就可限制，只能使用我们本站使用的脚本。
electron请求接口报错，meta标签设置csp安全策略问题
qq825871092的博客
07-06 547
如果直接去掉content中定义的内容安全策略，electron会报警告，因为从2.0版本开始，如果使用electron的开发人员没有定义Content-Security-Policy，Electron就会在DevTool console发出警告。因为没有在meta标签中定义connect-src所以采用默认的default-src的策略 因为设置成了’self’，所以这里请求的资源只允许同源的。该处的采用 任保留’self’ 再此基础上 加上指定域名的资源。
CSP内容安全策略
dzqxwzoe的博客
01-09 1511
内容安全策略 (CSP是一个附加的安全层，有助于检测和缓解某些类型的攻击，包括跨站点脚本（XSS）和数据注入攻击。这些攻击用于从数据窃取到网站污损或恶意软件分发的所有事情。
Nginx配置Http响应头安全策略
RisunJan的博客
10-22 1万+
1. 防止跨站脚本攻击（XSS）：通过设置`CSP(Content-Security-Policy)`，可以限制浏览器只加载和执行来自特定来源的脚本，从而防止恶意脚本注入和执行。 2. 防止点击劫持攻击：通过设置`X-Frame-Options`响应头，可以防止网页被嵌入到其他网站的`iframe`中，避免用户在不知情的情况下触发恶意代码。 3. 提高网站安全性：通过设置`STS(Strict-Transport-Security)`响应头，强制浏览器使用`HTTPS协议`与服务器通信，从而防止信息在传输过
CSP 内容安全策略入门
qq_53058639的博客
01-09 714
最近在修复公司系统一个图片导出的功能，无法导出图片。
koa-csp：用于设置响应头：Content-Security-Policy
02-03
这是Koa2中间件，用于设置响应标头Content-Security-Policy 安装 npm install koa-csp yarn add koa-csp 用法 import Koa from 'koa' ; import csp from 'koa-csp' ; const app = new Koa ( ) ; app . use ( csp ( ...
fastify-csp:固定插件以设置Content-Security-Policy标头
05-08
固定插件以设置Content-Security-Policy标头。 为什么？ 您可能知道是使用的。 您也可以将其用作fastify的中间件。 那么，为什么我做了这个插件？ 您可能会在找到原因，并希望您喜欢它。 :) 区别 该插件已通过...
Content-Security-Policy.md
06-05
如何设置meta 标签防止XSS攻击,以及CSP的一些说明, CSP 大大增强了网页的安全性。攻击者即使发现了漏洞，也没法注入脚本，除非还控制了一台列入了白名单...一种是通过 HTTP 头信息的`Content-Security-Policy`的字段。
csp：PSR-15中间件，将Content-Security-Policy标头添加到响应中
02-17
中间件/ csp 使用库在响应中添加标头的中间件。... composer require middlewares/csp例子use ParagonIE \ ...遗产为旧的浏览器生成旧的CSP标头（ X-Content-Security-Policy和X-Webkit-CSP ）。 默认情况下为true但您可
CSP（Content Security Policy）是一种用于增强 Web 应用程序安全性的安全标头.docx
04-01
csp
http内容安全策略Content Security Policy(CSP)
focus on security
08-24 5576
内容安全策略CSP是安全性的附加层，有助于检测和缓解某些类型的攻击，包括跨站点脚本(https://owasp.org/www-community/attacks/xss/)和数据注入攻击。这些攻击可用于从数据盗窃，站点损坏到恶意软件分发的所有方面。 CSP被设计为完全向后兼容（除CSP版本2，其中有在向后兼容性一些明确提到的不一致性）。不支持它的浏览器仍然可以与实现它的服务器一起使用，反之亦然：不支持CSP的浏览器只是忽略它，照常运行，默认为Web内容的标准同源策略。如果站点不提供CSP标头，则浏览器同
Web 安全之内容安全策略详解（Content-Security-Policy,CSP）
乌龙茶不甜的博客
04-27 1万+
1.CSP 简介 内容安全策略（Content Security Policy，简称CSP）是一种以可信白名单作机制，来限制网站是否可以包含某些来源内容，缓解广泛的内容注入漏洞，比如 XSS。 简单来说，就是我们能够规定，我们的网站只接受我们指定的请求资源。默认配置下不允许执行内联代码（2.CSP 使用方式 CSP可以由两种方式指定： HTTP Header 和 HTML。 通过定义在HTTP header 中使用： "Content-Security-Policy:" 策略集 通过定义在 HTML me
“default-src ‘self‘“‘script-src‘因为它违反了以下内容安全策略指令：“default src‘self‘”。
Caiabcd的博客
05-04 1万+
错误信息 Refused to execute inline script because it violates the following Content Security Policy directive: "default-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256- kPY6ovEPaw5y+RgWpejDaoJa2JT9tURMxvKvnhgv1XM='), or a nonce ('nonce-...')
内容安全策略（content-security-policy）
热门推荐
我的LOG
12-31 3万+
iframe 在使用iframe 的时候 <iframe style="border:0;width:100%;height:100%" src="https://github.com/join"/> 经查 报的是 Refused to frame ‘https://github.com/’ because an ancestor violates the following Content Security Policy directive: “frame-ancestors ‘non
c# 的Content-Security-Policy(csp)配置
09-02
C# 中的 Content-Security-Policy (CSP) 配置用于设置网页中的安全策略，以防止一些常见的网络攻击，例如跨站脚本攻击 (XSS) 和点击劫持等。下面是一个示例的 CSP 配置： ```csharp using Microsoft.AspNetCore.Builder; using Microsoft.Extensions.DependencyInjection; public class Startup { public void ConfigureServices(IServiceCollection services) { // 添加 CSP 配置 services.AddAntiforgery(options => { options.HeaderName = "X-XSS-Protection"; options.HeaderValue = "1; mode=block"; }); } public void Configure(IApplicationBuilder app) { // 使用 CSP 配置 app.Use(async (context, next) => { context.Response.Headers.Add("Content-Security-Policy", "default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'"); await next(); }); // 其他中间件 } } ``` 上述示例中，我们使用了 `AddAntiforgery` 方法来设置 `X-XSS-Protection` 头部的值为 `1; mode=block`，以启用浏览器的内置 XSS 保护。接着，在 `Configure` 方法中使用了自定义的中间件来添加 CSP 头部，并指定了一些策略规则。 在上述 CSP 配置中，我们允许了 `default-src`、`script-src` 和 `style-src` 这三个指令，并设置了允许加载资源的源，例如 `'self'` 表示只允许加载同源的资源，`'unsafe-inline'` 表示允许内联的脚本和样式。 请注意，这只是一个简单的示例配置，并不一定适用于所有的情况，具体的 CSP 配置应根据实际需求和安全性考虑进行调整。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端每日三省

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值