Laravel Mix VueJS生产页面空白

问题描述 投票:0回答:1

经过长时间的研究,我终于找到了在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攻击,但是我不完全了解该选项的作用,或者在这种情况下如果没有它就可以安全运行。

vue.js nginx laravel-mix laravel-7
1个回答
0
投票

CSP标头只是让您的浏览器知道允许使用哪些JS源。但是,这实际上是一个备份计划-导致XSS的原因是系统上的某些代码会呈现未经授权的JavaScript。

例如,Stack Overflow上的注释框允许我输入以下文本:<script src="http://evilserver.com/malicious.js"></script>。堆栈溢出知道他们在做什么,因此他们确保呈现的是HTML,而不是文字<script>标签。因此,您需要确保在渲染用户提供的内容时要格外小心,并且您会没事的(通常在输出层中执行此操作,而不是在接受/存储输入时执行此操作)。

如果您接受用户的HTML输入(如Stack Overflow一样),则必须特别小心,只允许某些标签,并确保阻止任何JS向量。因此,以下文本:

实际上位于<i>标记中,该标记实际上是在Web应用程序中呈现的

可以,因为它很安全。您需要确保仔细检查了所有属性,并且拒绝了无效的标记。这些也可能是安全问题的根源。这是一个非常复杂的问题,如果您需要用户能够输入HTML,则不应尝试自己对其进行过滤。请改用经过良好测试和好评的库。

© www.soinside.com 2019 - 2024. All rights reserved.