CSP 阻止谷歌翻译

Question

我正在使用插件通过 Google 翻译来翻译 Wordpress 网站。我已经为网站设置了内容安全策略，这将导致 Wordpress 插件无法翻译网站，因为 CSP 会阻止它。当 CSP 设置在网站上时，有没有办法启用 Google 翻译功能？我在使用 Google 地图时遇到了同样的问题，我通过将 google.com 地址添加到 CSP 解决了这个问题，但是使用翻译我不知道如何继续。

CSP 设置：

<?php 
header("Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline' https://www.google.com; img-src 'self' data:; style-src 'self' 'unsafe-inline' https://www.google.com; font-src 'self' data:; object-src 'none'; frame-src https://www.google.com; ");
?>

(index):1 拒绝加载脚本“https://translate.google.com/translate_a/element.js?cb=GoogleLanguageTranslatorInit”，因为它违反了以下内容安全策略指令：“script-src 'self' 'unsafe-inline' https://www.google.com https://translate.googleapis.com/”。请注意，'script-src-elem' 没有显式设置，因此 'script-src' 用作备用。

Answer 1

您需要将要允许的每个域添加到您的 CSP 标头中：

• https://translate.google.com 和 https://www.google.com 不是一回事
• https://translate.google.com 和 https://translate.googleapis.com/ 不是一回事

尝试：

<?php 
    header("Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline' https://www.google.com https://translate.google.com; img-src 'self' data:; style-src 'self' 'unsafe-inline' https://www.google.com; font-src 'self' data:; object-src 'none'; frame-src https://www.google.com; ");
?>

注意一旦脚本被允许，CSP 可能会阻止来自同一域的其他类型的资源（例如 CSS、iframe），如果是这种情况，只需将此域添加到这些类型也一样。