Question

有人可以向我解释为什么Play无法提取HTML页面顶部指定的外部资产吗？

如果我有一个如下所示的独立网页，则会拾取CSS并正确呈现按钮：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Shrine (MDC Web Example App)</title>
  <link rel="shortcut icon" href="https://material.io/favicon.ico">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
  <link rel="stylesheet" media="screen" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
</head>
<body>
  <button class="foo-button mdc-button">Button</button>
</body>
</html>

正确渲染的按钮：

但是，如果我在Play项目中放入几乎完全相同的代码，则它不会拾取CSS（下面的代码）：

<!DOCTYPE html>
<html lang="en">
    <head>
        @* Here's where we render the page title `String`. *@
        <title>@title</title>
        <link rel="stylesheet" media="screen" href="@routes.Assets.versioned("stylesheets/main.css")">
        <link rel="shortcut icon" type="image/png" href="@routes.Assets.versioned("images/favicon.png")">
        <link rel="stylesheet" media="screen" href="https://unpkg.com/material-components-web@@latest/dist/material-components-web.min.css">
    </head>
    <body>
          <button class="foo-button mdc-button">Button</button>
        </body>
</html>

未应用CSS呈现的按钮：

唯一的区别是我必须按如下所示转义“ @”：

    <link rel="stylesheet" media="screen" href="https://unpkg.com/material-components-web@@latest/dist/material-components-web.min.css">

如果我将URL指向的所有CSS放在Play项目的public / stylesheets文件夹中的单独文件中，然后按如下所示引用它，那么CSS就会被拾取并且按钮会正确呈现：

<link rel="stylesheet" media="screen" href="@routes.Assets.versioned("stylesheets/foo.css")">

有人可以解释Play在这里的运作方式吗？为什么这样做呢？还是通过转义“＆”号而不获取外部CSS？

更新

我刚刚在Chrome浏览器中签到，并且在通过Play加载页面时收到此消息：

拒绝加载样式表“ https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css”，因为它违反了以下内容安全策略指令：“ default-src'self'”。请注意，“ style-src”未明确设置，因此将“ default-src”用作备用。

Answer 1

该错误表明您无法引用运行主机以外的其他来源的文件（js，css等）。

为什么？那么这是出于安全原因：所有脚本/样式/等都应从主机（localhost或example.com）运行。

解决方案：如果要访问外部资源，可以在disable内application.conf过滤安全标头：

play.filters.disables += "play.filters.headers.SecurityHeadersFilter"

注意：不建议这样做，因为存在安全风险。

其他文档阅读：security headers in Play。

外部资产未通过游戏筹集

1 个答案: