尝试添加 CSP 标头，但它修改了网站的显示-解网

问：

我正在尝试添加 CSP 标头，但它更改了网站的显示方式。这是前两张图片的代码：

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Security-Policy" content="default-src '*'; style-src 'self' cdn.jsdelivr.net; script-src *; object-src *; img-src *; media-src *; report-src *; connect-src *">
    
    <title>Euskor&oacute;scopo</title>  
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" 
    <link rel="stylesheet" href="css/tabla_inicio.css" />
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" 
    <script src="js/index.js"></script>
</head>

<body style="background-image: url('images/background.webp'); background-size: cover; color: white;">
...
</body>

最后两张图片的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Security-Policy" content="default-src *">
    <title>Web Login</title>

    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <link rel="stylesheet" href="css/format_messages.css" />
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
    <script type="text/javascript" src="js/login.js"></script>

</head>

HTML 安全元标记 CSP

我得到以下信息，不知道该怎么做：localhost/：25 拒绝应用内联样式，因为它违反了以下内容安全策略指令：“default-src *”。启用内联执行需要“unsafe-inline”关键字、哈希（'sha256-bp0tBT9srApZNVSnLal8esmwmT/zyR6xH2N3/WTGDl4='）或随机数（'nonce-...'）。请注意，哈希不适用于事件处理程序、样式属性和 javascript：导航，除非存在“unsafe-hashes”关键字。另请注意，'style-src' 未显式设置，因此 'default-src' 用作回退。

答：

1赞 Loebstahhhh 11/8/2023 #1

在盲目启用 CSP 之前，应先尝试了解 CSP 的工作原理。检查 https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP。

在代码中，您正在应用内联样式。这些是直接注入到 HTML 标记中的样式。除非明确启用，否则 Content-Security-Policy 不允许这样做。

因此，要修复您的代码，请添加（带引号）如下：'unsafe-inline'

<meta http-equiv="Content-Security-Policy" content="default-src '*'; style-src 'self' 'unsafe-inline' cdn.jsdelivr.net; script-src *; object-src *; img-src *; media-src *; report-src *; connect-src *">

或者，一个更好的方法：将 CSS 移动到不同的文件或样式标签。

话虽如此，您现在拥有的 CSP 标头没有多大意义。你基本上只限制样式来源，而不限制其他任何东西（如脚本）。CSP 用于限制 XSS 漏洞利用发生时可能造成的损害，因此仅限制样式来源无济于事。

尝试添加 CSP 标头，但它修改了网站的显示

trying to add CSP header but it modifies the display of the website

评论

评论