根据用户 ID 更改背景图像并避免 CSP 不安全内联

Question

I would like to avoid using unsafe-inline on style-src in my CSP header, but I have a problem with a background image. I change the background image of a specific element according to the ID of the user, therefore I can not have the background image url in the style.css, as I normally would do, because it will be different for each user.

I thought about changing it through Javascript, but then I will still have unsafe inline style if i do something like this

document.getElementById("picture").style.backgroundImage = "url('img'+ID)";

So is there any way to change the background image dynamically according to ID of the user AND avoid having style-src unsafe inline?

The code I have right now looks like this:

echo '<div id="imagePreview'.$row['ID'].'"  style="background-image: url(\'billeder/'.$row['ID'].'.jpg);"></div>';

Answer 1

Dynamic stylesheet might help you. If you can't control CSP header.

You should process one css file via php.

You can find more information at => http://thisinterestsme.com/dynamic-css-stylesheet-php/

<?php

// Set the content-type header and charset.
header("Content-Type: text/css; charset=utf-8");

// Somehow get background image
$backgroundImage = "url(yourimage.jpg);"; 
?>

/** CSS begins **/
#imagePreview{
    background-image: <?= $backgroundImage ; ?>;
}