How to exploit websites that include user input in their CSS
The linked article Show archive.org snapshot shows how to exploit websites that include unsanitized user input in their CSS.
Although the article often mentions React and CSS-in-JS libraries, the methods are applicable to any web app that injects user input into style tags or properties.
Also, sanitizing user input for CSS injection is much harder than sanitizing HTML.
Related cards:
How to fix: Firefox uses incorrect fonts on all webpages, regardless of their CSS
If you encounter a Firefox that does not care about your font settings but always uses specific fonts, you can fix that. Usually this should not happen, as it's not a default setting:
- Open up the Preferences.
- Switch to "Content".
- In the ...
CSS: How to force background images to scale to the container, ignoring aspect ratio
You can scale background images in CSS to the container size using background-size (Demo).
Commonly, we use contain or cover because we want to preserve the ima...
How to apply transparency to any color with pure CSS
To apply transparency to an element, you can use opacity in CSS. However, sometimes you don't want to make the entire element transparent, only a color.
Using not-so-modern CSS, you can simply generate non-opaque versions of a color. This card d...
How to include Sidekiq job IDs in Rails logs
When logging in Rails, you can use the log_tags configuration option to add extra information to each line, like :request_id or :subdomain. However, those ...
jQuery: How to replace DOM nodes with their contents
You know that you can use jQuery's text() to get an element's contents without any tags.
If you want to remove only some tags, but keep others, use contents() and unwrap(). Here is how.
Consider the following example element.
$containe...
How to use CSS to rotate text by 90° in IE8 (and modern IEs)
If you want to rotate text, you can use CSS transforms in somewhat modern browsers to rotate the container element.
However, if you need to support IE8, transform is unavailable (if need only IE9 support, ignore the following and use `-ms-transf...
RSpec & Devise: How to sign in users in request specs
You know that Devise offers RSpec test helpers for controller specs. However, in request specs, they will not work.
Here is a solution for request specs, adapted from the [Devise wiki](https...
FactoryGirl: How to easily create users with first and last name
In most of our applications, users have their first and last name stored in separate columns. However, specifying them separately quickly gets annoying, especially when proxying them from [cucumber_factory](https://github.com/makandra/cucumber_fac...
How to make a single check box (or image, etc) align vertically
Consider this HTML:
<div style="line-height: 42px">
<input type="checkbox" />
</div>
Even though the surrounding container defines a line-height, which vertically centers its inline elements, the check box will be top aligned if ...
How to: Upgrade CarrierWave to 3.x
While upgrading CarrierWave from version 0.11.x to 3.x, we encountered some very nasty fails. Below are the basic changes you need to perform and some behavior you may eventually run into when upgrading your application. This aims to save you some...