Search code examples
htmlsecuritymeta-tagscontent-security-policy

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

I'm trying to add CSP header, but it changes how my website is displayed. This is the code for the first two pictures:

<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/bootstrap@5.3.2/dist/css/bootstrap.min.css" 
    <link rel="stylesheet" href="css/tabla_inicio.css" />
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/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>

enter image description here enter image description here

The code for the last two pictures:

<!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/bootstrap@5.3.2/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/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
    <script type="text/javascript" src="js/login.js"></script>

</head>

enter image description here enter image description here

Solution

  • You should try to understand how CSP works first before enabling it blindly. Check https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP.

    In your code, you are applying inline styles. These are styles that are injected directly into your HTML tags. The Content-Security-Policy does not allow this unless explicitly enabled.

    So, to fix your code, either add 'unsafe-inline' (with quotation marks) like this:

    <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 *">

    Or, a much better approach: move your CSS to a different file or style tag.

    That being said, the CSP header you have right now doesn't make a lot of sense. You're basically only restricting the style origin, and not restricting anything else (like script). CSP is used to restrict the possible damage that can be done when an XSS exploit occurs, so restricting only the style origin isn't going to help you with that.