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.
We had a card that described how to install multiple mysql versions using mysql-sandbox. Nowadays with the wide adoption...
When using custom properties in your stylesheets, you may want to set a specific property value to an existing variable...
It seems like changing the HTTP_ACCEPT_LANGUAGE is not possible for a headless chrome. On Ubuntu the headless Chrome...
I ran into a situation in which I received the yarn integrity check warning when starting the rails console even...
Formerly 301 (Moved Permanently) and 302 (Found) were used for redirecting. Browsers did implement them in different ways, so since...
When using RestClient to make an HTTP request, it will raise an exception when receiving a non-successful response.
Accessing other repositories in Gitlab CI is not straight forward, since the access rights of the current pipeline might not...
In case your integration tests crash with a message like below, try to upgrade Capybara to a newer version (3.35.3...
The Node Version Manager allows installing multiple NodeJS versions and switching between them. By default, it does not automatically switch...
6.0.0 2021-06-02 Compatible changes geordi commit will continue even if one of the given projects is inaccessible. It...
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...
I encountered a unlucky behavior of byebug 11.1.3 (the most recent version at time of writing) when using it with...
rspec >= 3.1 brings a method and_wrap_original. It seems a bit complicated at first, but there are use cases...
If your Webpack build is slow, you can use the Speed Measure Plugin for Webpack to figure out where time...
To run additional code before an existing Rake tasks you can add a dependency like this: task :before_task...
Sometimes you want to load code on demand. For instance, when a a large library is only used on a...
Webpack builds can take a long time, so we only want to compile when needed. This card shows what will...
This card is a general reminder to avoid the short version of a command option in shared code. It's...
Installing gems on a server that has no access to the internet (especially rubygems.org) requires to bundle the gems into...
When you need the DOM node of a tag (e.g. to read extra attributes, or to modify the DOM near it), you can usually reference it via document.currentScript. However, document.currentScript is unsupported in ancient browsers, like Internet Explorer 11 or wkhtmltopdf's Webkit engine. If you are not running async scripts, you can easily polyfill it: document.scripts[document.scripts.length - 1] It works because document.scripts grows with each tag that was evaluated. That is also the reason why this solution will not work reliably for async code. Demo: https://codepen.io/foobear/pen/poRLxQm
In newer passenger versions the output of passenger -v has changed. capistrano-passenger tries to parse the version and now...