经过长时间的研究,我终于找到了在nginx上运行Laravel7 VueJS(在刀片模板内)应用程序的原因,并抛出了黑屏。但是我缺乏解释或正确的配置。
当我访问任何路由时,它将在200ms左右的时间内看到,然后切换到白屏,而npm run prod
配置中没有任何错误。正文标签将完全为空(在检查器中看起来没有注释)
[...]
<body>
<!-- -->
</body>
[...]
页面上足够有趣(讽刺地说)重新加载登录页面将正常工作,但是在访问任何其他路由后,它将恢复为上述行为。
切换到npm run dev
后,控制台引发以下错误:
[[Vue警告]:似乎您在具有禁止不安全评估的内容安全策略的环境中使用Vue.js的独立版本。模板编译器无法在这种环境下工作。考虑放宽政策,以允许不安全评估或将模板预编译为渲染函数。
和
[EvalError:拒绝将字符串评估为JavaScript,因为在以下内容安全策略指令中,不允许的'unsafe-eval'脚本源:
"default-src 'self' http: https: data: blob: 'unsafe-inline'"
。
这使我意识到我使用精美的Tool provided by DigitalOcean生成的nginx安全配置包括以下行:
add_header Content-Security-Policy "default-src 'self' http: https: data: blob: 'unsafe-inline'" always;
删除并重新启动nginx之后,一切正常,看起来像在我的开发环境中一样。
[从理论上讲,我现在使我的站点容易受到XSS攻击,但是我不完全了解该选项的作用,或者在这种情况下如果没有它就可以安全运行。
CSP标头只是让您的浏览器知道允许使用哪些JS源。但是,这实际上是一个备份计划-导致XSS的原因是系统上的某些代码会呈现未经授权的JavaScript。
例如,Stack Overflow上的注释框允许我输入以下文本:<script src="http://evilserver.com/malicious.js"></script>
。堆栈溢出知道他们在做什么,因此他们确保呈现的是HTML,而不是文字<script>
标签。因此,您需要确保在渲染用户提供的内容时要格外小心,并且您会没事的(通常在输出层中执行此操作,而不是在接受/存储输入时执行此操作)。
如果您接受用户的HTML输入(如Stack Overflow一样),则必须特别小心,只允许某些标签,并确保阻止任何JS向量。因此,以下文本:
实际上位于<i>
标记中,该标记实际上是在Web应用程序中呈现的
可以,因为它很安全。您需要确保仔细检查了所有属性,并且拒绝了无效的标记。这些也可能是安全问题的根源。这是一个非常复杂的问题,如果您需要用户能够输入HTML,则不应尝试自己对其进行过滤。请改用经过良好测试和好评的库。