背景
现代的网站需要有一系列的功能和特性，如动画效果、轮播图、视频播放、地理位置信息等等。但是这些功能往往需要使用到各种 JavaScript 库和插件，而这些外部资源又往往引入了许多未知的代码，可能会增加安全风险。为此，内容安全策略 (Content Security Policy, CSP) 就应运而生。
CSP 是一种安全机制，可以指定哪些来源可以被信任，在网页上执行哪些代码。通过 CSP，可以减少恶意脚本的攻击，提高 Web 应用程序的安全性。CSP 定义了一个白名单，只有在该白名单中列出的来源才被允许加载和执行。而如果 CSP 发现有不在白名单内的来源，就会阻止它们的执行，并报告 CSP 违规错误。
问题
然而，当你使用 Modernizr 库时，你可能会遇到 CSP 违规错误。Modernizr 是一个流行的 JavaScript 库，它可以检测浏览器是否支持某个 HTML5 或 CSS3 特性，并根据检测结果给出不同的处理方式。但是，当 Modernizr 启用了某些检测项时，它会注入一些外部 JavaScript 文件，这些文件可能不在 CSP 的白名单内，从而导致 CSP 违规错误。
具体来说，当 Modernizr 启用了以下检测项时，会引入外部 JavaScript 文件：
historyinputtypessvgsvgasimg
如果你启用了上述任意一个检测项，则需要在 CSP 的白名单中加入对应的外部来源才能正常使用 Modernizr。
解决方案
为了解决这个问题，我们可以在 CSP 的白名单中添加 Modernizr 使用的源。假设你的 CSP 头信息如下所示：
------------------------ ----------- ------
现在你想要启用 Modernizr 的 history 检测项，那么你需要将 ajax.googleapis.com 添加到白名单中，方法如下：
------------------------ ----------- ------- ---------- ------ -------------------
同理，如果你还想要启用其他检测项，需要将对应的外部源添加到白名单中。
示例代码
以下是一个使用了 Modernizr 的示例页面。该页面启用了 history 和 inputtypes 检测项，并添加了 CSP 头信息以防止 XSS 攻击。但是，由于 CSP 的限制，如果不添加对应的外部源，页面会报 CSP 违规错误。
--------- -----
------
------
----- ----------------
---------------- --- ------------
------- ---------------------------------------------------------------------------------------
----- ------------------------------------ -------------------- ------- ---------- ------ ---------------------
-------
------
------------- --- ---------
---------- -------- ------- ---- ----- --------------------------------
---------- -------- -------------- ----- ----- ----- ------------------------------
--------
-- ------------------- -
---------------------------------------------------- - ------
- ---- -
---------------------------------------------------- - -----
-
-- ---------------------------------------- -
-------------------------------------------------- - ------
- ---- -
-------------------------------------------------- - -----
-
---------
-------
-------结论
在使用 Modern
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/30272