Angular 6：內容安全策略：頁面的設置阻止了自己加載資源（“script-src”）

Question

我正在研究一個Angular 6項目。 運行命令時，我的代碼工作正常

ng -

當我使用它構建它時

建立

並將其部署在我的本地Tomcat服務器上。 我沒有面臨任何錯誤，完美無缺。

但是當我在我的Ubuntu機器上將其部署到我的Apache HTTPD服務器上時，我分別面對Firefox和Chrome上的以下錯誤

Content Security Policy: The page’s settings blocked the loading of a resource at self (“script-src”). Source: onfocusin attribute on DIV element.

Error: call to Function() blocked by CSP
compiler.js:22402

Content Security Policy: The page’s settings blocked the loading of a resource at self (“script-src”). Source: call to eval() or related function blocked by CSP.

我已經引用了許多鏈接並嘗試了多種選項，但仍然沒有成功解決它。 任何幫助將受到高度贊賞。

提前致謝。

Answer 1

在將正在進行的Angular 6開發部署到IIS服務器時面臨同樣的問題（而應用程序在本地開發環境中運行良好）。

經過一些研究，看起來Webpack輸出與嚴格的Content-Security-Policy處理不好，所以你必須減少它。

這可以通過使用寬松的CSP定義添加一些自定義標頭來實現。

在我的情況下（IIS / ASP.NET）...

<system.webServer>
    <httpProtocol>
        <customHeaders>
            <add name="Content-Security-Policy" value="default-src 'self' ; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'" />
        </customHeaders>
    </httpProtocol>
</system.webServer>

在這里找到一些如何在Apache中添加自定義CSP的示例。

更新：正如其他信息一樣，請參閱此angular-cli問題 。 Clydin於3月19日提到......

如果使用生產構建（刪除反射polyfill，因為它們僅用於JIT），則不再需要unsafe-eval 。

樣式仍然需要unsafe-inline 。 如果這對於項目的要求是不可接受的，則另一個選項是僅在應用程序中使用全局樣式，而不使用任何包含組件樣式的Angular庫。 請注意，在此方案下，項目將失去基於組件的體系結構的全部優勢。

因此，如果使用AOT，可能您可以修改CSP定義。