引導樣式無法設置內容安全 header

Question

[屏幕缺少控制台錯誤的頁面][1] [1]：https://i.stack.imgur.com/QIuHp.png

我正在嘗試在我的 angular 項目中添加 Content-Security-Header

組件.html

<!doctype html>
<html lang="en">
<head>
  <meta http-equiv="Content-Security-Policy" content="default-src 'self';style-src 'self'">
  <meta charset="utf-8">
  <title>Shop</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

組件.css

* {
    box-sizing: border-box;
}
body {
    margin: 0;
    padding: 0;
}

.navbar {
    background-color: #333;
    color: white;
}
.brand-title {
    font-size: 1.5rem;
    margin: .5rem;
}

.navbar-links {
    height: 100%;
}

.navbar-links ul {
    display: flex;
    margin: 0;
    padding: 0;
}

.navbar-links li {
    list-style: none;
}

.navbar-links li a {
    display: block;
    text-decoration: none;
    color: white;
    padding: 1rem;
}

.navbar-links li:hover {
    background-color: #555;
}

.toggle-button {
    position: absolute;
    top: .75rem;
    right: 1rem;
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px;
}

.toggle-button .bar {
    height: 3px;
    width: 100%;
    background-color: white;
    border-radius: 10px;
}

@media (max-width: 800px) {
    .navbar {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
    }

    .toggle-button {
        display: flex;
    }

    .navbar-links {
        display: none;
        width: 100%;
    }

    .navbar-links ul {
        width: 100%;
        flex-direction: column;
    }

    .navbar-links ul li {
        text-align: center;
    }

    .navbar-links ul li a {
        padding: .5rem 1rem;
    }

    .navbar-links.active {
        display: flex;
    }
}

索引.html

<!doctype html>
<html lang="en">
<head>
  <meta http-equiv="Content-Security-Policy" content="default-src 'self';style-src 'self'">
  <meta charset="utf-8">
  <title>Shop</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

在添加 header 時，我應用的樣式被破壞了。

添加 'unsafe-inline' 會解決問題，但有沒有更安全或更好的方法呢？

Answer 1

看起來在style-src指令中避免'unsafe-inline'是不可能的。 請參閱“建議步驟”中的第 1 段：

我們應該清楚 state 允許 Angular 應用程序在 style-src 中允許“unsafe-inline”。

引導樣式無法設置內容安全 header

問題描述

組件.html

組件.css

索引.html

1 個解決方案

解決方案1
0 已采納 2021-06-16 22:44:26

引導樣式無法設置內容安全 header

問題描述

組件.html

組件.css

索引.html

1 個解決方案

解決方案1 0 已采納 2021-06-16 22:44:26

解決方案1
0 已采納 2021-06-16 22:44:26