Testing file download links in an end-to-end test can be painful, especially with Selenium. The attached download_helpers.rb provides...

While verifying doubles in RSpec is a good default, it is limited in the amount of methods it actually is...

tl;dr You can use attribute? as shorthanded version of attribute.present?, except for numeric attributes and associations. Technical Details

Redis.current will be removed without replacement in redis-rb 5.0. Version 4.6.0 adds deprecation warnings for Redis.current and Redis.current=: `Redis.current...

We use foreman to start all necessary processes for an application, which are declared in a Procfile. This is very...

Building application assets with esbuild is the new way to do it, and it's great, especially in combination with...

Attaching files to a field that is handled by Carrierwave uploaders (or maybe any other attachment solution for Rails) in...

When Capybara locates elements in the DOM, by default it allows only accessing visible elements -- when you are using a...

Proxy caching is a good feature to serve your publicly visible application content faster and reduce load on your servers...

Rack::SteadyETag is a Rack middleware that generates the same default ETag for responses that only differ in CSRF tokens...

The Interactive Advertising Bureau (IAB) is a European marketing association which has introduced a standard how advertising can be served...

Modern versions of Capybara include a finder method #ancestor which allows you to find a parental element using CSS or...

A flaky test is a test that is often green, but sometimes red. It may only fail on some PCs...

Besides their default styling properties, HTML elements have a semantic meaning. For example, an h1 tag is usually styled with...

The RSpec matcher tests if two HTML fragments are equivalent. Equivalency means: Whitespace is ignored Types of attribute quotes are...

Rails has the handy controller method send_file which lets us download files easily. We can decide whether the file...

It is generally discouraged to load your JavaScript by a tag in the : The reason is that a tag will pause the DOM parser until the script has loaded and executed. This will delay the browser's first contentful paint. A much better default is to load your scripts with a tag: A deferred script has many...

The attached compiler() function below applies JavaScript behavior to matching HTML elements as they enter the DOM. This works like...

Given you have a strict CSP that only allows elements from your own domain: Content-Security-Policy: script-src 'self' This will block JavaScript handlers inlined as attribute into your HTML elements. Clicking on the following link will only log an error with a strict CSP: click me click me Solution 1: Move the handler into your JavaScript The recommended solution is to move the handler from the HTML to the allowed JavaScript file that we loaded via . In the example above we could invent a new [data-alert] attribute with the alert message: click me Then our JavaScript intercepts clicks on elements with that attribute: document.addEventListener('click', function(event) { let link = event.target.closest('[data-alert]') if (link) { let message = link.dataset.alert alert(message) event.preventDefault() } }) Solution 2: Allow that one handler in your CSP Some browsers allow the CSP directive script-src-attr. This lets you allow the hashes of actual JavaScript code. The SHA256 hash of alert('hello') is vIsp2avtxDy0157AryO+jEJVpLdmka7PI7o7C4q5ABE= (in Base64). We can allow this one event handlers like this: Content-Security-Policy: script-src 'self'; script-src-attr 'unsafe-hashes' 'sha256-vIsp2avtxDy0157AryO+jEJVpLdmka7PI7o7C4q5ABE=' Note the sha256- prefix. This event handler now works when clicked: click me But any other script will still be blocked: click me Dealing with legacy browsers Currently (November 2023) about 75% of browsers support script-src-attr. Here is a forward-looking compromise that many users use with new CSP features: Have a liberal CSP with old directives supported by all browsers Make your CSP stricter with new, more specific directives for browsers that support it The CSP spec supports that approach in that using newer, more specific directives disable older, more general features. In our case this means: For old browsers, allow all inline scripts For new browsers, disallow inline scripts but allow inline handlers with given hashes Here is a CSP directive that works like this: Content-Security-Policy: script-src 'self' 'unsafe-inline'; script-src-elem 'self'; script-src-attr 'unsafe-hashes' 'sha256-vIsp2avtxDy0157AryO+jEJVpLdmka7PI7o7C4q5ABE=' Old browsers will only use script-src. New browsers will use script-src-elem (for tags) and script-src-attr (for inline event handlers), which override the more liberal rules from script-src. Solution 3: Don't use a strict CSP You can have a secure web application without a strict CSP. A Content Security Policy should never be your first line of defense against Cross-Site-Scripting (XSS). Your primary tool should be to escape and sanitize user input. Many template engines make it easy to do the right thing by escaping dynamic content by default. A CSP is a second security net. It's there when you slip up and somehow, somewhere don't sanitize user input. Depending on your project, you may decide to prioritize developer convenience over a strict CSP.

Often people need links which are not linked directly, but should trigger execution of JavaScript. ❌ Bad workarounds

Our gem spreewald supports a few helpers for development. In case you notice errors in your Cucumber tests, you might...

Formerly 301 (Moved Permanently) and 302 (Found) were used for redirecting. Browsers did implement them in different ways, so since...

When giving a presentation where you do some coding, the font size you usually use is probably a bit too...

When testing JavaScript functionality in Selenium (E2E), you may need to access a class or function inside of a evaluate...