如何在 Firefox 中加载 css 样式并解决内容安全策略：问题？答案

【问题标题】：How to load css style in firefox and solve Content Security Policy:problem?如何在 Firefox 中加载 css 样式并解决内容安全策略：问题？
【发布时间】：2021-02-28 16:39:40
【问题描述】：

我有这个 Wicket 页面：

<html>
<head>
<title>Cheesr - Making cheese taste beta</title>
<wicket:link>
    <link href="style.css" rel="stylesheet" />
</wicket:link>
</head>
<body>
<div id="container">
<div id="header">
<h1>...</h1>
</div>
<div id="contents">
<div id="main">
<div wicket:id="cheeses" class="cheese">
<h3 wicket:id="name">Gouda</h3>
<p wicket:id="description">Gouda is a Dutch...</p>
<p><span wicket:id="price">$1.99</span> <a wicket:id="add" href="#">add
to cart</a></p>
</div>
<div wicket:id="navigator"></div>
<wicket:remove>
    <div class="cheese">
    <h3>Emmental</h3>
    <p>Emmental is a Swiss che...</p>
    <p><span>$2.99</span> <a href="#">add to cart</a></p>
    </div>
</wicket:remove></div>
<div id="cart">
<h3>Your selection</h3>
<table>
    <tbody>
        <tr wicket:id="cart">
            <td wicket:id="name">Gouda</td>
            <td wicket:id="price">2.99</td>
            <td><a wicket:id="remove" href="#">remove</a></td>
        </tr>
        <wicket:remove>
            <tr>
                <td>Emmental</td>
                <td>$1.99</td>
                <td><a href="#">remove</a></td>
            </tr>
        </wicket:remove>
    </tbody>
    <tfoot>
        <tr class="total">
            <th>Total</th>
            <td wicket:id="total">$1.99</td>
            <td>&nbsp;</td>
        </tr>
    </tfoot>
</table>
<input type="button" wicket:id="checkout" value="Check out" /></div>
</div>
</div>
</body>
</html>

当我尝试在 Firefox 中访问页面时，Css 样式不起作用。在开发人员工具控制台中，我有内容安全策略：该页面的设置阻止在 http://localhost:8080/cheesestore/wicket/resource/org.heller.wicket.Index/style-ver-1614525831181.css 加载资源（ “样式-src”）。谁能告诉我如何解决这个问题？

【问题讨论】：

标签： css wicket content-security-policy

【解决方案1】：

Wicket 9 默认启用了 CSP 保护。如果您想禁用它，只需在您的应用程序中使用此代码init()：

@Override
protected void init() {
  super.init();
  getCspSettings().blocking().disabled();
  // ...
}

【讨论】：

谢谢你的帮助，但是有什么办法，如何在不禁用CPS的情况下运行css？
查看用户指南，您应该会找到一些有用的提示：ci.apache.org/projects/wicket/guide/9.x/…

【解决方案2】：

要配置 CSP，您应该执行以下操作：

 myApplication.getCspSettings().blocking().clear()
   .add(CSPDirective.DEFAULT_SRC, CSPDirectiveSrcValue.NONE)
   .add(CSPDirective.STYLE_SRC, CSPDirectiveSrcValue.SELF)
   .add(CSPDirective.SCRIPT_SRC, CSPDirectiveSrcValue.SELF)
   .add(CSPDirective.IMG_SRC, CSPDirectiveSrcValue.SELF)
   .add(CSPDirective.FONT_SRC, CSPDirectiveSrcValue.SELF);

您的案例的重要行是：.add(CSPDirective.STYLE_SRC, CSPDirectiveSrcValue.SELF)

【讨论】：