我想对子资源完整性属性进行软集成,因此请确保我没有破坏应用程序,而只是显示我需要修复某些地方的警告。
有没有选择这样做?
安全方法
如果您需要某种灵活性,那么您应该使用回退机制 - 从另一个 URL 加载所需的资源。与仅入侵一个资源相比,两个不同的URL同时被黑客入侵的可能性要小得多。回退不会违反站点安全性,因为您必须信任在代码中使用的已知良好的源。如果你的资源是Javascript,你也可以使用nononical-src属性进行回退。
不安全的方法
现在,如果您真的希望用户通过强制破坏资源负载来破坏服务器和/或客户端的安全性 - 至少询问用户他/她是否负责这样做。当然,这仍然是一件愚蠢的事情,就像问">你想在计算机中运行病毒吗?我敢打赌没有人愿意说是。无论如何,这是代码,它确实会提出这些类型的问题:
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/crypto-js.min.js"></script>
<script>
function loadResource(path) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var cs = CryptoJS.SHA256(this.responseText);
if (btoa(cs) == 'NjBiMTllNWRhNmE5MjM0ZmY5MjIwNjY4YTVlYzExMjVjMTU3YTI2ODUxMzI1NjE4OGVlODBmMmQyYzhkOGQzNg==' ||
confirm('Bootstrap is NOT the latest version 4.3.1, load anyway ?')
) {
var link = document.createElement('link');
link.rel = "stylesheet";
link.href = path;
document.head.appendChild(link);
}
else {
var err = document.getElementById('error');
err.title = "Component version error !";
err.innerHTML = ' ⚠️';
}
}
};
xhttp.open("GET", path, true);
xhttp.send();
}
loadResource(
//'https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css' // newest boostrap
'https://stackpath.bootstrapcdn.com/twitter-bootstrap/2.0.4/css/bootstrap-combined.min.css' // old legacy
);
</script>
演示
我不建议仅在SRI哈希不匹配时才显示警告。当以用户身份看到警告时,为时已晚,并且在您的计算机上执行了潜在的恶意脚本。
但是,您可以使用 ServiceWorker
-API 和类似 <script data-integrity="xxxxxxxx">
的东西来实现所需的行为。为此,您需要:
- 注册新
ServiceWorker
- 收听
fetch
活动 - 将目标网址
[Client.postMessage]
到您的父级 - 通过目标 URL
$('script[src=event.data.targetURL]').attr('data-integrity')
获取脚本完整性哈希并使用Worker.postMessage
将其推送到客户端 - 使用例如对响应进行哈希处理
cryptojs.sha256
- 匹配工作线程内部的哈希值
- 如果哈希匹配,则返回响应。如果它们不匹配,请返回响应并再次使用
Client.postMessage
来触发警告。