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.

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

If you end up with an Elasticsearch cluster which has a very different disk usage on it's nodes you...

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

Table of content for the linked article: 1. The `loading=lazy` attribute 2. Email, call, and SMS links

When storing files for lots of records in the server's file system, Carrierwave's default store_dir approach may...

Webpack builds can take a long time, so we only want to compile when needed. This card shows what will...

To attach files to your records, you will need a new database column representing the filename of the file...

Recently I made an upgrade from Bootstrap 3 to Bootstrap 4 in a bigger project. Here are some tips how...

Rails 6 includes a WYSIWYG editor, Action Text. It works out of the box quite well, but chances are that...

The linked blog post contains some background information about the alt attribute and the figure / figcaption element. It is interesting...

Git diffs show the surrounding contexts for diff hunks. It does so by applying regular expressions to find the beginning...

When you use Sentry to monitor exceptions, an important feature is Sentry's error grouping mechanism. It will aggregate similar...

CSP hat zum Ziel einen Browser-seitigen Mechanismus zu schaffen um einige Angriffe auf Webseiten zu verhindern, hauptsächlich XSS...

Nokogiri is great. It will even fix invalid HTML for you, like a browser would (e.g. move block elements out...

# Basic HTML example # Javascript API (notable methods and properties) video = document.querySelector('video') video.play() video.pause() video.load() // Reset to the beginning and...

RubyMine has a HTTP Client that can be useful to test web APIs. Just create a .http scratch file an...

Select2 comes with AJAX support built in, using jQuery's AJAX methods. ... For remote data sources only, Select2 does not...

Simplecov is a code coverage tool. This helps you to find out which parts of your application are not tested...

By default, Devise redirects to a sign-in form when accessing a route that requires authentication. If for some reason...

If you need to test some HTML, e.g. an embed code, you can use RubyMine's "scratch files":

Browsers come with a set of built-in elements like or . When we need a new component not covered by...