Angular5 部署到 Azure webapp:内容安全策略 [英] Angular5 deploy to Azure webapp: Content Security Policy

问题描述

我想将使用 angular-cli 创建的 angular5 应用程序部署到 azure webapp 服务.我做了什么:

I want to deploy my angular5 app created with angular-cli to azure webapp service. What I did:

ng 新测试应用

ng build --prod --aot

ng build --prod --aot

cd dist

//测试用例的脏部分:

//dirty part for test case:

git 初始化

git add *

git commit -m '初始提交'

git commit -m 'initial commit'

git remote add azure https://[e-mail]:443/xxx.git

git remote add azure https://[e-mail]:443/xxx.git

git push azure master

git push azure master

输出:

成功完成.远程:运行部署后命令...远程:部署成功.远程:应用程序容器将开始10 秒内重启.

Finished successfully. remote: Running post deployment command(s)... remote: Deployment successful. remote: App container will begin restart within 10 seconds.

所以一切看起来都很好.如果我在部署完成后前往 URL，我很遗憾收到:

so everything seems fine. If I head to the URL after deployment is done I unfortunately receive:

无法获取/

出现错误:

内容安全策略:页面的设置阻止了资源的加载(default-src http://xxx.azurewebsites.net").来源:;!function(){var t=0,e=function(t,e){ret.... xxx.azurewebsites.net:1

Content Security Policy: The page’s settings blocked the loading of a resource at self ("default-src http://xxx.azurewebsites.net"). Source: ;!function(){var t=0,e=function(t,e){ret.... xxx.azurewebsites.net:1

到目前为止，我所看到的每一个教程或示例都没有涉及 CSP 或这方面的任何事情.有什么帮助吗?

Every single tutorial or example I've seen so far did never bother with CSP or anything in that regard. Any help?

推荐答案

尝试检查 CSP 标题如下，

Try to check the CSP header as below,

<system.webServer>  
  <httpProtocol>
    <customHeaders>
      <add name="Content-Security-Policy" value="
        default-src 'self';
        style-src 'self' 'unsafe-inline';
        script-src 'self' https://*.vo.msecnd.net;
        connect-src wss: https:;" />
    </customHeaders>
  </httpProtocol>
</system.webServer>  

您可以参考此文档，该文档将为您提供有关 CSP 的一些信息:https://www.henrihietala.fi/how-to-secure-your-asp-net-azure-web-app/.

You may refer this document which will give you some information regarding CSP: https://www.henrihietala.fi/how-to-secure-your-asp-net-azure-web-app/.

此外，您可以参考此 MSDN 线程:https://social.msdn.microsoft.com/Forums/vstudio/en-US/18425bf2-49d2-4ad6-824d-b84205ab0eea/adding-content-security-policy-xxss-protection-to-my-web-app?forum=windowsazurewebsitespreview，可能会有所帮助.

Also, you can refer this MSDN thread: https://social.msdn.microsoft.com/Forums/vstudio/en-US/18425bf2-49d2-4ad6-824d-b84205ab0eea/adding-content-security-policy-xxss-protection-to-my-web-app?forum=windowsazurewebsitespreview, might help.

这篇关于Angular5 部署到 Azure webapp:内容安全策略的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！