Welcome Guest, Not a member yet? Register   Sign In
Allow inline style attibute on element using Content Security Policy (CSP)
#1

(This post was last modified: 09-23-2021, 07:53 AM by coderscvoen. Edit Reason: updated the background image path )

Hi, l need help with this. Am showing an image from the database (the image is in a folder while the path is stored in the database) on a slider. I have enabled Content Security Policy from the "Config/App.php" and everything is working fine except this. The image is not being displayed since am showing it as inline style. Was wondering how to allow inline styling in CSP. The example they gave in the documentation does not seem to cover this. Since this image is dynamic, i can't move it to an external style. Any assistance is appreciated.
PHP Code:
<div class="single-slider hero-overly slider-height d-flex align-items-center" style="
background-image: url('<?= base_url(
$sliderimages['image_path']); ?>');">
<
div class="slider-description-text-block">
<
p><?= $sliderimages['image_info']; ?></p>
</div>
</div> 

Here is the css CSP part.
PHP Code:
$response->CSP->setDefaultSrc('self');
$response->CSP->addFontSrc(['self''https://fonts.googleapis.com''https://fonts.gstatic.com']);
$response->CSP->addImageSrc('self');
$response->CSP->addScriptSrc('self'false);
$response->CSP->addStyleSrc(['self''https://fonts.googleapis.cm'], false); 
Reply
#2

MDN Web Docs - CSP: style-src
What did you Try? What did you Get? What did you Expect?

Joined CodeIgniter Community 2009.  ( Skype: insitfx )
Reply
#3

(09-22-2021, 11:19 PM)InsiteFX Wrote: MDN Web Docs - CSP: style-src

The example they're showing is when its like below:
Code:
<style>
  #inline-style { background: red; }
</style>

What i need is when the style is applied like so:
Code:
<div style="display:none">Foo</div>
Reply
#4

(This post was last modified: 09-23-2021, 08:01 AM by wdeda.)

Since it is a background image it should be contained in an external CSS file, it is not recommended to use CSS files inline:
Code:
.single-slider {
background-image: url('/assets/img/backgrounds/your_example.png');
}

usually what is stored in a database is the file identification, file name, almost always for use in a variable:

<img width="960" src="/assets/img/home/banners/<?= $data1->link ?>.jpg" height="418">

unless the path stored in the DB contains the file format, jpg, png, etc., this is not informed in the given example;
and there is a closing bracket without the corresponding opening bracket and even if it were there it would cause a coding error.

style="
background-image: url('<?= base_url('image_path']); ?>');">
Reply
#5

(This post was last modified: 09-23-2021, 08:10 AM by coderscvoen.)

(09-23-2021, 04:45 AM)wdeda Wrote: Since it is a background image it should be contained in an external CSS file, it is not recommended to use CSS files inline:
Code:
.max-header {
box-shadow: rgba(0, 0, 0, 0.35) 0px 2px 5px;
position: relative;
height: 97px;
border-top: 1px solid rgb(40, 40, 40);
border-bottom: 1px solid rgb(40, 40, 40);
background-color: rgb(27, 27, 27);
background-image: url('/assets/img/common/header_wd-gradient.png');
background-repeat: repeat-x;
z-index: 51;
}

usually what is stored in a database is the file identification, file name, almost always for use in a variable:

<img width="960" src="/assets/img/home/banners/<?= $data1->link ?>.jpg" height="418">

unless the path stored in the DB contains the file format, jpg, png, etc., this is not informed in the given example;
and there is a closing bracket without the corresponding opening bracket and even if it were there it would cause a coding error.

style="
background-image: url('<?= base_url('image_path']); ?>');">

Sorry but I had made a mistake when posting the code here and have edited it. Also, the path in the database is stored like;

Code:
img/filename.jpg

The thing is there is an admin side where he/she (the admin) can add image(s) which then appears on the site. I then query and display the image on the slider. I was thinking of doing it like this in my PHP file but possibly as a last resort:
PHP Code:
<style {csp-style-nonce}>
.
single-slider {
background-imageurl('<?= base_url($sliderimages['image_path']); ?>');
}
</
style
Reply
#6

Well, in this case I'm imagining that there is a form, with exclusive administrative access, where the image and its path name is informed, updating the database, and a query with "limit(1)",.
It's a purely personal choice, but using PHP in CSS files is unusual, base_url is intrinsic to the path to be given, if you put '/img/filename.jpg', the server automatically adds "https://example .com" in front of the first segment: https://example.com/img/filename.jpg. It is important that you understand that inside the css there will be a PHP variable that needs to be "converted" by the PHP server that also needs to know the source of "$sliderimages", etc.

You decide!
Reply
#7

Could there be a javascript workaround to this. As in i create a custom attribute called "bg-img" and access it using javascript.
Code:
<div class="single-slider hero-overly slider-height d-flex align-items-center" bg-img="<?= $sliderimages['image_path'];?>">
<div class="slider-description-text-block">
<p><?= $sliderimages['image_info']; ?></p>
</div>
</div> 

Based on the link given by @InsiteFX from CSP: style-src there is this statement.

"However, styles properties that are set directly on the element's style property will not be blocked, allowing users to safely manipulate styles via JavaScript:"

Code:
document.querySelector('div').style.display = 'none';

So in my case i can probably do something like this;

Code:
var bgImage = document.querySelector('[bg-img]');

Any suggestions?
Reply
#8

One last thing. Looking more carefully at your post, what you call a slider seems to me to be something in which a certain number of images, or even a single image, are displayed in sequence, as with the bootstrap carousel (https://getbootstrap. com/docs/4.0/components/carousel/) that I use. If so, there is, in my opinion, a confusion of concept or definition.
A background image is exactly what its name says, it's an image that stays in the background, that is, it has a decorative effect, like a desktop wallpaper, so it doesn't apply to you, you need the img tag, from html as used in bootstrap carousel:
Code:
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Second slide">
</div>
Reply
#9

Am actually using slick slider. So i decided to replace the background image with img and its now okay.

PHP Code:
<img src="<?= base_url($sliderimages['image_path']); ?>" alt=""


I also noticed that codeigniter does not seem to support the 'unsafe-inline'. I have the following in my BaseController

PHP Code:
$response->CSP->addStyleSrc(['self''unsafe-inline''https://fonts.googleapis.com'], false); 


The browser console shows the following warning;

Code:
Content Security Policy: Ignoring “'unsafe-inline'” within script-src or style-src: nonce-source or hash-source specified


What could be the issue here?
Reply




Theme © iAndrew 2016 - Forum software by © MyBB