BewlyBewly DevSecOps实践：将安全融入开发流程-优快云博客

BewlyBewly DevSecOps实践：将安全融入开发流程

【免费下载链接】BewlyBewly Improve your Bilibili homepage by redesigning it, adding more features, and personalizing it to match your preferences. 项目地址: https://gitcode.com/gh_mirrors/be/BewlyBewly

在现代软件开发中，安全已不再是事后考虑的因素，而是需要贯穿整个开发流程的核心环节。BewlyBewly项目作为一个专注于优化Bilibili主页体验的浏览器扩展，通过一系列DevSecOps实践，将安全融入开发的每一个阶段，确保用户数据安全和应用稳定性。本文将详细介绍BewlyBewly在开发流程中实施的安全措施，包括输入验证、输出净化、认证管理和依赖管理等关键环节。

安全开发框架概述

BewlyBewly项目的DevSecOps实践基于"安全左移"理念，将安全检查和防护措施集成到开发的早期阶段。项目通过代码审查、自动化测试和持续集成等手段，确保安全问题在部署前被发现和修复。以下是项目中与安全相关的核心模块和文件结构：

认证与授权：src/background/messageListeners/api/auth.ts 处理用户认证逻辑，包括登录和登出功能。
输入验证与输出净化：多处组件使用DOMPurify库对用户输入和动态内容进行净化，如src/components/Settings/About/About.vue和src/components/TopBar/components/UserPanelPop.vue。
安全配置：项目的依赖管理和构建配置文件（如package.json和tsconfig.json）确保使用安全的依赖版本和编译选项。

认证与授权安全

用户认证是Web应用安全的第一道防线。BewlyBewly在认证流程中实施了严格的安全措施，确保用户凭证的安全处理和会话管理。

在src/background/messageListeners/api/auth.ts中，项目定义了完整的认证API，包括登出和二维码登录功能。代码中使用了HTTPS协议进行所有认证相关的网络请求，确保数据传输过程中的机密性。例如，登出API的实现如下：

logout: {
  url: 'https://passport.bilibili.com/login/exit/v2',
  _fetch: {
    method: 'post',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
    },
    body: {
      biliCSRF: '',
    },
  },
  params: {
    biliCSRF: '',
  },
  afterHandle: AHS.J_S,
}

此外，项目在处理用户会话时，避免在客户端存储敏感信息，通过合理设置Cookie属性（如HttpOnly和Secure）来防止会话劫持攻击。这些措施确保了用户认证过程的安全性，减少了身份被盗用的风险。

输入验证与输出净化

跨站脚本攻击（XSS）是Web应用中最常见的安全漏洞之一。BewlyBewly通过严格的输入验证和输出净化措施，有效防范XSS攻击。项目广泛使用DOMPurify库对动态生成的HTML内容进行净化，确保所有用户输入和第三方内容在渲染前经过安全处理。

在src/components/Settings/About/About.vue中，项目使用DOMPurify.sanitize()方法净化多语言文本内容：

<div v-html="DOMPurify.sanitize($t('settings.just_wanna_change_the_job_hint'))"></div>

类似地，在用户面板组件src/components/TopBar/components/UserPanelPop.vue中，对用户等级图标进行净化处理：

<div v-html="DOMPurify.sanitize(getLvIcon(userInfo.level_info.current_level))"></div>

这些措施确保了即使在处理动态内容时，也能有效过滤恶意HTML和JavaScript代码，防止XSS攻击。项目还在搜索功能中应用了类似的净化处理，如src/components/SearchBar/SearchBar.vue中的搜索结果渲染：

<span v-html="DOMPurify.sanitize(item.name)" />

依赖管理与安全更新

第三方依赖是安全漏洞的常见来源。BewlyBewly通过严格的依赖管理流程，确保使用的第三方库都是最新且安全的版本。项目的package.json文件中声明了所有依赖项，通过定期运行npm audit或类似工具，可以扫描并修复潜在的安全漏洞。

此外，项目使用pnpm作为包管理器，利用其严格的依赖解析和锁定机制，确保构建过程的一致性和可重复性。pnpm-lock.yaml文件记录了每个依赖项的确切版本，防止在不同环境中引入未经验证的依赖版本。

项目还通过持续集成流程，在每次提交时自动检查依赖安全。这种自动化的安全检查确保了依赖漏洞能够被及时发现和修复，减少了安全风险暴露的时间窗口。

安全编码规范与代码审查

BewlyBewly项目制定了严格的安全编码规范，并通过代码审查流程确保这些规范得到遵守。项目使用ESLint进行静态代码分析，配置文件eslint.config.mjs中包含了多项安全相关的规则，如禁止使用eval函数、限制innerHTML的使用等。

在代码审查过程中，安全是重点关注的方面之一。审查人员会检查是否存在常见的安全漏洞，如：

未验证的用户输入
不安全的DOM操作
敏感信息泄露
不正确的错误处理

通过这种人工审查与自动化工具相结合的方式，项目能够在开发阶段就发现并修复大部分安全问题。

用户数据保护

BewlyBewly重视用户数据的保护，在src/components/Settings/About/About.vue中实现了安全的设置导入导出功能。当用户导出设置时，数据以JSON格式存储，不包含任何敏感信息：

function handleExportSettings() {
  const jsonStr = JSON.stringify(settings.value)
  const blob = new Blob([jsonStr], { type: 'application/json' })
  const url = URL.createObjectURL(blob)
  const a = document.createElement('a')
  a.href = url
  a.download = 'bewly-settings.json'
  a.click()
  URL.revokeObjectURL(url)
}

导入设置时，项目会验证JSON结构，只合并已知的设置字段，防止恶意数据注入：

Object.keys(jsonObject).forEach((key) => {
  if (key in settings.value)
    (settings.value as any)[key] = jsonObject[key]
})

这些措施确保了用户数据在导入导出过程中的安全性，防止恶意配置或数据泄露。

持续安全监控与响应

DevSecOps不仅仅是开发阶段的安全措施，还包括持续的安全监控和事件响应。BewlyBewly通过以下方式实现持续安全监控：

错误监控：项目实现了全面的错误处理机制，确保异常情况不会泄露敏感信息，同时能够及时发现和响应潜在的安全问题。
版本更新检查：在src/components/Settings/About/About.vue中，项目定期检查最新版本，确保用户能够及时获取包含安全修复的更新：

async function checkGitHubRelease() {
  const apiUrl = `https://api.github.com/repos/BewlyBewly/BewlyBewly/releases/latest`
  try {
    const response = await fetch(apiUrl)
    if (!response.ok)
      throw new Error('Network response was not ok')
    const data = await response.json()
    const latestVersion = data.tag_name
    const currentVersion = `v${version}`
    if (latestVersion !== currentVersion)
      hasNewVersion.value = true
  }
  catch {
  }
}

用户反馈渠道：项目提供了多种反馈渠道，如GitHub Issues和Discord社区，以便用户报告安全问题和漏洞。

总结与未来展望

BewlyBewly项目通过一系列DevSecOps实践，将安全无缝集成到开发流程中，实现了"安全左移"的目标。从输入验证、输出净化到认证管理和依赖监控，项目在每个环节都实施了相应的安全措施，确保用户数据安全和应用稳定性。

未来，BewlyBewly将继续加强DevSecOps实践，计划引入更多自动化安全测试工具，如SAST（静态应用安全测试）和DAST（动态应用安全测试），进一步提升项目的安全防护能力。同时，项目将持续关注最新的安全威胁和防护技术，不断优化安全策略，为用户提供更安全、更可靠的浏览体验。

通过这些持续的努力，BewlyBewly不仅为用户提供了优化的Bilibili浏览体验，还树立了浏览器扩展开发中的安全典范，展示了如何在快速迭代的同时不牺牲安全性。

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考