What is the process for activating the CSS url function when working with loofah?

Methods attempted so far:

Loofah::HTML5::WhiteList::ACCEPTABLE_CSS_FUNCTIONS.add 'url'
Loofah::HTML5::WhiteList::ACCEPTABLE_CSS_PROPERTIES.add 'background-image'

However,

Rails::Html::WhiteListSanitizer.new.sanitize_css 'background-image: url(https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png);'

returns ""

Experimenting with rgb:

Rails::Html::WhiteListSanitizer.new.sanitize_css 'background-image: rgb(https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png);'

yields

'background-image:rgb(https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png);'

The same outcomes are observed with Loofah::HTML5::Scrub.scrub_css.

Lofah version : 2.13.0

Rails version : 6.1.4.4

Verified in Rails Console

Answer №1

Unfortunately, the functionality is limited due to the hardcoded nature of the URL filter in this case.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating a responsive navbar with a custom width form

Just started working with bootstrap and playing around with some new UI concepts. I'm having an issue with a non-responsive form width within my navbar, even though the navbar itself is responsive. I've tried using different collapse classes, but ...

The alignment of buttons and input fields is not horizontal

How can I create a file upload option like this? | Choose File |Browse_btn| |Upload_btn| |Cancel| I've tried writing the code in HTML but I'm not getting the desired output. Here is my HTML code: <html> <head> <link r ...

Creating dual modes (night/day) for your AngularJS application

Currently, I am in the process of developing a project with Angularjs and facing an obstacle with animations. My goal is to implement a feature in my application that allows it to display in two different modes - night mode and day mode. I have come ac ...

What is the best way to arrange elements above and below each other in a single flexbox container?

Currently, I am facing a challenge aligning the number 238,741 and the letter N in Number. There is a padding between the Prize Pool div and the Number Active div. All of these elements are enclosed within a parent container with display set to flex and fl ...

How come the previous sibling element appears on top when the initial sibling is set to a position of absolute?

I have encountered an issue with two sibling sections. I applied position:absolute to the first section, but the second section is overlapping it. Even after trying to use position:relative on the second section, the problem persists. https://i.stack.imgur ...

Retrieving fresh CSS data from earlier animated elements within a Greensock timeline

In my code, I am using a TimelineLite() to perform a series of sequential tweens with .to(). What I want to achieve is accessing the output value from one of the early tweens in order to use it for constructing later tweens. Is there any way to retrieve t ...

ReactJS aligns buttons to the right

I have been attempting to align a button to the far right without success. Here is what I have tried: <Button variant="contained" style={{display: 'flex', justifyContent: 'right'}} color="primary" className="float-right" onClick={ ...

Encountered a MySQL error while attempting to insert an image into the database

I have a task to work on a website where users can upload product images that will be stored in a MySQL database. The code for my HTML form is: <FORM action="testimage1.php" ENCTYPE="multipart/form-data" method="post"> <div st ...

Enhancing Database Performance in a Rails Application with Indexing

With the tables Products, Sub_Categories and Categories in my database setup - where Categories has many Sub_Categories, Sub_Categories belongs to Categories, and products belong to Sub_Categories - I am looking for the best indexing strategy to optimiz ...

Creating a CSS design where the border is contained within an element, especially when the border radius is specified

The concept of the title might be a bit confusing, but let me clarify. I am attempting to replicate this particular effect (taken from a .png file): This is essentially half a cycle with a black line inside it. Despite numerous attempts, I have been un ...

Utilize Material UI SVG icons as background imagery

Is it possible to use svg images from @material-ui/icons as backgrounds for other elements? I attempted the code below without success. import CarIcon from '@material-ui/icons/DriveEtaRounded'; const carIcon = <CarIcon /> function Cover( ...

Highlighting the incorrect image when clicked on in the BS4 carousel indicator (active)

I am currently working on a Bootstrap 4 carousel and using Jquery to fetch and display images. The images are named from 1.jpg to 72.jpg. Everything seems to be working fine except that when I click on an image, the indicator thumbnails highlight the wrong ...

Seeking recommendations for changing the background image of the body tag

My latest project involves a new website layout provided by our client. The design includes a 1280X1795px landscape image as the background, which the client is adamant about keeping. Now, my concern is how to best utilize this image as a background while ...

How do you remove a section of an element's box model?

Query: I am trying to achieve a half circle effect by removing a portion of the circle element's box model. Can this be done and if so, how can I accomplish it? Creating complex shapes would become much easier with this functionality. Strategy: To ...

Issue with background image repeating incorrectly when resizing

I've recently added an image as the background for my website using the following style: #whole_wrapper{ background-image: url(../images/wrapper_bg.jpg); background-repeat: repeat-x; width: 100%; float: left; height: 116px; } ...

Manipulate classes for buttons in a React component by adding or removing them

I'm attempting to create two buttons that will toggle their class when clicked. When button one is clicked, it should add the "active" class to itself and remove the "active" class from the sibling button. I've made some progress, but I'm e ...

presentation not visible at first

I'm facing an issue with adding a slideshow to the header of my website. When the page initially loads, the slides do not appear; instead, I see the dots and arrows positioned higher than they should be. However, when I click on a dot or the "next pag ...

An alternative to Firebug for Internet Explorer

Can anyone suggest a suitable replacement for Firebug that is compatible with IE 7 and 8? I need a tool that allows me to edit CSS/HTML in real-time, debug JavaScript code, and visualize the positions of elements on web pages. Appreciate any recommendati ...

Having trouble with my JSFiddle code not functioning properly in a standard web browser for a Google Authenticator

Here is the code snippet that I am having trouble with: http://jsfiddle.net/sk1hg4h3/1/. It works fine in jsfiddle, but not in a normal browser. I have included the necessary elements in the head to call all the external files. <head> <scri ...

How to ensure that a div element occupies the entire height of the webpage

After developing a small app in Angular, I'm looking to make the container element expand to the full height of the page, even when the content doesn't fill the entire space. On larger screens, the page doesn't stretch as desired. Here' ...