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
You can scale background images in CSS to the container size using background-size (Demo). Commonly, we use contain or...
What is netfilter's Connection Tracking system? The connection tracking system often referenced as nf_conntrack is part of the...
When testing JavaScript functionality in Selenium (E2E), you may need to access a class or function inside of a evaluate...
When a Ruby version gem has a letter in its version number, it is considered a pre-release:
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...
When your Rails application server raises error, Capybara will fail your test when it clears the session after the last...
Browsers blocks abusable JavaScript API calls until the user has interacted with the document. Examples would be opening new tab...
capybara-lockstep can help you with flaky end-to-end tests: This Ruby gem synchronizes Capybara commands with client-side...
json is part of the standard library of Ruby and deals with JSON, obviously. As you know, JSON is the...
When you repeat a subpattern with a *, + or {...} operator, you may choose between greedy, lazy and possessive modes. Switching modes...
Rails 6 includes a WYSIWYG editor, Action Text. It works out of the box quite well, but chances are that...
Rails supports alert and notice as default flash types. This allows you to use these keys as options in e.g...
TinyMCE is a WYSIWYG editor which is quite customizable. Add a custom button to the tinyMCE toolbar and tell tinyMCE...
Feature Queries (Edge 12+): Similar to @media queries, @supports blocks can be scoped to browsers that support a given declaration...
Scroll and touch event listeners tend to be computationally expensive as they are triggered very often. Every time the event...
When logging in Rails, you can use the log_tags configuration option to add extra information to each line, like...
If you migrate a Rails application from Sprockets to Webpack(er), you can either transpile your CoffeeScript files to JavaScript...
CSP hat zum Ziel einen Browser-seitigen Mechanismus zu schaffen um einige Angriffe auf Webseiten zu verhindern, hauptsächlich XSS...
Here is an ES5 object literal with two string properties and a function property: let user = { firstName: 'Max', lastName: 'Muster...
# Basic HTML example # Javascript API (notable methods and properties) video = document.querySelector('video') video.play() video.pause() video.load() // Reset to the beginning and...