第三方 CSS 并不安全

站长手记 作者: 2024-08-28 11:25:01
第三方内容在其沙箱区域内具有强大的能力。如果你担心恶意用户诱使你的网站加载第三方资源,可以通过 CSP 用作防护手段,其可以限制加载图片,脚本和样式的来源。

第三方图片

<img src="https://example.com/kitten.jpg">

第三方脚本

<script src="https://example.com/script.js"></script>
  • 读取/修改页面内容。
  • 监听用户的所有交互。
  • 运行耗费大量计算资源的代码(如 cryptocoin 挖矿程序)。
  • 通过向本站发请求,这样能附带用户的 cookie,转发响应。(译注:盗取用户的 cookie 及其他数据)
  • 读取/修改本地存储。
  • ......可以做任何对方想做的事情。

第三方CSS

<link rel="stylesheet" href="https://example.com/style.css">
  • 删除/添加/修改页面内容。
  • 根据页面内容发起请求。
  • 可响应多种用户交互。

键盘记录器

input[type="password"][value$="p"] {
  background: url('/password?p');
}

消失的内容

body {
  display: none;
}

html::after {
  content: 'HTTP 500 Server Error';
}

添加内容

.price-value::before {
  content: '1';
}

移动内容

.delete-everything-button {
  opacity: 0;
  position: absolute;
  top: 500px;
  left: 300px;
}

读取属性

<input type="hidden" name="csrf" value="1687594325">
<img src="/avatars/samanthasmith83.jpg">
<iframe src="//cool-maps-service/show?st-pancras-london"></iframe>
<img src="/gender-icons/female.png">
<div></div>

监听交互

.login-button:hover {
  background: url('/login-button-hover');
}

.login-button:active {
  background: url('/login-button-active');
}

读取文本

@font-face {
  font-family: blah;
  src: url('/page-contains-q') format('woff');
  unicode-range: U+85;
}

html {
  font-family: blah, sans-serif;
}

第三方内容不安全

原创声明
本站部分文章基于互联网的整理,我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
本文链接:http://www.jiecseo.com/news/show_70095.html
CSS