XSS(Cross Site Scripting)跨站脚本攻击

原理

页面渲染的数据中包含可运行的脚本。

类型

攻击的基础类型包括:反射型(url参数直接注入)和存储型(存储到DB后读取时注入)。

注入点

HTML节点内容注入

el.innerHTML = "<script>alert(1);<\/script>";

上面的代码不会生效,如果你在浏览器控制台运行就会看见:

'\x3Cscript>alert(1);\x3C/script>'

应该是对script这种特殊的标签进行了转义。

引诱用户触发

el.innerHTML = "<button onclick='alert(1)'>点击我</button>";

和很多方法类似,如果用户主动触发一次,就可以了(有些操作需要主动用户触发,不然没有权限)。

DOM属性注入

比如,在加载图片失败的时候,会调用该元素上的onerror事件,那么我们就可以利用图片加载失败的回调触发:

el.innerHTML = "<img src='/images-404.png' onerror='alert(\"图片加载失败,该我触发了~\");'>";

防御

X-XSS-Protection

浏览器自带防御机制,现在主流浏览器都支持,并且默认都开启了XSS保护,用这个header可以关闭它。它有几种配置:

  • 0:禁用XSS保护;
  • 1:启用XSS保护;
  • 1:mode=block:启用XSS保护,并在检查到XSS攻击时,停止渲染页面(例如IE8中,检查到攻击时,整个页面会被一个#替换)。

    对特定字符做转义

    比如如果需要innerHTML的模板中包含script等敏感标签,就把标签转义。

内容安全策略

也就是CSP(Content Security Policy),用于指定哪些内容可执行。

我们可以在http响应头中设置Content-Security-Policy,比如,我们有如下的需求:

  • 图片可以从任何地方加载(注意 "*" 通配符)
  • 多媒体文件仅允许从 media1.com 和 media2.com 加载(不允许从这些站点的子域名)
  • 可运行脚本仅允许来自于 userscripts.example.com
    如此就可以这样设置:

    Content-Security-Policy: default-src 'self'; img-src *; media-src media1.com media2.com; script-src userscripts.example.com

    同时meta中也支持设置Content-Security-Policy:

    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src https://*; child-src 'none';">
102 声望
10 粉丝
0 条评论
推荐阅读
Blender中如何纹理贴图入门
点击顶部的“Shading”按钮后,进入如下视图:然后点击“图形纹理”查看的“打开”按钮:然后,如下图,把“颜色”和“基础色”连接起来:到这里,纹理应该就出来了。如果没有出来,可能是“视图着色方式”选择的不对,如下:

zxl20070701阅读 632

封面图
程序猿必读-防范CSRF跨站请求伪造
CSRF(Cross-site request forgery,中文为跨站请求伪造)是一种利用网站可信用户的权限去执行未授权的命令的一种恶意攻击。通过伪装可信用户的请求来利用信任该用户的网站,这种攻击方式虽然不是很流行,但是却...

mylxsw22阅读 16k评论 12

安全地在前后端之间传输数据 - 「3」真的安全吗?
在「2」注册和登录示例中,我们通过非对称加密算法实现了浏览器和 Web 服务器之间的安全传输。看起来一切都很美好,但是危险就在哪里,有些人发现了,有些人嗅到了,更多人却浑然不知。就像是给门上了把好锁,还...

边城31阅读 7.1k评论 5

封面图
涨姿势了,有意思的气泡 Loading 效果
今日,群友提问,如何实现这么一个 Loading 效果:这个确实有点意思,但是这是 CSS 能够完成的?没错,这个效果中的核心气泡效果,其实借助 CSS 中的滤镜,能够比较轻松的实现,就是所需的元素可能多点。参考我们...

chokcoco19阅读 2k评论 2

在前端使用 JS 进行分类汇总
最近遇到一些同学在问 JS 中进行数据统计的问题。虽然数据统计一般会在数据库中进行,但是后端遇到需要使用程序来进行统计的情况也非常多。.NET 就为了对内存数据和数据库数据进行统一地数据处理,发明了 LINQ (L...

边城17阅读 1.9k

封面图
你可能不需要JS!CSS实现一个计时器
CSS现在可不仅仅只是改一个颜色这么简单,还可以做很多交互,比如做一个功能齐全的计时器?样式上并不复杂,主要是几个交互的地方数字时钟的变化开始、暂停操作重置操作如何仅使用 CSS 来实现这样的功能呢?一起...

XboxYan20阅读 1.5k评论 1

封面图
「彻底弄懂」this全面解析
当一个函数被调用时,会创建一个活动记录(有时候也称为执行上下文)。这个记录会包含函数在 哪里被调用(调用栈)、函数的调用方法、传入的参数等信息。this就是记录的其中一个属性,会在 函数执行的过程中用到...

wuwhs17阅读 2.3k

封面图
102 声望
10 粉丝
宣传栏