【HTML】加载 CDN 资源时遇到 Failed to find a valid digest in the ‘integrity‘ attribute for resource 报错问题

解决方法

删除 script 中 integrity 和 crossorigin 的属性

相关知识介绍

integrity 属性

integrity 属性用于校验脚本文件的完整性，防止脚本被篡改。它包含一个哈希值，用于验证脚本文件的真实性。浏览器会在下载脚本文件后，计算其哈希值并与 integrity 属性中的值进行比较。如果两者不一致，则浏览器会阻止脚本执行，并显示警告信息。

crossorigin 属性

crossorigin 属性用于控制跨域脚本的加载行为。它有以下两个值：

• anonymous：表示脚本文件不会携带任何凭据，例如 cookie 或 HTTP 认证信息。
• use-credentials：表示脚本文件可以携带凭据。

两者关系

integrity 属性和 crossorigin 属性可以一起使用，以提高跨域脚本的安全性。如果设置了 integrity 属性，则浏览器会先验证脚本文件的完整性，然后再根据 crossorigin 属性的值来决定是否执行脚本。

示例

<script src="https://example.com/script.js"
        integrity="sha256-1234567890abcdef1234567890abcdef1234567890"
        crossorigin="anonymous"></script>

在这个示例中，浏览器会先下载 script.js 文件，并计算其哈希值。然后，浏览器会将哈希值与 integrity 属性中的值进行比较。如果两者一致，则浏览器会执行脚本。否则，浏览器会阻止脚本执行，并显示警告信息。

使用建议

建议为所有跨域脚本设置 integrity 属性，以确保脚本文件的完整性。如果需要携带凭据，则可以将 crossorigin 属性设置为 use-credentials。

注意事项

• integrity 属性仅适用于现代浏览器。
• 如果设置了 integrity 属性，则必须确保脚本文件的哈希值是正确的。
• 如果使用了 CDN 来加载脚本文件，则需要确保 CDN 服务器支持 integrity 属性。