加载 jQuery 等外部脚本时出现问题
Wax*_*orp 17 html javascript jquery google-apps-script google-workspace
从今天早上开始，我就遇到了一个问题，使用 Apps 脚本部署的 web 应用程序以前运行良好。当然，没有做出任何改变来证明这个问题的合理性。
外部脚本不会从 HTML 端加载，并且控制台中会出现新错误。
为了有一个可重现的例子：
代码.gs
function doGet() {
var template = HtmlService.createTemplateFromFile('index');
return template.evaluate()
.setTitle('TEST')
.addMetaTag('viewport', 'width=device-width, initial-scale=1')
.setSandboxMode(HtmlService.SandboxMode.IFRAME)
}
索引.html：
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<div id="title">Hello</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
window.onload = function() {
console.log('loaded');
console.log($('#title').html());
}
</script>
</html>
控制台中的结果：
[ERROR] This document requires 'TrustedHTML' assignment. (jquery.min.js:2)
[ERROR] Uncaught TypeError: Failed to set the 'innerHTML' property on 'Element': This document requires 'TrustedHTML' assignment. (jquery.min.js:2)
[LOG] loaded
[ERROR] Uncaught ReferenceError: $ is not defined
源问题似乎是<script src=''加载 jQuery。但我没有注意到 Google 提供任何故障排除，这是对 Apps 脚本的新限制吗？
截图：
小智 12
我发现该问题似乎与 Google 最近对内容安全策略 (CSP) 的更改有关，特别是影响了 AppScript 中 jQuery 的使用。这个问题已经影响了各个开发人员，您可以在此处的 Google Issue Tracker 上找到更多详细信息和正在进行的讨论：Google Issue Tracker - CSP & jQuery Issue。
根据我的发现，这个问题似乎是基于 Chromium 的浏览器特有的。在 Chrome 和 Edge 等环境中，包括它们的隐身模式，jQuery 无法正常运行。不过，我发现 Firefox 并没有遇到这个问题，并且可以按预期工作。
这种特定于浏览器的行为建议了一种解决方法：如果您在基于 Chromium 的浏览器上的 AppScript 项目中遇到 jQuery 问题，请尝试切换到 Firefox 作为临时解决方案，直到 Google 实现更永久的修复。
编辑：找到以下解决方法。将其放在 HTML 的最顶部<head>。
<script>
if (window.trustedTypes && window.trustedTypes.createPolicy) {
window.trustedTypes.createPolicy('default', {
createHTML: string => string,
createScriptURL: string => string,
createScript: string => string,
});
}
</script>
根据Google Issue Tracker，这里有一个解决方法，可以将其放在 HTML 的最顶部<head>：
<script>
if (window.trustedTypes && window.trustedTypes.createPolicy) {
window.trustedTypes.createPolicy('default', {
createHTML: string => string,
createScriptURL: string => string,
createScript: string => string,
});
}
</script>
- “*根据 Google 问题跟踪器*” - 请[编辑]您的答案以链接您所指的问题。 (5认同)
- 问题跟踪器报告该问题已得到解决，并且不再需要此解决方法（但是，您可能需要清除浏览器缓存）。 (2认同)
| 归档时间： |
|
| 查看次数： |
2443 次 |
| 最近记录： |