CSS使用子资源完整性保护您的网站

当您从外部服务器加载文件时，您相信您请求的内容是您期望的内容。由于您不自己管理服务器，因此您依赖于另一个第三方的安全性，从而增加了攻击面。信任第三方并不是天生的坏事，但它肯定应该在网站安全的背景下加以考虑。一个真实的例子这不是纯粹的理论危险。忽视潜在的安全问题可能而且已经造成严重后果。2019年6月4日，Malwarebytes宣布他们在网站上发现了一个恶意的略读程序NBA.com. 由于Amazon S3存储桶受损，攻击者能够修改JavaScript库以窃取客户的信用卡信息。值得担心的不仅仅是JavaScript。CSS是另一种能够执行诸如密码窃取等危险操作的资源，它所需要的只是一个受到破坏的第三方服务器，以便灾难发生。但它们可以提供我们无法缺少的宝贵服务，例如cdn，它可以减少站点的总带宽使用量，并通过基于位置的缓存更快地向最终用户提供文件。因此，我们有时需要依赖一个我们无法控制的主机，但我们也需要确保从它接收到的内容是安全的。我们能做什么？解决方案：子资源完整性（SRI） SRI是一种安全策略，用于防止加载与预期哈希不匹配的资源。通过这样做，如果攻击者要访问一个文件并修改其内容以包含恶意代码，它将与我们期望的哈希不匹配，并且根本不会执行。HTTPS不是已经这样做了吗？ HTTPS对安全性非常好，是任何网站的必备品，虽然它确实可以防止类似问题（以及更多问题），但它只能防止在传输过程中篡改数据。如果一个文件在主机上被篡改，恶意文件仍然会通过HTTPS发送，对防止攻击毫无作用。哈希是如何工作的？哈希函数将任何大小的数据作为输入，并返回固定大小的数据作为输出。理想情况下，散列函数的分布是均匀的。这意味着对于任何输入，x，输出，y将是任何特定可能值的概率与它是输出范围内任何其他值的概率相似。这里有一个隐喻：假设您有一个6面骰子和一个名称列表。在本例中，名称将是哈希函数的\"input\"，滚动的数字将是函数的\"output\"。对于列表中的每个名称，您将滚动骰子，并通过在名称旁边写入数字来跟踪每个数字对应的名称。如果一个名称被多次用作输入，则其相应的输出将始终是第一次使用时的输出。第一个名字，爱丽丝，你打4分。下一次，约翰，你投6分。然后鲍勃、玛丽、威廉、苏珊和约瑟夫分别得到2、2、5、1和1。如果您再次使用\"John\"作为输入，输出将再次为6。这个比喻描述了散列函数在本质上是如何工作的。Name；（input）Number；（输出）Building the bundleBuilding the bundle p>。您会注意到创建了一个名为***81***的文件夹，其中有一个名为***82***的文件，看起来像这样： ***83***文件。这对从外部服务器加载的文件不起作用，也不应该，因为需要不断更新的跨源文件会中断子资源完整性的启用。谢谢阅读！这一次就到此为止。子资源完整性是一个简单而有效的补充，以确保您只重新加载您期望的内容，并保护您的用户；记住，安全不仅仅是一个解决方案，所以始终要注意更多的方法来保持您的网站安全

CSS使用子资源完整性保护您的网站

CSS无头WordPress到底有多合适？

CSS制作带有粘性页眉和页脚的表格变得更容易了

CSS技巧编年史XXXX

CSS使用子资源完整性保护您的网站

CSS联合的可能性

CSS在开放细节元素上添加背景

CSS容器查询的聚宝盆

CSS target=blank

CSS查看WCAG 2.5.5以获得更好的目标尺寸

CSS Trickz：Netlify随需应变构建器的实验