Angular安全专辑 —— CSP防止XSS攻击

这篇具有很好参考价值的文章主要介绍了Angular安全专辑 —— CSP防止XSS攻击。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Angular安全专辑 —— CSP防止XSS攻击,Angular,angular

什么是 CSP(Content Security Policy)

CSPContent Security Policy)是一种Web安全策略,用于减轻和防止跨站脚本攻击(XSS)等安全漏洞。它通过允许网站管理员定义哪些资源可以加载到网页中,从而限制了恶意脚本的执行。

CSP 可以起到什么作用

  • 禁止加载外域代码,防止复杂的攻击逻辑。
  • 禁止外域提交,网站被攻击后,用户的数据不会泄露到外域。
  • 禁止内联脚本执行。
  • 禁止未授权的脚本执行。

如何使用 CSP 解决 XSS 攻击

CSP通过设置HTTP头部中的Content-Security-Policy字段 在白名单策略中,可以使用他来指定浏览器仅渲染或执行来自白名单中的资源。即便是被恶意注入了脚本,因为脚本并不在白名单中,因此不会执行。

Node 为例 创建一个 express 服务,并设置 Content-Security-Policy 请求头, 以下是一个简单的示例将所有的脚本限制为只能从同一域加载,但是允许从google.com加载,这样就可以防止XSS攻击,但是允许使用Google Analytics

const express = require('express');

const app = express();

const port = 3001;

app.use(express.static('public'));

app.use(function (req, res, next) {

  res.setHeader(

    'Content-security-policy',

    `script-src 'self' https://*.google.com` + `img-src 'self'`

  )

  next();

});

app.listen(port, () => {

  console.log(`Example app listening at http://localhost:${port}`)

})

// https://i.newscdn.net/publisher-c1a3f893382d2b2f8a9aa22a654d9c97/2022/11/96aade6fbd470941cc2b13fb939ba174.png

接下来验证一下 CSP 是否生效 在代码中添加限制 img 同源机制,并添加一个接口返回一个 img 通过访问 http://localhost:3001/api/img 会发现页面上的图片无法加载,并在 Console 中输出错误


Angular安全专辑 —— CSP防止XSS攻击,Angular,angular

res.setHeader(
        'Content-security-policy',
        `img-src 'self'`
    )

因为图片的来源不在白名单中,重新将图片域名添加到Content-security-policy 中再次访问 http://localhost:3001/api/img 则可以正常加载图片

 Angular安全专辑 —— CSP防止XSS攻击,Angular,angular

res.setHeader(
        'Content-security-policy',
        `img-src 'self' https://i.newscdn.net`
    )

完整代码 

app.get('/api/img', (req, res) => {
    const html = `<img src='https://i.newscdn.net/publisher-c1a3f893382d2b2f8a9aa22a654d9c97/2022/11/96aade6fbd470941cc2b13fb939ba174.png' alt="">`
    res.setHeader(
        'Content-security-policy',
        `img-src 'self' https://i.newscdn.net`
    )
    res.send(html)
    res.type('.html')
})

常见的CSP指令

default-src: 默认策略,适用于其他资源类型没有指定策略时的默认行为。

script-src: 控制加载脚本的来源。

style-src: 控制加载样式表的来源。

img-src: 控制加载图片的来源。

connect-src: 控制加载数据的来源(如AJAX请求)。

font-src: 控制加载字体的来源。

object-src: 控制加载插件(如Flash)的来源。

frame-src: 控制加载框架的来源。

media-src: 控制加载音视频的来源。文章来源地址https://www.toymoban.com/news/detail-634774.html

到了这里,关于Angular安全专辑 —— CSP防止XSS攻击的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端安全系列(一):如何防止XSS攻击?

    随着互联网的高速发展,信息安全问题已经成为企业最为关注的焦点之一,而前端又是引发企业安全问题的高危据点。在移动互联网时代,前端人员除了传统的 XSS、CSRF 等安全问题之外,又时常遭遇网络劫持、非法调用 Hybrid API 等新型安全问题。当然,浏览器自身也在不断在

    2024年02月02日
    浏览(32)
  • SpringCloud微服务实战——搭建企业级开发框架:微服务安全加固—自定义Gateway拦截器实现防止SQL注入/XSS攻击

     SQL注入是常见的系统安全问题之一,用户通过特定方式向系统发送SQL脚本,可直接自定义操作系统数据库,如果系统没有对SQL注入进行拦截,那么用户甚至可以直接对数据库进行增删改查等操作。   XSS全称为Cross Site Script跨站点脚本攻击,和SQL注入类似,都是通过特定方

    2024年02月03日
    浏览(38)
  • Java中的10种方法防止XSS攻击

    本文介绍了Java中可用的10种方法,用于有效预防跨站脚本攻击(XSS)。这些方法包括输入验证和过滤、安全的HTML和URL编码、Content Security Policy(CSP)的使用、安全的模板引擎和富文本编辑器、用户输入的验证和限制、安全的Cookie设置以及防止跨站点请求伪造(CSRF)。通过实施

    2024年02月16日
    浏览(19)
  • 如何防止xss跨站脚本攻击(代码说明)

    XSS(跨站脚本)攻击是一种常见的网络安全漏洞,攻击者通过在网页中注入恶意脚本代码,从而实现窃取用户信息、盗取会话令牌等攻击目的。为了防止XSS攻击,我们可以采取以下措施: 输入过滤和验证:在接收用户输入时,进行输入过滤和验证,去除或转义用户输入中的特

    2024年02月05日
    浏览(19)
  • .NET项目中使用HtmlSanitizer防止XSS攻击

    最近博客也是上线了留言板功能,但是没有做审核(太懒了),然后在留言的时候可以输入 scriptalert(\\\'xss\\\')/script 标签去让网站弹出提示信息、跳转网页等,这类攻击也被称为XSS攻击。 XSS攻击(跨站脚本攻击)是一种常见的网络安全漏洞,攻击者通过在网页中注入恶意脚本,使

    2024年02月08日
    浏览(24)
  • Angular 使用DomSanitizer防范跨站脚本攻击

    简称XSS,是代码注入的一种,是一种网站应用程序的安全漏洞攻击。它允许恶意用户将代码注入到网页上,其他用户在使用网页时就会收到影响,这类攻击通常包含了HTML和用户端脚本语言(JS)。 XSS攻击通常指的是通过利用网页开发时留下的漏洞,通过巧妙的方法注入恶意指

    2024年04月15日
    浏览(17)
  • springboot-防止sql注入,xss攻击,cros恶意访问

    1.sql注入 sql注入: 把SQL命令插入到Web表单递交或输入域名或页面请求的查询字符串,最终达到欺骗服务器执行恶意的SQL命令 解决方法: 1)无论是直接使用数据库还是使用如mybatis组件,使用sql的预编译,不要用拼接字符串。 2)后台过滤检测:使用正则表达式过滤传入的参数**;

    2024年02月16日
    浏览(23)
  • asp.net core中间件预防防止xss攻击

    上面实现思路是针对json序列化后的string字符串进行编码防止xss攻击 其他实现比如中间件、Action的AOP方法也是可以的,可以自己实现 主要是看web项目使用的是那个json序列化工具newtonsoft就用newtonsoft,system.text.json就用下面的那个

    2024年02月07日
    浏览(29)
  • 前端面试:【XSS、CSRF、CSP】Web安全的三大挑战

    嗨,亲爱的Web开发者!在构建现代Web应用时,确保应用的安全性至关重要。本文将深入探讨三个常见的Web安全威胁:XSS(跨站脚本攻击)、CSRF(跨站请求伪造攻击)和CSP(内容安全策略),以帮助你了解并应对这些威胁。 1. XSS(跨站脚本攻击): XSS是一种攻击方式,攻击者

    2024年02月11日
    浏览(18)
  • 从安全角度分析Angular本地存储

    随着Web应用程序的不断增长,前端开发人员慢慢意识到使用浏览器提供的本地存储技术可以在不使用外部数据库的情况下方便地保存应用程序的数据。Angular作为目前最流行的前端框架之一,也在其API中提供了许多本地存储技术的支持。但是,在使用本地存储时,安全性问题也

    2024年02月13日
    浏览(14)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包